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

  • 支付宝壁纸在哪里找(支付宝主页背景图)

    支付宝壁纸在哪里找(支付宝主页背景图)

  • 快手怎么改无性别(快手如何从新设置)

    快手怎么改无性别(快手如何从新设置)

  • 手机号停机了怎么登录爱奇艺(手机号停机了怎么查号码)

    手机号停机了怎么登录爱奇艺(手机号停机了怎么查号码)

  • 无符号二进制整数1111001转换成十进制数是(无符号二进制整数111111转换成十进制数是)

    无符号二进制整数1111001转换成十进制数是(无符号二进制整数111111转换成十进制数是)

  • 华为手机出现volte怎么关闭(华为手机出现voice图标)

    华为手机出现volte怎么关闭(华为手机出现voice图标)

  • 为什么图片在word里面只显示一部分(为什么图片在word里面不显示)

    为什么图片在word里面只显示一部分(为什么图片在word里面不显示)

  • 调相机在电力系统中起什么作用(调相机是电动机还是发电机)

    调相机在电力系统中起什么作用(调相机是电动机还是发电机)

  • 扫码辅助注册对自己有没有影响(大街上扫码辅助注册)

    扫码辅助注册对自己有没有影响(大街上扫码辅助注册)

  • 钉钉呼叫受限是什么原因(钉钉电话呼叫受限)

    钉钉呼叫受限是什么原因(钉钉电话呼叫受限)

  • 安卓hd怎么关闭(安卓hd怎么关闭oppo)

    安卓hd怎么关闭(安卓hd怎么关闭oppo)

  • 手机qq视频聊天看不到对方是什么原因(手机qq视频聊天怎么给对方播放视频)

    手机qq视频聊天看不到对方是什么原因(手机qq视频聊天怎么给对方播放视频)

  • ipad13系统就是iosOS吗(ipad 13系统)

    ipad13系统就是iosOS吗(ipad 13系统)

  • oppor9应用加密在哪里取消(oppor9手机应用加密)

    oppor9应用加密在哪里取消(oppor9手机应用加密)

  • vivo悬浮球怎么换皮肤(vivo悬浮球怎么小屏应用)

    vivo悬浮球怎么换皮肤(vivo悬浮球怎么小屏应用)

  • 手机上网接入点怎么设置(手机上网接入点ims)

    手机上网接入点怎么设置(手机上网接入点ims)

  • 拼多多怎么取消绑定微信(拼多多怎么取消先用后付)

    拼多多怎么取消绑定微信(拼多多怎么取消先用后付)

  • iphone11可以插几张卡(iphone11能插几个手机卡)

    iphone11可以插几张卡(iphone11能插几个手机卡)

  • 快手通讯录好友指的是(快手通讯录好友对方有我电话吗)

    快手通讯录好友指的是(快手通讯录好友对方有我电话吗)

  • 优步在哪里修改目的地(优步在哪里修改手机号码)

    优步在哪里修改目的地(优步在哪里修改手机号码)

  • wifi如何恢复出厂设置密码(wifi如何恢复出厂设置并重新设置)

    wifi如何恢复出厂设置密码(wifi如何恢复出厂设置并重新设置)

  • 图虫的视频怎么设置隐私(图虫的视频怎么导出)

    图虫的视频怎么设置隐私(图虫的视频怎么导出)

  • linux系统有哪些(国产linux系统有哪些)

    linux系统有哪些(国产linux系统有哪些)

  • 王者荣耀体验皮肤火爆款是什么?(王者荣耀体验皮肤什么时候结束)

    王者荣耀体验皮肤火爆款是什么?(王者荣耀体验皮肤什么时候结束)

  • 印花税申报是含税收入还是不含税收入
  • 一般纳税人资格证明
  • 个人所得税的纳税方式有哪几种
  • 餐饮娱乐服务费进项税不能从销项税额抵扣
  • 实收资本增加的原因
  • 企业亏损法定盈亏是什么
  • 房地产公司拆迁部岗位职责
  • 预算管理如何做好管理会计这一工作
  • 当月逾期押金收违约金吗
  • 快递公司结算员工作量大不大
  • 在途物资材料采购的区别
  • 企业利用个体户走账
  • 有关税收的征收管理规定介绍
  • 增值税税率和征收率有什么区别
  • 不能抵扣的进项税怎么做账
  • 企业ci
  • 自建仓库转让如何计算增值税
  • 公司开设食堂需要哪些手续
  • 有哪些固定资产可以抵税
  • 委托加工应税消费品收回后直接销售
  • 固定资产报多好还是报少好
  • 苹果电脑怎么截屏ctrl加什么
  • 经济成本和会计成本的大小
  • 软件开发公司账务怎么做
  • 个税代扣代缴手续费返还增值税税率
  • u盘一键启动安装系统
  • mom.exe是什么
  • apache运行php
  • wmpdmc.exe是什么意思
  • rsa前端解密
  • 租入经营用房屋的改良支出
  • 本文虚构
  • php制作验证码
  • 什么是前后端分离的方式
  • chat top
  • 赊购材料尚未支付的款项属于什么科目
  • 公司名义送花圈
  • phpcms官网打不开
  • 不具备独立核算条件的行政单位
  • 总公司签合同开票分公司做业务分公司如何确认收入?
  • 更正申报补缴税款会影响记录
  • 奖金如何做账会计分录
  • 房地产企业土地增值税清算
  • 金税四期对企业影响
  • 收到一张普通发票怎么做账
  • 公司购买房子如何交税
  • 印花税征税对象是什么
  • 税控盘忘记抄报税怎么办
  • 企业逾期贷款利息影响征信吗
  • 固定资产清理会计处理
  • 冲销以前月份的凭证
  • 未发货未收款先开具发票怎么账务处理
  • 如何理解会计的本质
  • 预付和挂账如何区分
  • 过路费计入差旅费还是车辆
  • 年报从业人数和什么有关
  • 收入成本的确认条件
  • 商场水电费应该由谁承担
  • 指定为fvtpl
  • 搭建docker私有仓库实验报告
  • mac z
  • win7启动应用程序的方式
  • linux常用网络工具
  • win7系统网速太慢怎么办
  • 浅谈一下新冠的好处
  • 一周总结家长寄语
  • 深入浅出javascript
  • 解析函数
  • python标准模板库
  • nvm-windows
  • 探探左划还是右划
  • javascript 作用
  • 手机截取电脑屏幕
  • python编写一个函数求斐波那契
  • 不含税价是除以1.13还是乘以0.87
  • 河北工伤网上申请流程
  • 个人工资纳税证明
  • 国家税务总局全国增值税查验平台
  • 2021年下半年财务部工作计划
  • 出口退税预申报有疑点怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设