微信小程序实现在线画板

本文实例为大家分享了微信小程序实现手指触摸画板的具体代码，供大家参考，具体内容如下

1、WXML 代码

<!--index.wxml-->
<!-- 弹出框 -->
<view class='alert' hidden='{{alertShow}}' bindtap="alertClick">
<!-- catchtap 阻止冒泡事件 --><view class="alert-main" catchtap='qwe'><form bindsubmit='fabuProject'><view class="timu qwe"><view>题目：</view><input type="text" name="name" placeholder='1-6个字（例：中国）'/></view><view class="tishi qwe"><view>提示：</view><input type="text" name="notice" placeholder='1-10个字（例：国家）'/></view><view class='form-btn qwe'><button form-type='submit'>提交</button><button form-type='reset'>重置</button></view></form> </view>
</view>
<!-- 内容主题 -->
<view class="container"><!-- 头部 --><view class="header d-f w100p"><view class="left d-f">题目《 {{project.name}} 》<image class="icon" bindtap="getProject" src="../../imgs/icon_refresh.png" /></view><view class="right d-f" bindtap="diy">自己出题<image class="icon" src="../../imgs/icon_topic.png" /></view></view><!-- 绘图区域 --><view class="canvas"><canvas hidden='{{!alertShow}}' class="mycanvas bxz-bb w100p" canvas-id="canvas" bindtouchstart="canvasStart" bindtouchmove='canvasMove' bindtouchend='canvasEnd'></canvas></view><!-- 操作面板 --><view class="tool_bar d-f w100p bxz-bb"><!-- <view class="cancel"><image class="icon" src="../../imgs/icon_cancel.png" />上一步</view> --><!-- chengCancel 点击橡皮擦 --><view class="cancel" bindtap="chengCancel"><image class="icon" src="../../imgs/icon_eraser.png" />橡皮擦</view><view class="cancel" bindtap="clearCanvas"><image class="icon" src="../../imgs/icon_del.png" />清除</view></view><!-- 粗细和颜色 --><view class="set_bar bxz-bb w100p"><!-- 粗细 --><view class="linewidth_bar d-f"><text class="title">粗细</text><view class="right_demo d-f"><!-- 判断橡皮擦是否被选中 --><block wx:if="{{cancelChange}}"><view wx:for="{{linewidth}}" class="linewidth_demo bdrs50p {{index == currentLinewidth ?'active':''}}" bindtap="changeLineWidth" id="{{index}}" style="width:{{item*2}}rpx;height:{{item*2}}rpx;background:#fff"></view></block><block wx:else><view wx:for="{{linewidth}}" class="linewidth_demo bdrs50p {{index == currentLinewidth ?'active':''}}" bindtap="changeLineWidth" id="{{index}}" style="width:{{item*2}}rpx;height:{{item*2}}rpx;background:{{color[currentColor]}};"></view></block></view></view><!-- 颜色 --><view class="color_bar d-f"><text class="title">颜色</text><view class="right_demo d-f"><!-- wx:for 遍历颜色 --><!-- index 每一个颜色的编号 --><!-- 三元运算符 判断那个颜色是被选中的 --><block wx:if="{{cancelChange}}"><i class="iconfont icon-huabi" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i></block><block wx:else><i class="iconfont icon-huabi {{index == currentColor ?'active':''}}" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i></block></view></view></view><view class="btn"><button bindtap="fabu">发布作品</button></view>
</view>

2、WXSS 代码

