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

  • 苹果13pro怎么还原网络设置(苹果13pro怎么还涨价了)

    苹果13pro怎么还原网络设置(苹果13pro怎么还涨价了)

  • 荣耀nfc怎么复制门禁卡(荣耀nfc怎么复制公交卡到手机)

    荣耀nfc怎么复制门禁卡(荣耀nfc怎么复制公交卡到手机)

  • opporeno7是不是双卡(oppor7是双4g吗)

    opporeno7是不是双卡(oppor7是双4g吗)

  • opporeno7se有耳机孔吗(opporeno7sE有耳机孔吗)

    opporeno7se有耳机孔吗(opporeno7sE有耳机孔吗)

  • 创维t2和t2pro比较(创维t3和t2pro)

    创维t2和t2pro比较(创维t3和t2pro)

  • 抖音直播收入怎么分成(抖音直播收入怎么看谁送的)

    抖音直播收入怎么分成(抖音直播收入怎么看谁送的)

  • 钉钉怎样取消实名认证(钉钉怎么取消实人认证)

    钉钉怎样取消实名认证(钉钉怎么取消实人认证)

  • heytap大会员的权益是什么(heytap会员有什么用)

    heytap大会员的权益是什么(heytap会员有什么用)

  • 手机自动亮屏怎么关掉(手机自动亮屏怎么回事)

    手机自动亮屏怎么关掉(手机自动亮屏怎么回事)

  • 天猫精灵网络连接不上(天猫精灵网络连接失败建议您根据手机提示帮我联网哦)

    天猫精灵网络连接不上(天猫精灵网络连接失败建议您根据手机提示帮我联网哦)

  • 苹果手机高温后的影响(苹果手机高温后开不开机咋回事)

    苹果手机高温后的影响(苹果手机高温后开不开机咋回事)

  • 腾讯视频怎么下载超清电视剧(腾讯视频怎么下载电影到U盘)

    腾讯视频怎么下载超清电视剧(腾讯视频怎么下载电影到U盘)

  • 苹果11能否无线充电(iphone 11能无线)

    苹果11能否无线充电(iphone 11能无线)

  • 微信联系人上限(隐藏微信联系人)

    微信联系人上限(隐藏微信联系人)

  • 常用镜头可分为哪两种(常用镜头可分为哪几类)

    常用镜头可分为哪两种(常用镜头可分为哪几类)

  • 乐视手机为什么卡(乐视手机为什么连上无线网却不能上)

    乐视手机为什么卡(乐视手机为什么连上无线网却不能上)

  • 微信接收新消息通知打不开怎么办(微信接收新消息通知自动关闭)

    微信接收新消息通知打不开怎么办(微信接收新消息通知自动关闭)

  • qq注销账号后会怎么样(qq注销账号后会自动退群吗)

    qq注销账号后会怎么样(qq注销账号后会自动退群吗)

  • qq音乐桌面壁纸怎么弄(qq音乐壁纸怎么设置)

    qq音乐桌面壁纸怎么弄(qq音乐壁纸怎么设置)

  • 近摄接圈怎么用(近摄接圈的作用)

    近摄接圈怎么用(近摄接圈的作用)

  • 华为mate30pro如何调音量(华为mate30pro如何设置高清通话)

    华为mate30pro如何调音量(华为mate30pro如何设置高清通话)

  • 苹果6s什么时候停的产(苹果6s什么时候停产的)

    苹果6s什么时候停的产(苹果6s什么时候停产的)

  • 怎样删除零钱明细账单(零钱明系怎么删除)

    怎样删除零钱明细账单(零钱明系怎么删除)

  • 前端微信小程序开发基础(前端微信小程序支付功能怎么实现)

    前端微信小程序开发基础(前端微信小程序支付功能怎么实现)

  • 税前扣除的项目包括
  • 一般纳税人企业所得税是多少
  • 财税大管家客服电话
  • 税收指的是什么
  • 服务业费用有哪些
  • 血液制品3%增值税税率
  • 第一次购买税控盘
  • 税控盘必须一直插着吗
  • 顺风车公司可以开发票吗
  • 建筑行业进项税率一览表
  • 收到的房租增值税专用发票可以抵扣吗
  • 合伙企业无偿获得股权怎么缴税?
  • 应收票据周转率高
  • 劳保费用可以开专票吗
  • 农业公司没发票可以入账吗
  • 企业办税人员收入怎么算
  • 进项大于销项的分录怎么写
  • 进项发票不够如何避税
  • 公司的私账合法吗
  • 软件企业产品如何销售
  • 货到票未到的会计账务处理
  • 报税没有印花税怎么处理
  • 集团内部资金借贷制度
  • 从租计征的房产税需要缴纳土地使用税吗
  • 自用煤怎么入账
  • php fork
  • macOS Big Sur 11.3新功能 为M1 Mac带来了iOS应用的手柄模拟功能
  • win10预览版21337
  • 总公司的固定资产可以划转子公司
  • thinkphp框架介绍
  • 非关联企业无偿借款涉及到税务会计分录处理
  • 房抵债权
  • 项目差旅费能计入项目费用吗
  • node .js
  • 分类问题的评价方法有
  • 接口多继承的写法
  • 微信利用php创建文件
  • 增值税直接减征的情形
  • 宝塔运行go
  • 贷款利息发票可以随便开吗
  • python里面init
  • 织梦cms为什么不维护了
  • 职工福利费的开支范围的规定扣除
  • 公司自有房产出租给员工如何处理
  • 现金流量表财务报表
  • 代开发票相关问答有什么?
  • 专票要写开户行和账号
  • 原始凭证审核要点包括
  • 会计学中递延收益的概念
  • 哪些合同不用交社保
  • 应付账款挂账
  • 企业办公楼房产税如何征收
  • 以前年度不合规发票如何调年报
  • 给个体工商户付款可以打到法人卡上吗
  • 食品企业生产成本管理的案例分析
  • 仓管需要会计证吗
  • ROW_NUMBER SQL Server 2005的LIMIT功能实现(ROW_NUMBER()排序函数)
  • sql server的相关技术知识
  • 微软星期二补丁KB3022345导致USB设备无法识别怎么办?
  • windows7 ie
  • 苹果电脑mac系统怎么升级
  • linux cat 命令
  • WinMX.exe - WinMX是什么进程
  • windows7粘滞键怎么关
  • win10家庭版怎么关闭windows defender
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • html中链接
  • unity技术分享
  • nodejs实战
  • 服务器安全设备
  • javascript基础教程答案
  • jquery添加自定义属性
  • 陕西省税务局电子税务局官网
  • 电子税务局怎么添加开票员
  • 青年文明号创建目标
  • 内蒙古城镇土地使用税税率表
  • 小学的困难补助什么时候发
  • 非法印制发票的后果
  • 党风监督员监督和反应情况怎么写
  • 江苏电子口岸卡邮寄大概需要多久
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设