微信小程序canvas组件简单运用之涂鸦



源码
  • index.html

  • <view class="container">
  •     <!--画布区域-->
  •     <view class="canvas_area">
  •         <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作-->
  •         <canvas canvas-id="myCanvas" class="myCanvas"
  •             disable-scroll="false"
  •             bindtouchstart="touchStart"
  •             bindtouchmove="touchMove"
  •             bindtouchend="touchEnd">
  •         </canvas>
  •     </view>
  •     <!--画布工具区域-->
  •     <view class="canvas_tools">
  •         <view class="box box1" bindtap="penSelect" data-param="5"></view>
  •         <view class="box box2" bindtap="penSelect" data-param="15"></view>
  •         <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
  •         <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
  •         <view class="box box5" bindtap="clearCanvas"></view>
  •     </view>
  • </view>

  • 手指滑动代码

  • //手指触摸动作开始
  •   touchStart: function (e) {
  •       //得到触摸点的坐标
  •       this.startX = e.changedTouches[0].x
  •       this.startY = e.changedTouches[0].y
  •       this.context = wx.createContext()

  •       if(this.isClear){ //判断是否启用的橡皮擦功能  ture表示清除  false表示画画
  •          this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色  橡皮擦原理就是:利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果
  •          this.context.setLineCap('round') //设置线条端点的样式
  •          this.context.setLineJoin('round') //设置两线相交处的样式
  •          this.context.setLineWidth(20) //设置线条宽度
  •          this.context.save();  //保存当前坐标轴的缩放、旋转、平移信息
  •          this.context.beginPath() //开始一个路径
  •          this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true);  //添加一个弧形路径到当前路径,顺时针绘制  这里总共画了360度  也就是一个圆形
  •          this.context.fill();  //对当前路径进行填充
  •          this.context.restore();  //恢复之前保存过的坐标轴的缩放、旋转、平移信息
  •       }else{
  •          this.context.setStrokeStyle(this.data.color)
  •          this.context.setLineWidth(this.data.pen)
  •          this.context.setLineCap('round') // 让线条圆润
  •          this.context.beginPath()

  •       }
  •   },
  •   //手指触摸后移动
  •   touchMove: function (e) {

  •       var startX1 = e.changedTouches[0].x
  •       var startY1 = e.changedTouches[0].y

  •       if(this.isClear){ //判断是否启用的橡皮擦功能  ture表示清除  false表示画画

  •         this.context.save();  //保存当前坐标轴的缩放、旋转、平移信息
  •         this.context.moveTo(this.startX,this.startY);  //把路径移动到画布中的指定点,但不创建线条
  •         this.context.lineTo(startX1,startY1);  //添加一个新点,然后在画布中创建从该点到最后指定点的线条
  •         this.context.stroke();  //对当前路径进行描边
  •         this.context.restore()  //恢复之前保存过的坐标轴的缩放、旋转、平移信息

  •         this.startX = startX1;
  •         this.startY = startY1;

  •       }else{
  •         this.context.moveTo(this.startX, this.startY)
  •         this.context.lineTo(startX1, startY1)
  •         this.context.stroke()

  •         this.startX = startX1;
  •         this.startY = startY1;

  •       }
  •       //只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>
  •       wx.drawCanvas({
  •          canvasId: 'myCanvas',
  •          reserve: true,
  •          actions: this.context.getActions() // 获取绘图动作数组
  •       })
  •   }

以上是一部分代码展示,下面做核心原理说明:
1、能画出不同颜色的线条 主要是以下三个方法 setStrokeStyle(画笔的颜色) moveTo(把路径移动到画布中的指定点,但不创建线条) lineTo(添加一个新点,然后在画布中创建从该点到最后指定点的线条) 这样就可以从A点坐标到B点坐标  画出不同颜色的线条啦!!!

2、橡皮擦的原理:之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色 这样就可以”欺骗”自己的眼睛  达到橡皮擦的效果啦!!!


源码链接请戳:http://bbs.jointforce.com/topic/24201

已标记关键词 清除标记
# 微信程序 ## canvasToTempFilePath问题 程序描述:用户可在画布上自由绘制黑色笔迹,点击确定后用canvasToTempFilePath保存! 问题描述:在开发工具上可以正常运行,墨迹保存完好,当使用真机调试或体验版本中没有墨迹,只是一张透明图。 ``` // 画布的触摸移动开始手势响应 start: function (event) { // console.log("触摸开始" + event.changedTouches[0].x) // console.log("触摸开始" + event.changedTouches[0].y) //获取触摸开始的 x,y let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y } touchs.push(point) }, // 画布的触摸移动手势响应 move: function (e) { let point = { x: e.touches[0].x, y: e.touches[0].y } touchs.push(point) if (touchs.length >= 2) { this.draw(touchs) } is_touch = false; }, // 画布的触摸移动结束手势响应 end: function (e) { console.log("触摸结束" + e) //清空轨迹数组 for (let i = 0; i < touchs.length; i++) { touchs.pop() } is_touch = true; can_pass = true }, // 画布的触摸取消响应 cancel: function (e) { console.log("触摸取消" + e) }, // 画布的长按手势响应 tap: function (e) { console.log("长按手势" + e) }, error: function (e) { console.log("画布触摸错误" + e) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //获得Canvas的上下文 content = wx.createCanvasContext('firstCanvas') //设置线的颜色 content.setStrokeStyle("#000") //设置线的宽度 content.setLineWidth(15) //设置线两端端点样式更加圆润 content.setLineCap('round') //设置两条线连接处更加圆润 content.setLineJoin('round') var r = Math.floor(Math.random()*9) var a = r+1 this.setData({ random:a, randoms: a, //signImage:"https://mhes.sxu.net.cn/Files/20190522/20190522163655299684.jpg" }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, //绘制 draw: function (touchs) { let point1 = touchs[0] let point2 = touchs[1] touchs.shift() content.moveTo(point1.x, point1.y) content.lineTo(point2.x, point2.y) content.stroke() content.draw(true) }, //清除操作 clearClick: function () { //清除画布 content.clearRect(0, 0, canvasw, canvash) // content.clearRect(0, 0, 500, 500) content.draw(true) is_touch = false can_pass = false }, //保存图片 saveClick: function () { is_touch = true if(can_pass == false) { wx.showModal({ title: 'MHE', content: '请完成绘制', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') is_touch = false } } }) return } var that = this that.setData({ random: "-", }) can_pass = false var that = this wx.canvasToTempFilePath({ x:0, y:0, width: canvasw, height: canvash, destWidth: canvasw, destHeight: canvash, fileType: 'png', canvasId: 'firstCanvas', quality : 0.5, success: function (res) { console.log(res.tempFilePath) that.setData({ signImage: res.tempFilePath }) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(result) { console.log(result) } }) wx.uploadFile({ url: '。。。。。。。。。。。。。', filePath: res.tempFilePath, name: 'uploadFile', success: function(res) { var datas = JSON.parse(res.data) console.log(datas) if(datas.rlt == 0){ console.log(that.data.randoms) wx.request({ url: app.weburl, data: { 。。。 }, header: {}, method: 'GET', dataType: 'json', responseType: 'text', success: function(res) { 。。。 }, fail: function(res) {}, complete: function(res) { console.log(that.data.num) }, }) } }, fail: function(res) {}, complete: function(res) {}, }) }, fail: function (res) { console.log(res) }, }) content.clearRect(0, 0, canvasw, canvash) content.draw(true) } ```
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页