开发Canvas 绘画应用(一):搭好框架 中我们已经把基本框架及基础功能实现了,现在要实现本应用的重点:绘画功能。

首先分析一下,我们要实现绘画,需要具备的理论知识如下:

(1)获取触摸点的坐标

类似于获取鼠标在屏幕上的位置,我们现在需要获取手指在绘图板上的位置,这就需要用到触摸事件的跟踪触摸的属性:

  • touches:表示当前跟踪的触摸操作的 Touch 对象的数组。
  • targetTouches:特定于事件目标的 Touch 对象的数组。
  • changedTouches:表示自上次触摸以来发生了什么改变的 Touch 对象的数组。

其中,每个 Touch 对象包含下列属性:

  • clientX:触摸目标在视口中的 x 坐标。
  • clientY:触摸目标在视口中的 y 坐标。
  • identifier:标识触摸的唯一 ID。
  • pageX:触摸目标在页面中的 x 坐标。
  • pageY:触摸目标在页面中的 y 坐标。
  • screenX:触摸目标在屏幕中的 x 坐标。
  • screenY:触摸目标在屏幕中的 y 坐标。
  • target:触摸的 DOM 节点目标。

(2)Canvas 绘制路径的方法

  • beginPath():绘制路径前必须调用,表示要开始绘制新路径。
  • lineTo(x,y):从上一点开始绘制一条直线。
  • moveTo(x,y):从绘图游标开始移动到(x,y),不画线。
  • closePath():创建路径之后,绘制一条连接到起点的线条。
  • fill():对路径进行填充。
  • stroke():对路径进行描边。
  • clip():在路径上创建一个剪切区域。

绘画实现

OK,理论知识已经具备了,接下去就要开始搬砖了。

① 初始化数据

initData() {
this.lastX = 0;
this.lastY = 0;
this.isPaint = false; return this;
}

② 实现绘画函数

/**
* 绘画函数
* @param {[type]} x 触摸点x坐标
* @param {[type]} y 触摸点y坐标
* @return {[type]} 将当前坐标赋给上一个点坐标
*/
draw(x, y) {
if (this.isPaint) {
this.ctx.beginPath(); // 开始绘制路径,必须调用
this.ctx.moveTo(this.lastX, this.lastY); // 将绘图游标移动到到上一点
this.ctx.lineTo(x, y); // 从上一点开始绘制一条到(x,y)的直线
this.ctx.stroke(); // 描边路径
} // 上面必须判断 this.isPaint
// 当 'touchstart' 时,先移动到触摸点
this.lastX = x;
this.lastY = y;
}

③ 完善事件处理函数(★重点)

// 触摸事件处理函数
touchF(e) {
e.preventDefault(); // 阻止浏览器默认行为
const touches = e.changedTouches; // 获取 Touch 对象list
const point = touches[0]; // 获取第一个 Touch 对象 // 获取元素宽、高及距窗口上下左右距离
const rect = this.cva.getBoundingClientRect();
// 相当于const rect = $('.painter').offset();
// 相当于const rect = { left: this.cva.offsetLeft, top: this.cva.offsetTop } switch (e.type) {
case 'touchstart': // 获取触摸点的x,y坐标,传入draw函数
this.draw(point.clientX - rect.left, point.clientY - rect.top);
this.isPaint = true; break;
case 'touchmove':
this.draw(point.clientX - rect.left, point.clientY - rect.top); break;
case 'touchend':
this.isPaint = false; break;
default:
this.isPaint = false; break;
}
}

(1) this.cva.getBoundingClientRect():返回一个对象,包含元素的宽、高及距窗口上下左右距离;

console.log(this.cva.getBoundingClientRect());

开发Canvas 绘画应用(二):实现绘画-LMLPHP

(2) 采用 jQuery 方法 $('.painter').offset():同样返回一个对象,但只包含left值和top值;

console.log($('.painter').offset());

开发Canvas 绘画应用(二):实现绘画-LMLPHP

(3) 采用js原生方法获取坐标

console.log(this.cva.offsetWidth);  // 800
console.log(this.cva.offsetHeight); // 600
console.log(this.cva.offsetLeft); // 90
console.log(this.cva.offsetTop); // 137

大功告成!至此,已经可以在我们的画布上进行类似于铅笔的绘画了~~当然,这是绘图板最最基本的功能,接下去要实现更多的功能,还会用到更多的 Canvas API,需要进行迭代开发啦,有木有很兴奋,嘿嘿;-)

开发Canvas 绘画应用(二):实现绘画-LMLPHP

要知下回如何,请继续阅读 开发Canvas绘画应用(三)-对照绘画

✈ Github:paintApp

✎ 参考:

HTML5实例教程——创意画板

使用html5 canvas制作涂鸦画板

JS | 移动端“刮刮卡式”蒙层画板 Canvas

05-08 08:28