@import 'iconfont.wxss';.container {padding: 0 24rpx;background: #eaeaea;
}
.bxz-bb { box-sizing: border-box; }
.d-f { display: flex; }
.d-b { display: block; }
.w100p { width: 96%;margin:0 auto }
.bdrs50p { border-radius: 50%; }
.container {display: flex;flex-direction: column;align-items: center;height: 100vh;padding: 0;box-sizing: border-box;
} .container > .header {justify-content: space-between;padding-top: 40rpx;padding-bottom: 32rpx;font-size: 30rpx;
}.container > .header .left {align-items: center;color: #e22;
}.container .left .icon {width: 44rpx;height: 44rpx;
}.container > .header .right {align-items: center;color: #333;
}.container .right .icon {width: 40rpx;height: 40rpx;padding-left: 18rpx;
}.mycanvas {height: 700rpx;margin-bottom: 22rpx;background: #fff;box-shadow: 0 0 10rpx #ccc;
}
.canvas{height: 700rpx;margin-bottom: 22rpx;width:100%;
}
.tool_bar {justify-content: space-between;padding: 0 12rpx;margin-bottom: 30rpx;font-size: 28rpx;
}.tool_bar .icon {width: 40rpx;height: 40rpx;padding-right: 8rpx;vertical-align: bottom;
}
.set_bar { padding: 0 64rpx; }
.set_bar .title {padding-right: 30rpx;
}
.set_bar .right_demo { align-items: center; }
.color_bar .right_demo {justify-content: space-between;flex: 1;
}
.linewidth_bar .linewidth_demo {border: 5rpx solid transparent;margin: 0 22rpx;
}
.linewidth_bar .linewidth_demo.active { border-color: #fff;box-shadow: 0rpx 0rpx 10rpx orange }
.icon-huabi { font-size: 44rpx; }
.icon-huabi.active { font-size: 64rpx; }
.btn{margin-top:20rpx;
}
.btn button{border:0rpx;border-radius: 10rpx;height:80rpx;line-height: 80rpx;background: orange;color:#fff;
}/* 弹出框 */
.alert{width:100%;height:100vh;background:rgba(0,0,0,0.3);position: fixed;left:0;top:100rpx;z-index:999;
}
.alert-main{width:95%;height:400rpx;position: absolute;left:0;top:20rpx;right:0;margin:auto;background:#fff;
}
.alert-main .qwe{display: flex;height:100rpx;margin:0 auto;margin-top:20rpx;line-height: 100rpx;width:96%;
}
.alert-main .tishi{
}
.alert-main .form-btn{
}
.alert-main input{width:500rpx;height:80rpx;background: #fff;margin: 10rpx 0;border:1px solid #7d7d7d;border-radius: 5rpx;
}
.alert-main button{width:200rpx;height:50rpx;text-align: center;line-height: 50rpx;margin-top:25rpx;margin-bottom:25rpx;
}

3、JS 代码

let app = getApp();
Page({/*** 页面的初始数据*/data: {// 弹框是否显示alertShow:true,// 初始化标题project: '太阳',// 绘图线的粗细linewidth: [2, 3, 4, 5,6,7,8,9],// 当前默认的粗细currentLinewidth: 0,// 绘图的颜色color: ['#da1c34', '#8a3022', '#ffc3b0', '#ffa300', '#66b502', '#148bfd', '#000', '#9700c2', '#8a8989'],// 当前默认的颜色currentColor: 0,// 橡皮擦是否被点击cancelChange:false,// 判断是否开始绘画isStart:false},// 点击自己出题diy:function(){this.setData({"alertShow":false});},// 点击弹框的灰色区域alertClick:function(){this.setData({"alertShow": true});},// 改变颜色的事件changeColor:function(e){// 获取点击画笔的编号let colorIndex = e.currentTarget.id;// 修改默认的颜色编号this.setData({cancelChange: false,currentColor: colorIndex});// 设置颜色this.mycanvas.setStrokeStyle(this.data.color[this.data.currentColor]);},// 改变线的粗细changeLineWidth:function(e){// 获取点击粗细的编号let widthIndex = e.currentTarget.id;// 修改当前的粗细this.setData({ currentLinewidth:widthIndex});// 设置粗细this.mycanvas.setLineWidth(this.data.linewidth[this.data.currentLinewidth]);},// 点击橡皮擦chengCancel:function(){// 设置橡皮擦被选中this.setData({cancelChange:true});// 画笔颜色设置成白色this.mycanvas.setStrokeStyle("#fff");},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取题目的},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/// 获取标题的函数onShow: function () {let data = this.data;// 创建画板this.mycanvas = wx.createCanvasContext("canvas");// 设置线的样式this.mycanvas.setLineCap("round");this.mycanvas.setLineJoin("round");// 初始化颜色this.mycanvas.setStrokeStyle(data.color[data.currentColor]);// 初始化粗细this.mycanvas.setLineWidth(data.linewidth[data.currentLinewidth]);},// 绘画开始canvasStart:function(e){// 获取触摸点的x，y位置let x = e.touches[0].x;let y = e.touches[0].y;// 将画笔移动到指定坐标this.mycanvas.moveTo(x,y);},// 绘画进行中canvasMove:function(e){// 获取移动过程中的x,y位置let x = e.touches[0].x;let y = e.touches[0].y;// 指定移动的位置this.mycanvas.lineTo(x,y);// 开始画线this.mycanvas.stroke();// 将绘画绘制到canvasthis.mycanvas.draw(true);// 绘制完成，将起始点进行移动this.mycanvas.moveTo(x,y);},// 绘画结束canvasEnd:function(){// 判断是否开始绘画this.setData({isStart:true});},// 清除画板clearCanvas:function(){// 清除区域this.mycanvas.clearRect(0,0,400,400);this.mycanvas.draw(true);},})

以上是本文全部内容，本文为小程序你猜我画部分功能，如需了解全部请留言。

了解更多，可以查看相关课程

微信小程序实现在线画板相关推荐

基于微信小程序的在线考试系统开题报告
本科生毕业论文基于微信小程序的在线考试系统开题报告学院: 专业: 计算机科学与技术年级: 学生姓名: 指导教师: XXXX大学本科生毕业论文(设计)开题报告书 ...
基于微信小程序的在线免费小说阅读系统
项目介绍: 本系统是我的毕业设计,大概耗时一个月完成,后台部分因为某些原因就不放出来了,前端没有用什么框架比较好理解,本着开源精神发布出来.希望能帮助需要的人吧. 一.简介本程序采用 ...
【毕业设计】基于微信小程序的在线学习平台在线学习微信小程序
如今的这个网络的时代,由于网络的不断发展,在线教育平台的兴起,大大改变了人们对于教育的重新认识,也改变了传统的教育方式,现在人们利用网络给人们带来更广阔的世界观,加大社会化的协同,知识也是越来越去中心 ...
（微信小程序毕业设计）基于微信小程序奶茶在线下单系统
基于微信小程序奶茶在线下单系统奶茶在线下单系统用户端是基于微信小程序端,管理员端是基于web端,基于java编程语言,mysql数据库,ssm框架,idea工具开发,用户微信端可以注册登陆小程序,查 ...
基于微信小程序的在线考试系统
基于微信小程序的在线考试系统
springboot基于微信小程序的在线办公系统
项目介绍基于springboot的在线办公小程序.它是在Windows下,以MYSQL为数据库开发平台,java技术和Tomcat网络信息服务作为应用服务器.在线办公小程序的功能已基本实现,主要包括 ...
微信小程序之在线任务发布与接单平台（图）
#end time:2017/06/18 系统主要功能界面运行情况及结果: 系统运行环境要求及操作说明: 工具:微信web开发者工具 / 申请微信小程序开发权限系统总结和体会: 经过这次的数据库实践 ...
让你的微信小程序具有在线支付功能
最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...
基于小程序云开发的智慧物业、智慧小区微信小程序，在线报修报检，重大事项投票，报名参加小区活动，小区公告通知，业委会公示、租售房屋
功能介绍完整代码下载地址:基于小程序云开发的智慧物业.智慧小区微信小程序当前小区的物业事务越来越多.越来越杂,而很多业主工作繁重,加班很晚,以往对于重大事项投票,报修报检,装修申请,搬家申请,投诉 ...
微信小程序 springboot在线考试系统Android hbuilderx App毕业设计
本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用Java+VUE 微信小程序--前台涉及技术:WXML 和 WXSS.JavaScript.uniapp Java ...

微信小程序实现在线画板

微信小程序实现在线画板相关推荐

最新文章

热门文章