• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

问题描述

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

效果图:

2.1 画板效果图

解决方案

1.了解canvas组件

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

1 canvas属性:

disable-scroll

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

bindtouchstart

手指触摸动作开始

bindtouchmove

手指触摸后移动

bindtouchend

手指触摸动作结束

bindtouchcancel

手指触摸动作被打断

binderror

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

2. 相关api

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

3代码示例

3.1 wxml代码示例:

<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部分代码示例:

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 团队


   

微信号:算法与编程之美          

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

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序发布时间:2022-07-18
下一篇:
关于小程序授权不了问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap