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

  • 荣耀x20se不支持语音唤醒吗(荣耀x20se不支持语音唤醒的解决方法)

    荣耀x20se不支持语音唤醒吗(荣耀x20se不支持语音唤醒的解决方法)

  • 微信青少年监护人有什么权限(微信青少年监护人能删好友吗)

    微信青少年监护人有什么权限(微信青少年监护人能删好友吗)

  • nova4和nova4e的区别(nova4和nova4e的区别哪个好)

    nova4和nova4e的区别(nova4和nova4e的区别哪个好)

  • 苹果手表充满电可以用多久(苹果手表充满电了能用多长时间)

    苹果手表充满电可以用多久(苹果手表充满电了能用多长时间)

  • 华为畅享手机如何截长图并下拉(华为畅享手机如何添加桌面天气及时间)

    华为畅享手机如何截长图并下拉(华为畅享手机如何添加桌面天气及时间)

  • 苹果无线满格上网很慢(为什么苹果wifi满格还是上不了网)

    苹果无线满格上网很慢(为什么苹果wifi满格还是上不了网)

  • 照片和扫描件的区别(照片和扫描件的法律效力)

    照片和扫描件的区别(照片和扫描件的法律效力)

  • 华为荣耀20lite是青春版吗(荣耀20lite百度百科)

    华为荣耀20lite是青春版吗(荣耀20lite百度百科)

  • 站内信通知是什么意思(站内信息是什么意思)

    站内信通知是什么意思(站内信息是什么意思)

  • 苹果手机支持5g网络吗(苹果手机支持5ghz频段吗)

    苹果手机支持5g网络吗(苹果手机支持5ghz频段吗)

  • 华为手机屏幕时间延长(华为手机屏幕时间不见了怎么弄回来)

    华为手机屏幕时间延长(华为手机屏幕时间不见了怎么弄回来)

  • 小米手机呼吸灯闪烁开不了机(小米手机呼吸灯一闪一闪的)

    小米手机呼吸灯闪烁开不了机(小米手机呼吸灯一闪一闪的)

  • 抖音播放量1万有什么用(抖音播放量1万2为啥停了)

    抖音播放量1万有什么用(抖音播放量1万2为啥停了)

  • 淘宝人生关闭方法(淘宝人生关闭方法是什么)

    淘宝人生关闭方法(淘宝人生关闭方法是什么)

  • 手机如何修改qq昵称(手机如何修改qq聊天时间)

    手机如何修改qq昵称(手机如何修改qq聊天时间)

  • 抖音视频收藏怎么删除(抖音视频收藏怎样转入相册)

    抖音视频收藏怎么删除(抖音视频收藏怎样转入相册)

  • 鲲鹏920是手机芯片吗(鲲鹏920处理器怎么样)

    鲲鹏920是手机芯片吗(鲲鹏920处理器怎么样)

  • ip十进制取值范围(ip十进制转换)

    ip十进制取值范围(ip十进制转换)

  • 苹果耳机2代有线和无线区别(苹果耳机2代有几个版本)

    苹果耳机2代有线和无线区别(苹果耳机2代有几个版本)

  • airpods怎么两个一起用(airpods怎么两个耳机连接两个手机)

    airpods怎么两个一起用(airpods怎么两个耳机连接两个手机)

  • 酷我如何开直播(酷我音乐直播可以投屏吗)

    酷我如何开直播(酷我音乐直播可以投屏吗)

  • 腾讯视频怎么设置免流量(腾讯视频怎么设置默认清晰度)

    腾讯视频怎么设置免流量(腾讯视频怎么设置默认清晰度)

  • PHPCMS手机站怎么建站?(phpcms怎么用)

    PHPCMS手机站怎么建站?(phpcms怎么用)

  • 印花税和契税是什么意思?什么时候交?
  • 运动会奖品有什么
  • 房地产房屋质量检测
  • 处置无形资产属于经营活动吗
  • 小规模代开增值税专用发票怎么操作?
  • 周转材料登三栏式明细账吗
  • 小微企业季报
  • 车船税代扣代缴手续费
  • 工业企业会计怎么结转成本
  • 无法收回的应收款计入什么科目
  • 电影院买电影票怎么买
  • 溢价发行股票的账务处理
  • 不同项目的进项税可以抵销项税吗
  • 公司进项销项税差异较大
  • 收到3%的增值税专用发票可以抵扣吗
  • 土地款印花税计入无形资产吗
  • 外贸企业出出口退税会计科目怎么做账?
  • 怎样理解递归
  • 境外所得税收抵免政策
  • 发票升额需要什么条件
  • 劳务派遣一般纳税人可以简易征收吗
  • 银行承兑 贷款
  • 发票 发票联
  • 个体户开劳务费税率
  • 采购材料的运费怎么做分录
  • 发生坏账损失账务处理
  • 库存商品结转会计分录
  • bios里硬盘是哪个
  • 社会保险生育险能报多少
  • 纳税确有困难标准
  • 当月交当月社保费会计分录
  • 开源鸿蒙适配
  • 代开发票的弊端?
  • php图片叠加
  • 在windows操作
  • 在我国,企业可以用税前利润弥补几年内的损失
  • 金融企业允许税前扣除的准备金
  • 企业资产损失所得税税前扣除
  • vuecli3创建项目的过程
  • 公司汽车折旧计算方法用那种
  • vue中使用jsx语法
  • 增值税普通发票查询真伪
  • 增值税专用发票电子版
  • vscode yaml插件
  • python中lambda用法
  • 制造车间买来刀具怎么办
  • 关于翡翠手镯知识
  • 企业与个人之间关系的理解
  • 电子税务局是指什么意思
  • 有限公司股权转让需要股东会决议吗
  • 无形资产如何做账务处理
  • 油卡办理需要多久?
  • 包工包料工程如何报价合理
  • 材料成本多少合适
  • 用友u8怎样查询上个月凭证
  • 先进先出法实际成本跟成本不一样吗
  • 收入的利息如何计算
  • 工程未竣工可以出竣工报告吗
  • 阿拉伯数字转大写函数
  • asp.net 使用SqlBulkCopy极速插入数据到 SQL Server
  • win10系统如何打开运行命令
  • xp系统玩英雄联盟出现win32
  • win8.1系统安装教程
  • linux字符串命令
  • win7系统怎么设置桌面便签
  • cortana win10
  • 怎么删除listview条目
  • cocos2d::DrawPrimitives和DrawNode分别实现画板功能
  • css如何设置div位置
  • js array api
  • android系统介绍
  • shell脚本用法
  • 可以查杀病毒的软件
  • js中递归是什么意思
  • js基于什么
  • js 实现一个new
  • jstree异步加载
  • python爬虫从入门到精通
  • 个人账户手机银行如何对公转账
  • 广西纳税申报流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设