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

  • 钉钉可以同时几个班一起上课吗

    钉钉可以同时几个班一起上课吗

  • 微信商家积分在哪里查询和兑现(微信商家 积分)

    微信商家积分在哪里查询和兑现(微信商家 积分)

  • 剪映如何配音(剪映如何配音变声)

    剪映如何配音(剪映如何配音变声)

  • vivox50如何设置微信美颜(vivox50如何设置呼叫转移)

    vivox50如何设置微信美颜(vivox50如何设置呼叫转移)

  • 小度是要一直充电吗(小度1s必须一直充电才能使用)

    小度是要一直充电吗(小度1s必须一直充电才能使用)

  • 苹果换盖板有什么影响(苹果手机换个盖板会不会影响使用)

    苹果换盖板有什么影响(苹果手机换个盖板会不会影响使用)

  • 华为畅玩9a什么时候上市的(华为畅玩9a什么处理器)

    华为畅玩9a什么时候上市的(华为畅玩9a什么处理器)

  • 小米手环4上市时间(小米8手环功能介绍)

    小米手环4上市时间(小米8手环功能介绍)

  • imessage已送达是表示对方收到信息了吗

    imessage已送达是表示对方收到信息了吗

  • 怎么关闭抖音的广告(怎么关闭抖音的声音)

    怎么关闭抖音的广告(怎么关闭抖音的声音)

  • nowplugin是什么文件(now是什么中文)

    nowplugin是什么文件(now是什么中文)

  • 爱奇艺没有扫码登录怎么回事(爱奇艺没有扫一扫了吗)

    爱奇艺没有扫码登录怎么回事(爱奇艺没有扫一扫了吗)

  • 帮朋友解封微信为什么不符合要求(帮朋友解封微信朋友圈有风险吗)

    帮朋友解封微信为什么不符合要求(帮朋友解封微信朋友圈有风险吗)

  • 抖音极速版怎么看直播(抖音极速版怎么升级最新版本)

    抖音极速版怎么看直播(抖音极速版怎么升级最新版本)

  • 被群主移出群别人知道吗(被群主移出群的心情说说)

    被群主移出群别人知道吗(被群主移出群的心情说说)

  • 三星a90是双模5g吗(三星a90 5g是双卡双待吗)

    三星a90是双模5g吗(三星a90 5g是双卡双待吗)

  • 苹果几开始可以双卡(苹果几开始可以双卡双待)

    苹果几开始可以双卡(苹果几开始可以双卡双待)

  • 高铁怎么用二维码检票上车(高铁怎么用二维码检票)

    高铁怎么用二维码检票上车(高铁怎么用二维码检票)

  • word如何设置段落行数(word如何设置段落编号)

    word如何设置段落行数(word如何设置段落编号)

  • 通讯录黑名单怎么解除(通讯录黑名单怎么找)

    通讯录黑名单怎么解除(通讯录黑名单怎么找)

  • xr如何快速切换主副卡(xr怎么开启切换控制)

    xr如何快速切换主副卡(xr怎么开启切换控制)

  • wps格式在哪儿(wps里面的格式在哪里)

    wps格式在哪儿(wps里面的格式在哪里)

  • appstore无法面部识别(appstore面容)

    appstore无法面部识别(appstore面容)

  • vivo手机相册怎样设置能和以前一样(vivo手机相册怎么加密)

    vivo手机相册怎样设置能和以前一样(vivo手机相册怎么加密)

  • is语音怎么解绑手机号(is语音软件怎么注销)

    is语音怎么解绑手机号(is语音软件怎么注销)

  • Python如何在画布中绘制多个图表?(python如何在画布上写字)

    Python如何在画布中绘制多个图表?(python如何在画布上写字)

  • 增值税率和征收率
  • 本期应补退税额和期末未缴税额
  • 个人所得税如何做会计分录
  • 临时用工的会计分录
  • 收到促销费方怎么做账
  • 小规模纳税人税率有几种
  • 递延收益怎么交企业所得税
  • 资信证明好开吗
  • 小微企业利息收入增值税
  • 企业的定期存款
  • 退休工资的个人账户怎么算
  • 对方开票怎么做账务处理
  • 工程分包开具发票怎么开
  • 制造费用可以抵进项税吗
  • 资产减值准备是
  • 行政诉讼的适用情况
  • 职工福利费要交个税吗
  • 应交税费明细科目有简易计税吗
  • 居民委员会有没有纳税人识别号吗
  • 电梯的运行与维护
  • 2021年电子税务局印花税怎么申报
  • 小规模纳税人增值税超过30万怎么纳税
  • 统一社会信用代码证
  • 预提费用年底必须结转吗
  • 1697508513
  • 电子发票可以开专票吗
  • thinkphp怎么用
  • PHP:session_cache_expire()的用法_Session函数
  • 触电了该怎么做
  • 一个php请求的执行过程
  • 记账凭证按其用途
  • 固定资产加速折旧方法
  • 实收资本账户对应的账户包括
  • 未确认融资费用怎么算
  • 安装工程在工程建设中的主要内容有哪些
  • 财务报表中固定资产清理为什么加借方余额
  • web前端面试题最新
  • php sha1加密 解密
  • gpt最大
  • 会计报表逾期未申报
  • 纳税证明和完税证明的金额为什么不一样
  • 租赁业务
  • 一般户可以转账给员工报销吗
  • day11-Servlet01
  • python3 sys模块
  • 织梦安装完要删除哪个文件
  • php_fileinfo不支持
  • mysql修改密码的命令
  • sqlserver 数据库加密
  • 保函分为几种
  • 当月进项票没有开进来
  • 专票红冲信息表填开显示红字信息表金额大于蓝色金额
  • 退回多交的所得税抵欠税怎么做账
  • 电子设备折旧残值率
  • 电商会计怎么做账
  • 事业单位收个人所得税吗
  • 财务负责人和办税员可以是一个吗
  • 个人账户打流水需要本人吗
  • 提前支付利息如何计算
  • sql server中通过查询分析器实现数据库的备份与恢复方法分享
  • 一个 sql 查询很慢,从哪些地方进行优化?
  • 无法将此电脑升级到最新版本的windows10
  • mac升级最新系统会卡么
  • vmware_vmx.exe进程在哪里关
  • hyper怎么用
  • ubuntu安装sz
  • vmware workstation15安装ubuntu
  • windows media player找不到媒体流
  • windows8怎么打开开始菜单
  • .exe是什么软件
  • win10飞行模式开关是灰色的
  • JQuery.Ajax()的data参数类型实例详解
  • node.js console.log
  • shell脚本-p
  • Android调用jni获取mac地址
  • python类属性和类方法
  • 税务局开展活动
  • 一般纳税人开劳务费税率是多少2023
  • 江西社保申报时间
  • 增值税网上申报步骤可以在手机上申报吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设