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

  • 房地产企业递延所得税资产计算方法
  • 其他应收款包括应收利息吗
  • 员工报销汽油费可以抵扣进项税吗
  • 以前年度少计费用,调整分录
  • 取得运输部门开具的增值税专用发票
  • 物流公司一般纳税人怎么报税
  • 成本票最多开多少
  • 增值税进项税额转出是什么意思
  • 吊装费用税率
  • 小规模季度不超过30万元免税会计分录
  • 重点创业人群
  • 暂估入库会影响利润吗
  • 允许扣除的土地价款怎么计算例题
  • ipad常用语在哪里
  • windows10开机如何换帐号
  • 苹果6拍照如何
  • window10设置wifi热点
  • 装电脑系统的方法和步骤
  • php rewind
  • 房地产开发公司组织架构
  • PHP:zip_entry_read()的用法_Zip函数
  • 工程建设质保金规定
  • 【第十一届“泰迪杯”数据挖掘挑战赛】B题产品订单的数据分析与需求预测“解题思路“”以及“代码分享”
  • php 字符串
  • yolov5实例分割原理详解
  • pnmdp
  • 公司买的公文包会计怎么做
  • 前端数据导出为excel
  • 【历史上的今天】4 月 7 日:IBM System/360 问世;以太网的发明者诞生;第一个 RFC 文档发布
  • vue国际化占位符
  • 命令行查看硬件信息
  • phpcms api
  • 行政事业单位固定资产划拨账务处理
  • 公司减持股份是利好还是利空
  • 公司食堂吃饭没钱怎么办
  • mongodb replica set 配置高性能多服务器详解
  • 财务负责人和法人可以一个人吗
  • 企业每个季度叫什么
  • 费用少计提了怎么办
  • 因管理不善材料被盗应记啥科目
  • 产品加工总是会出现问题的,100%合格是不可能的
  • 已认证抵扣的发票如何红字信息表
  • 单位买的职工社保自己可以去社保局领卡吗
  • 无形资产内部研究开发支出的处理
  • 年初余额和期末余额对不上怎么办
  • 租赁费计提印花税税率
  • 某劳务派遣公司与某传媒公司签订
  • 修缮服务指什么
  • 民办幼儿园如何生存
  • 入库单的会计分录
  • 总账会计工作流程表
  • 应付职工薪酬讲解
  • 销售商品托收承付怎么确认收入
  • 日记账的建账工作
  • delete from 表名 where
  • 完美解决索尼电视arc无声音
  • sql查询方法有哪些
  • linux怎么调整屏幕大小
  • centos关闭gui
  • win10系统如何删除账户
  • linux 修复系统
  • win7系统的图片
  • WIN10系统中引导修复不工作
  • js代码执行顺序简单介绍
  • python计算ndvi
  • perl tr函数
  • node javascript
  • js多选
  • jsp页面显示日历控件
  • unity3d导出fbx文件
  • javascript文本框获得焦点
  • python中get()函数
  • 双色球兑奖方式选法
  • 浙江国税电子税务局
  • 社保扣缴客户端下载
  • 陕西税务管网
  • 车船税完税证明开具如何开具
  • 江苏医保给家人用怎么操作
  • 管道运输企业的核心指标是
  • 河南出名歌手
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设