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

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

问题描述

小程序中，我们如果想实现一个绘画功能，就要先从认识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错误。

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

实习主编 | 王楠岚

责编 | 吴怡辰

能力越强，责任越大。实事求是，严谨细致。

——where2go 团队

微信号：算法与编程之美

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

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！