位置: 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子组件监听父组件)

  • 注册表编辑器(注册表编辑器)(注册表编辑器怎么恢复默认设置)

    注册表编辑器(注册表编辑器)(注册表编辑器怎么恢复默认设置)

  • 苹果手机通讯录怎么备份(苹果手机通讯录没有了怎么恢复)

    苹果手机通讯录怎么备份(苹果手机通讯录没有了怎么恢复)

  • win10怎么隐藏任务栏(win10怎么隐藏任务烂)

    win10怎么隐藏任务栏(win10怎么隐藏任务烂)

  • 换电话卡了绑定的各种信息怎么办(换电话卡了绑定不了微信)

    换电话卡了绑定的各种信息怎么办(换电话卡了绑定不了微信)

  • 为什么快手后面有带数字,有没带的(快手为什么有的出现在发现上)

    为什么快手后面有带数字,有没带的(快手为什么有的出现在发现上)

  • Word字体加黑怎么设置(word字体怎么加黑)

    Word字体加黑怎么设置(word字体怎么加黑)

  • mix2s可以插内存卡吗(小米mix2可以插内存卡吗)

    mix2s可以插内存卡吗(小米mix2可以插内存卡吗)

  • 荣耀x9和x9pro区别(荣耀x9和x9pro外形一样吗)

    荣耀x9和x9pro区别(荣耀x9和x9pro外形一样吗)

  • 闲鱼被限制发布怎么办永久限制闲鱼卖家权限(闲鱼被限制发布168小时以后会怎么样)

    闲鱼被限制发布怎么办永久限制闲鱼卖家权限(闲鱼被限制发布168小时以后会怎么样)

  • a52处理器是多少(a52s参数处理器)

    a52处理器是多少(a52s参数处理器)

  • o和l开关哪是开(开关的o和i按下哪个是开)

    o和l开关哪是开(开关的o和i按下哪个是开)

  • 戴尔笔记本怎么进入bios(戴尔笔记本怎么样)

    戴尔笔记本怎么进入bios(戴尔笔记本怎么样)

  • 屏幕键盘怎么按组合键(屏幕键盘怎么按fn组合键)

    屏幕键盘怎么按组合键(屏幕键盘怎么按fn组合键)

  • 朋友圈设置部分人可见别人知道吗(朋友圈设置可见对方知道吗)

    朋友圈设置部分人可见别人知道吗(朋友圈设置可见对方知道吗)

  • 小米智能卡在哪里设置(小米智能卡在哪里关闭)

    小米智能卡在哪里设置(小米智能卡在哪里关闭)

  • 华为p30什么时候上市的(华为p30什么时候升级鸿蒙3.0)

    华为p30什么时候上市的(华为p30什么时候升级鸿蒙3.0)

  • 华为p30充电指示灯在哪里设置(华为p30充电指示灯一直亮)

    华为p30充电指示灯在哪里设置(华为p30充电指示灯一直亮)

  • 对方删除我还能看到我的朋友圈吗(对方删除我还能转账吗)

    对方删除我还能看到我的朋友圈吗(对方删除我还能转账吗)

  • 快手怎么粘贴别人昵称(快手怎么粘贴别人昵称教程)

    快手怎么粘贴别人昵称(快手怎么粘贴别人昵称教程)

  • 小米手环4怎么连蓝牙(小米手环4怎么设置密码)

    小米手环4怎么连蓝牙(小米手环4怎么设置密码)

  • 文件和文件夹的区别(文件和文件夹的定义)

    文件和文件夹的区别(文件和文件夹的定义)

  • App Store可以退款吗?App Store退款流程指南(App Store可以退款吗)

    App Store可以退款吗?App Store退款流程指南(App Store可以退款吗)

  • 优酷路由宝赚金币越来越少该怎么办?(优酷路由宝是什么东西)

    优酷路由宝赚金币越来越少该怎么办?(优酷路由宝是什么东西)

  • Mac OS Big Sur怎么设置永不锁屏? Mac更改锁屏时间的技巧(macos big sur如何)

    Mac OS Big Sur怎么设置永不锁屏? Mac更改锁屏时间的技巧(macos big sur如何)

  • 死亡谷国家公园里的优比喜比火山口,加利福尼亚州 (© Albert Knapp/Alamy)(死亡谷景点)

    死亡谷国家公园里的优比喜比火山口,加利福尼亚州 (© Albert Knapp/Alamy)(死亡谷景点)

  • 详解Promise使用(promise基本使用)

    详解Promise使用(promise基本使用)

  • 小微企业所得税税率2.5% 10% 25%
  • 新准则金融资产科目名称
  • 进项税发票认证后能退票吗
  • 哪些行业增值税率1%
  • 融资租赁本金和租金的区别
  • 跨年的材料专票怎么做会计分录?
  • 售后回租利息和租金区别
  • 稿酬收入怎么算
  • 当月发票开错了已经红冲怎么做分录?
  • 外贸公司的出口清单
  • 淘宝企业店铺是工厂直销吗
  • 企业申请核定征收的要求
  • 国税发2005 9号 税屋
  • 普票3点怎么算
  • 报个税系统叫啥
  • 预收房屋租金如何交房产税
  • 生产企业出租设备如何开票
  • 工会经费返还账务处理,另记账么
  • 公司章程出资时间怎么填写
  • 清算后土增税缴纳计算
  • windows10开机如何换帐号
  • prevsrv.exe - prevsrv是什么进程 有什么用
  • 工会经费,职工福利费,教育经费的扣除标准
  • 电脑管家浏览器保护怎么取消
  • rasman.exe - rasman是什么进程 有什么作用
  • 原材料当做废品怎么做
  • 受限制用户怎么解决
  • 成都划拨土地出让金计算
  • emsm是什么意思
  • 进货发票怎么抵税
  • PHP:JDToJulian()的用法_日历函数
  • 企业缴纳的所得税应以净利润为基础
  • vuecli项目实战
  • 增值税简易计税方法适用范围
  • Pythonround函数作用
  • 无产权证房屋转让需要公证吗
  • 外币汇兑损益怎么计算
  • 收购固定资产账务处理
  • 小规模纳税人固定资产原值含税吗
  • 工程在建期间的招待费计入什么科目
  • 红字发票销项税额账务处理
  • 进项税额转出如何申报
  • 购买农产品普通发票怎么做账
  • 教育局可以接受捐赠吗
  • 在异地施工就要在异地交税吗
  • 进口向海关缴纳消费税
  • 河道管理费是附加税吗
  • 零余额帐户如何转出
  • 出口退税转为免税处理有损失吗
  • 企业整个月没有缴纳社保
  • sql语句实现查询示例
  • Windows10 64位安装MySQL5.6.35的图文教程
  • freebsd10安装教程
  • win8.1系统安装教程
  • win7硬盘安装器下载
  • win10预览版21277
  • linux-c
  • win7卸载软件时显示program
  • win8.1黑屏
  • Win10 Mobile build 10586.338安装/上手体验视频
  • 双系统其中一个系统无法开机
  • 缺少系统操作怎么办
  • windows桌面卡
  • win10下itunes
  • jquery 异步请求
  • javascript详解
  • nodejs v8
  • angular子组件调用父组件的方法
  • shell中的grep怎么用
  • unity怎么加人
  • js设置点击效果
  • eclipse项目导入后有红叉
  • jquery 触发点击
  • jquery获取当前日期yyyymmdd
  • 安卓怎么压缩
  • 税务局开展活动
  • 小微企业印花税减免政策2024
  • 乌鲁木齐市公立幼儿园有哪些
  • 农村信用社升级为什么
  • 金税工程什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设