前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序|简单易上手的画板功能

微信小程序|简单易上手的画板功能

作者头像
算法与编程之美
发布2020-04-15 15:59:13
1.9K0
发布2020-04-15 15:59:13
举报
文章被收录于专栏:算法与编程之美

问题描述

大部分安卓用户的手机里是没有自带画板功能的,而在近期网课盛行之时,一个随手可用的手写面板,无论是在写笔记方面,还是在辅助授课方面,一个小画板就体现出了很大的作用。那么这个功能应该如何来实现呢?

效果图:

图2.1 画板效果图

解决方案

1.了解canvas组件

小程序中画板功能可以通过canvas画布组件来实现,了解canvas组件的基本属性是实现画板功能的基础。

表1 canvas属性:

disable-scroll

当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新

bindtouchstart

手指触摸动作开始

bindtouchmove

手指触摸后移动

bindtouchend

手指触摸动作结束

bindtouchcancel

手指触摸动作被打断

binderror

当发生错误时触发 error 事件,detail = {errMsg}

2. 相关api

首先,初始化一个函数initCanvas: function (){},在里面创建一个 CanvasContext获取绘图上下文;然后创建绘画事件开始、移动和结束(canvasStart、canvasMove、canvasEnd)的三个函数,并在其中配置动作坐标;绘制完成之后,如果需要清除画布,则创建一个cleardraw: function (){}函数,在里面重置坐标的高和宽。

3代码示例

表3.1 wxml代码示例:

代码语言:javascript
复制

<view>

   <view>画板</view>

   <canvas style="width: {{canvasw}}px; height: {{canvash}}px" id="canvas" canvas-id="canvas"  disable-scroll="true" bindtouchstart="canvasStart"  bindtouchmove="canvasMove" bindtouchend="canvasEnd"  touchcancel="canvasEnd"  binderror="canvasIdErrorCallback"></canvas>

   <view class='btns canvaspd'>

     <button bindtap="cleardraw">清除画板</button>

     <button bindtap="setSign">确定</button>

   </view>

    <image src='{{canvasimgsrc}}'></image>

</view>

表3.2 js部分代码示例:

代码语言:javascript
复制
Page({

   data: {

     canvasw: 0,

     canvash: 0,

   //初始化函数

   initCanvas: function () {

     context = wx.createCanvasContext('canvas');

     context.beginPath()

     context.setStrokeStyle('#000000');

     context.setLineWidth(4);

     context.setLineCap('round');

     context.setLineJoin('round');

   },

 canvasStart: function (event) {

     isButtonDown = true;

     arrz.push(0);

     arrx.push(event.changedTouches[0].x);

     arry.push(event.changedTouches[0].y);

   },

   canvasMove: function (event) {

     if (isButtonDown) {

       arrz.push(1);

       arrx.push(event.changedTouches[0].x);

       arry.push(event.changedTouches[0].y);

     };

     context.clearRect(0, 0, canvasw, canvash);

 

     context.setStrokeStyle('#000000');

     context.setLineWidth(4);

     context.setLineCap('round');

     context.setLineJoin('round');

     context.stroke();

     context.draw(false);

   },

   canvasEnd: function (event) {

     isButtonDown = false;

   },

   //清除画布

   cleardraw: function () {

     arrx = [];

     arry = [];

     arrz = [];

     context.clearRect(0, 0, canvasw, canvash);

     context.draw(true);

   },

   onLoad: function (options) {

     //画布初始化执行

     this.startCanvas();

  }

})

结语

此次的画板实现只是一个简单的手写面板的功能,但是canvas的相关api非常多,能够实现的功能不局限于此,比如形状、填充、渐变、文字样式等非常多样,后续将会有更多功能实现的介绍。

END

编 辑 | 王楠岚

责 编 | 吴怡辰

where2go 团队

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档