微信小程序|Canvas实现绘画直线

问题描述

小程序中，我们如果想实现一个绘画功能，就要先从认识canvas这个组件开始。那么先从一个简单的绘画直线功能开始介绍画布功能吧。

效果图：

解决方案

认识Canvas

canvas-id	String		canvas组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: ‘something wrong’}

1.wxml

wxml中我们要写入canvas这个标签，后面的操作实现都是在这个标签内部实现。配置手指触摸事件属性：bindtouchstart开始，bindtouchend结束，binderror错误。

<canvas  canvas-id="myCanvas" bindtouchstart='EventHandleStart'  bindtouchend='EventHandle' binderror="canvasIdErrorCallback" />

2.wxss

wxss中为了让绘画的面板在一个区域内，所以要进行一个边框的配置。

.myCanvas{

  border:  1px solid;

  margin: 0  auto;

}

3.js

首先用

wx.createCanvasContext(string canvasId, Object this) 来创建 canvas 绘图的上下文对象。参数string canvasId获取上下文的 canvas-id 属性。然后根据上面表格中手指触摸事件属性对应的不同类型分别进行配置。

代码如下：

var my_carvas,strat_x,strat_y,end_x,end_y;

Page({

  data: {},

  onLoad:  function () {},

   onReady:function(){

     my_carvas = wx.createCanvasContext('myCanvas', this)

  },

  // 手指触摸事件

   EventHandleStart:function(e){

     console.log(e)

    strat_x  = e.touches[0].x; // 手指开始触摸时的x轴 x轴--->相对于画布左边的距离

    strat_y  = e.touches[0].y;// 手指开始触摸时的y轴 y轴--->相对于画布顶部的距离

  },

  //手指触摸结束时的事件

   EventHandle: function (e) {

     console.log(e)

    end_x =  e.changedTouches[0].x; // 手指结束触摸时的x轴 x轴--->相对于画布左边的距离

    end_y =  e.changedTouches[0].y;// 手指结束触摸时的y轴 y轴--->相对于画布顶部的距离

     my_carvas.beginPath(); //创建一条路径   

     my_carvas.setStrokeStyle('red');   //设置边框为红色

     my_carvas.moveTo(strat_x,strat_y) //描述路径的起点为手指触摸的x轴和y轴

     my_carvas.lineTo(end_x,end_y) //绘制一条直线，终点坐标为手指触摸结束后的x轴和y轴

     my_carvas.stroke() //画出当前路径的边框

     my_carvas.draw() //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

  }

 

})

结语

canvas组件可实现功能当然不仅是绘画一条直线这么简单，既然可以实现绘画功能，那么如果是一个画板，并且可以进行任意绘画操作，这个功能要如何实现呢？下一篇博客内容，将会详细介绍。

END