位置: IT常识 - 正文

微信小程序项目实例——我有一支画笔(画画)(微信小程序项目中app.js文件是全局样式文件)

编辑:rootadmin
微信小程序项目实例——我有一支画笔(画画) 微信小程序项目实例——我有一支画笔(画画)文章目录微信小程序项目实例——我有一支画笔(画画)一、项目展示二、首页三、自由绘图四、照片绘图文末

推荐整理分享微信小程序项目实例——我有一支画笔(画画)(微信小程序项目中app.js文件是全局样式文件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序项目开发实战,微信小程序项目方案,微信小程序项目代码,微信小程序项目代码,微信小程序项目中的 ______ 文件是全局配置文件,微信小程序项目中的 ______ 文件是全局配置文件,微信小程序项目方案,微信小程序项目方案,内容如对您有帮助,希望把文章链接给更多的朋友!

项目代码见文字底部,点赞关注有惊喜


一、项目展示

我有一支画笔是一款绘图小程序 用户可以在白板上自由画画,也可以选择一张本地的照片,在照片上画画 用户可以自由修改画笔宽度、颜色,同时绘画可以保存到本地

二、首页

首页由两张图片构成 代表自由绘图和照片绘图两个功能 用户点击选择不同功能

<!--index.wxml--><view class="painting" bindtap="toPainting"> <image src="../../images/paint3.png" mode="aspectFit"/></view><view class="painting2" bindtap="toPainting2"> <image src="../../images/paint2.png" mode="aspectFit"/></view>/**index.wxss**/page{ width: 100%; height: auto; display: flex; flex-direction: column; align-items: center;}.painting{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 100px; width: 260rpx; height: 260rpx; /* background-color: red; */}.painting2{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 100px; width: 260rpx; height: 260rpx; /* background-color: red; */}

首页效果如下:

三、自由绘图微信小程序项目实例——我有一支画笔(画画)(微信小程序项目中app.js文件是全局样式文件)

用户可以在空白页面上进行绘图 用户可以调整画笔粗细,画笔颜色 也可以使用橡皮擦来擦除 最后可以将画好的图保存到本地

下面仅展示UI界面代码

<!--painting.wxml--><canvas canvas-id="myCanvas" style="height: calc(100vh - {{canvasHeight}}px)" disable-scroll="true" bindtouchend="toucheEnd" bindtouchstart="touchStart" bindtouchmove="touchMove"/><view class="bottom"> <block wx:for="{{btnInfo}}" wx:key="{{index}}"> <view class="list-item" data-type="{{item.type}}" style="background: {{item.background}}" bindtap="tapBtn"></view> </block></view><view class="choose-box" wx:if="{{width}}"><view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view> <slider min="1" max="50" step="1" show-value="true" value="{{w}}" bindchange="changeWidth"/></view><view class="choose-box" wx:if="{{color}}"> <view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view> <slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{{r}}" data-color="r" bindchange="changeColor"/> <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{{g}}" data-color="g" bindchange="changeColor"/> <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{{b}}" data-color="b" bindchange="changeColor"/></view><view class="choose-box-flex" wx:if="{{clear}}"> <view class="choose-item" bindtap="chooseEraser"> <view class="choose-img" style='background: url("https://www.yuucn.com/wp-content/uploads/2023/04/1682815302-9c519718bc0e8e5.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px; border: {{eraser ? "2px solid red" : "2px solid transparent"}}'></view> <view>橡皮擦</view> </view> <view class="choose-item" bindtap="clearCanvas"> <view class="choose-img" style='background: url("https://www.yuucn.com/wp-content/uploads/2023/04/1682815310-9c519718bc0e8e5.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px;'></view> <view>清空</view> </view></view>/* painting.wxss */page { background: rgba(153, 204, 255, 0.1);}canvas { width: 100vw;}.bottom { width: 100vw; height: 50px; position: absolute; bottom: 0; display: flex; justify-content: space-around;}.list-item { width: 30px; height: 30px; margin: 10px 0; border-radius: 50%;}.choose-box { width: 100vw; position: absolute; bottom: 50px;}.color-box { width: 50vw; margin: 20px auto;}slider { margin: 20px 30px;}.choose-box-flex { display: flex; justify-content: space-around; width: 100vw; position: absolute; bottom: 50px; font-size: 16px; color: #666; text-align: center;}.choose-img { width: 30px; height: 30px; margin: 10px; border-radius: 50%; background: white;}

下面我将给大家演示一下我的室友!!! (喜欢我室友的可以私信我,送微信号!!!)

四、照片绘图

用户可以选择一张照片 在照片的基础上进行绘画 其余功能和自由绘画一致

下面仅展示UI界面代码

<!--painting-2.wxml--><canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" wx:if="{{hasChoosedImg}}" style="height: {{(canvasHeightLen == 0) ? canvasHeight : canvasHeightLen}}px; width: {{canvasWidth}}px;" /><view class="failText" wx:if="{{!hasChoosedImg}}" click="">没有选择照片,点击重新选择</view><view class="bottom"> <block wx:for="{{btnInfo}}" wx:key="{{index}}"> <view class="list-item" data-type="{{item.type}}" style="background: {{item.background}}" bindtap="tapBtn"></view> </block></view><view class="choose-box" wx:if="{{width}}"><view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view> <slider min="1" max="50" step="1" show-value="true" value="{{w}}" bindchange="changeWidth"/></view><view class="choose-box" wx:if="{{color}}"> <view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view> <slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{{r}}" data-color="r" bindchange="changeColor"/> <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{{g}}" data-color="g" bindchange="changeColor"/> <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{{b}}" data-color="b" bindchange="changeColor"/></view>/* painting-2.wxss */page { background: rgba(153, 204, 255, 0.1);}.failText { margin-top: 100px; text-align: center; color: #888;}.bottom { width: 100vw; height: 50px; position: absolute; bottom: 0; display: flex; justify-content: space-around;}.list-item { width: 30px; height: 30px; margin: 10px 0; border-radius: 50%;}.choose-box { width: 100vw; position: absolute; bottom: 50px;}.color-box { width: 50vw; margin: 20px auto;}slider { margin: 20px 30px;}.choose-box-flex { display: flex; justify-content: space-around; width: 100vw; position: absolute; bottom: 50px; font-size: 16px; color: #666; text-align: center;}.choose-img { width: 30px; height: 30px; margin: 10px; border-radius: 50%; background: white;}

下面我将画我的室友2号!! 我的室友2号是校草!!! 中意的请私信我发他微信号!

文末

具体的介绍就到这里了 小程序有时候会卡顿一下但是不多 有兴趣的同学可以继续研究 代码放到下面链接里了

点击下载 小程序

本文链接地址:https://www.jiuchutong.com/zhishi/298444.html 转载请保留说明!

上一篇:ChatGPT解开了我一直以来对自动化测试的疑惑

下一篇:vue子组件监听父组件数据变化并作出改变(亲测有效)(vue子组件监听父组件)

  • 怎么做网络推广?(怎么做网络推广多少钱)

    怎么做网络推广?(怎么做网络推广多少钱)

  • 红米k40pro支持无线充电吗(红米k40pro带不带无线充电)

    红米k40pro支持无线充电吗(红米k40pro带不带无线充电)

  • 如何将ppt转换成word(如何将PPT转换成PNG)

    如何将ppt转换成word(如何将PPT转换成PNG)

  • 抖音怎么没有美颜了(抖音怎么没有美颜功能了点开资源加载中)

    抖音怎么没有美颜了(抖音怎么没有美颜功能了点开资源加载中)

  • 企业微信收不到信息怎么处理(企业微信收不到邮件是什么原因)

    企业微信收不到信息怎么处理(企业微信收不到邮件是什么原因)

  • 黑鲨手机是什么系统(黑鲨手机是什么旗下的)

    黑鲨手机是什么系统(黑鲨手机是什么旗下的)

  • 苹果se2电池多大(苹果se2电池容量多少)

    苹果se2电池多大(苹果se2电池容量多少)

  • 电脑显示屏七种颜色来回闪(电脑显示屏有几种)

    电脑显示屏七种颜色来回闪(电脑显示屏有几种)

  • 共享联系人是什么意思(共享联系人是怎么回事)

    共享联系人是什么意思(共享联系人是怎么回事)

  • 抖音永久封禁还能拿回来吗(抖音永久封禁还有机会解封吗)

    抖音永久封禁还能拿回来吗(抖音永久封禁还有机会解封吗)

  • oppoa33为什么总显示空间不足(oppo手机为什么老)

    oppoa33为什么总显示空间不足(oppo手机为什么老)

  • 微信聊天背景图模糊怎么弄(微信聊天背景图怎么恢复原来的)

    微信聊天背景图模糊怎么弄(微信聊天背景图怎么恢复原来的)

  • 5G手机关掉5G还耗电吗(5g手机关掉5g后流量用得快吗)

    5G手机关掉5G还耗电吗(5g手机关掉5g后流量用得快吗)

  • windows7中回收站实际上是什么(windows7中回收站是占用什么)

    windows7中回收站实际上是什么(windows7中回收站是占用什么)

  • ipad的wlan和wifi的区别(wlan和wifi的区别)

    ipad的wlan和wifi的区别(wlan和wifi的区别)

  • 淘宝物流地图在哪开启(淘宝物流地图在国内实际是国外发)

    淘宝物流地图在哪开启(淘宝物流地图在国内实际是国外发)

  • 电商sku和spu的区别(电商sku spu)

    电商sku和spu的区别(电商sku spu)

  • vivos1是双引擎闪充吗(vivos1双引擎闪充怎么开启触发)

    vivos1是双引擎闪充吗(vivos1双引擎闪充怎么开启触发)

  • 苹果11怎么设置来电闪光灯(苹果11怎么设置悬浮球)

    苹果11怎么设置来电闪光灯(苹果11怎么设置悬浮球)

  • dubal00和dubal20区别(dubal00是什么型号)

    dubal00和dubal20区别(dubal00是什么型号)

  • 如何扫描图片变成文字(如何扫描图片变成电子版)

    如何扫描图片变成文字(如何扫描图片变成电子版)

  • 组成计算机指令的两部分是(组成计算机指令的两大部件是)

    组成计算机指令的两部分是(组成计算机指令的两大部件是)

  • 荣耀20语音助手在哪里(荣耀20语音助手怎么一喊就出来)

    荣耀20语音助手在哪里(荣耀20语音助手怎么一喊就出来)

  • 隐藏资源管理器中的文件夹选项(隐藏资源管理器窗口)

    隐藏资源管理器中的文件夹选项(隐藏资源管理器窗口)

  • 跨区域涉税事项报验是什么意思
  • 出口退税计算公式 中华会计网校
  • 检查记账凭证的主要方法有哪些?
  • 购房补贴退契税多久到账
  • 政府奖励收入要交企业所得税么
  • 监理行业增值税税率多少
  • 未分配利润期末减期初等于什么
  • 施工企业材料采购
  • 库存商品的成本核算
  • 车辆商业险和交强险可以分开买吗
  • 迁移税务需要带什么资料
  • 怎么查询企业的注册资金
  • 代开普通发票要什么材料?
  • 此windows副本不是正版影响电脑使用吗
  • 个税手续费返还要交企业所得税吗
  • win11如何设置开机自启动软件
  • 开发商未出售的房子有产权证吗
  • 存出保证金计入货币资金吗
  • PHP:stream_get_line()的用法_Stream函数
  • paytime.exe - paytime是什么进程 有什么用
  • 翡翠湾攻略
  • 房地产开发企业会计制度
  • 新建厂房费用应计入什么
  • 政府购买企业服务是否交税
  • 增值税核算账务处理办法
  • vue添加css
  • stable Diffusion安装教程
  • 建筑业异地预缴增值税
  • 支付职工教育经费
  • qt+opencv教程
  • spring集成xfire
  • 长期待摊费用为负数怎么调整
  • 非货币性资产交换和债务重组的区别
  • 公司全额承担个税会计分录
  • 为什么分红不影响损益
  • 买轿车产生的服务费用
  • 在建工程可以核酸无形资产
  • 财政拨款事业单位的办公用车免征车船税吗
  • 实收资本何时入账
  • 制造费用和生产成本结转
  • 固定资产每月计提还是每年计提
  • sqlserver如何使用
  • 个人独资企业的
  • 小微企业所得税怎么算
  • 小规模纳税人加工劳务的税率是多少
  • 进口卷烟消费税定额税率
  • 当月红冲上月开具的增值税
  • 会计账户与银行账户
  • 长期待摊的分录
  • 代扣税款手续费是什么意思
  • 个人转到公司账上的钱能开发票吗
  • 投入的资金如何做账
  • 还账准备计提方法
  • 应交税费中应交税金包含个税吗
  • 小规模纳税人核定销售额
  • 新手学会计怎么学
  • mysql数据库输入汉字是问号
  • win7系统步骤
  • 64位win8怎么安装南天PR2E针式打印机驱动?
  • win10创意者更新易升
  • 远程桌面连接 server 2016
  • 丢失acui16.dll
  • 怎么提高xp系统运行速度
  • mac如何修改用户名称
  • win10系统预览版
  • window预览
  • jquery上传图片并预览
  • ie11滚动条样式
  • css中文名称
  • shell中的-le
  • 用批处理结束进程
  • python 日期运算
  • python随机发红包代码
  • jquery监听span内容的变化
  • unity3d官方教程
  • Developing for Android, IV: The Rules: Networking
  • 如何查询以前月份发票超限量的申请
  • 成都税务企业号公众号
  • 河北省国家税务总局云办税厅
  • 税务局怎么知道房屋出租
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设