专栏首页算法与编程之美微信小程序|简单易上手的画板功能

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

问题描述

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

效果图:

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

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

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页|HTML5 也可以画一画(canvas)

    在日常生活中总喜欢涂涂画画写写,这样可以使表达更加直观,记录的也更加详细,而在HTML5中同样可以画一画。canvas意为画布,现实生活中用它来作画,在HTML...

    算法与编程之美
  • 微信小程序|实现简单动态画布

    大家都玩过游戏,有没有想过游戏中的人物是怎么动起来的?人物是由很多的图形构成的,我们需要画出这些图形然后再赋予时间,就可以让他动起来。那么如何在小程序上让简单的...

    算法与编程之美
  • 网页|如何制作一个HTML网页

    HTML(Hypertext MarkupLanguage)也叫作超文本标记语言,是一种用来结构化 Web 网页及其内容的标记语言,标准通用标记语言下的一个应用...

    算法与编程之美
  • RabbitMQ 开发环境安装部署

    Fedora 和 RHEL库里面的RabbitQM已经不维护了,推荐选择Bintray。

    _淡定_
  • swagger api文档添加jwt授权配置

     最近写的swagger文档,要加jwt授权,所以几经google终于搞定了,简简单单几行配置如下: securityDefinitions: APIKey...

    用户1141560
  • [PHP] 通用网关接口CGI 的运行原理

    CGI 的运行原理: 1.客户端访问某个 URL 地址之后,通过 GET/POST/PUT 等方式提交数据,并通过 HTTP 协议向 Web 服务器发出请求。 ...

    陶士涵
  • 如何用Python做舆情时间序列可视化?

    如何批量处理评论信息情感分析,并且在时间轴上可视化呈现?舆情分析并不难,让我们用Python来实现它吧。

    王树义
  • 你真的了解Activity的启动模式吗?

    当面试官说请你介绍一下activity启动模式,大多数人都能整两句,什么栈顶复用啊栈内复用啊,不过,你确定你真的懂启动模式吗?

    用户1269200
  • Android手势研究(textview及listview对比验证)

    手势即手触摸屏幕做出动作。 View可以通过onTouchEvent收到触摸屏幕事件, 我们可以通过View.setOnTouchListener()设...

    非著名程序员
  • 用openssl库RSA加密解密

    1 #include <stdio.h> 2 #include <openssl/rsa.h> 3 #include <openssl/pem.h> 4...

    窗户

扫码关注云+社区

领取腾讯云代金券