探究 canvas 绘图中撤销(undo)功能的实现方式详解


Posted in HTML / CSS onMay 17, 2018

最近在做网页版图片处理相关的项目,也算是初入了 canvas 的坑。项目需求中有一个给图片添加水印的功能。我们知道,在浏览器端实现图片添加水印功能,通常的做法就是使用 canvasdrawImage 方法。对于普通的合成(比如一张底图和一张 PNG 水印图片合成)来说,其大致实现原理如下:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

// img: 底图
// watermarkImg: 水印图片
// x, y 是画布上放置 img 的坐标
ctx.drawImage(img, x, y);
ctx.drawImage(watermarkImg, x, y);

直接连续使用 drawImage() 把对应的图片绘制到 canvas 画布上就行。

以上就是背景介绍。但是略麻烦的是添加水印的需求中还有一个需要实现的功能是用户能够切换水印的位置。我们自然会想到能否实现 canvasundo 功能,当用户切换水印位置时,先撤销上一步 drawImage 操作,然后再重新绘制水印图片位置。

restore / save ?

效率最高也是最方便的肯定是查阅 canvas 2D 原生 API 是否有此功能。经过一番搜索, restore / save 这一对 API 进入视线。我们先看一下这两个 API 的描述:

CanvasRenderingContext2D.restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态,将 canvas 恢复到最近的保存状态的方法。 如果没有保存状态,此方法不做任何改变。

CanvasRenderingContext2D.save() 是 Canvas 2D API 通过将当前状态放入栈中,保存 canvas 全部状态的方法。

乍看起来可以满足需求。我们看一下官方示例代码:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.save(); // 保存默认的状态
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

ctx.restore(); // 还原到上次保存的默认状态
ctx.fillRect(150, 75, 100, 100);

结果如下图所示:

探究 canvas 绘图中撤销(undo)功能的实现方式详解

奇怪,好像和我们预期的结果不太一致。我们想要的结果是 save 方法调用后能够保存当前画布的快照, resolve 方法调用后能够完全回到上一个保存的快照处的状态。

再仔细研究一下 API。原来我们遗漏一个重要概念: drawing state ,也就是绘制状态。保存到栈中的绘制状态包含以下几个部分:

  1. 当前的变换矩阵
  2. 当前的剪切区域
  3. 当前的虚线列表

以下属性当前的值:strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

好吧, drawImage 操作后对画布的改变根本不存在于绘制状态中。所以,使用 resolve / save 无法实现我们需要的 undo 功能。

模拟栈实现

既然原生的 API 保存绘制状态的栈无法满足需求,那么自然我们会想到自己模拟一个保存操作的栈。随之而来的问题就是:每次绘制操作之后,应该保存什么数据进栈?前面说过,我们想要的是每步绘制操作之后能够保存当前画布的 快照 ,如果能拿到快照数据,同时能利用快照数据恢复画布的话,问题也就迎刃而解了。

幸运的是 canvas 2D 原生提供了获取快照和通过快照恢复画布的 API —— getImageData / putImageData 。以下是 API 说明:

/*
 * @param { Number } sx 将要被提取的图像数据矩形区域的左上角 x 坐标
 * @param { Number } sy 将要被提取的图像数据矩形区域的左上角 y 坐标
 * @param { Number } sw 将要被提取的图像数据矩形区域的宽度
 * @param { Number } sh 将要被提取的图像数据矩形区域的高度
 * @return { Object } ImageData 包含 canvas 给定的矩形图像数据
 */
 ImageData ctx.getImageData(sx, sy, sw, sh);
 
 /*
 * @param { Object } imagedata 包含像素值的对象
 * @param { Number } dx 源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)
 * @param { Number } dy 源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)
 */
 void ctx.putImageData(imagedata, dx, dy);

我们来看一个简单的应用方式:

class WrappedCanvas {
    constructor (canvas) {
        this.ctx = canvas.getContext('2d');
        this.width = this.ctx.canvas.width;
        this.height = this.ctx.canvas.height;
        this.imgStack = [];
    }
    drawImage (...params) {
        const imgData = this.ctx.getImageData(0, 0, this.width, this.height);
        this.imgStack.push(imgData);
		this.ctx.drawImage(...params);
    }
    undo () {
        if (this.imgStack.length > 0) {
            const imgData = this.imgStack.pop();
            this.ctx.putImageData(imgData, 0, 0);
        }
    }
}

我们封装了一下 canvasdrawImage 方法,每次调用该方法之前都会保存上一个状态的快照到模拟的栈中。在执行 undo 操作时,从栈中取出最新保存的快照,然后重新绘制画布,即可实现撤销操作。实际测试也符合预期。

性能优化

上一节中我们很粗犷地实现了 canvas 的撤销功能。为什么说粗犷呢?一个很显而易见的原因就是此方案性能不好。我们的方案相当于每次都是重新绘制整个画布。假设操作步骤很多,我们在模拟栈也就是内存中就会保存很多预存的图片数据。此外,在绘制图片过于复杂时, getImageDataputImageData 这两个方法会产生比较严重的性能问题。stackoverflow 上有详细的讨论: Why is putImageData so slow? 。我们还可以从 jsperf 上这个测试用例的数据来验证这一点。淘宝 FED 在Canvas 最佳实践中也提到了尽量“不在动画中使用 putImageData 方法”。另外,文章里还提到一点,“尽可能调用那些渲染开销较低的 API”。我们可以从这里入手思考如何进行优化。

之前说过,我们通过对整个画布保存快照的方式来记录每个操作,换个角度思考,如果我们把每次绘制的动作保存到一个数组中,在每次执行撤销操作时,首先清空画布,然后重绘这个绘图动作数组,也可以实现撤销操作的功能。可行性方面,首先这样可以减少保存到内存的数据量,其次还避免了使用渲染开销较高的 putImageData 。以 drawImage 为比较对象,看 jsperf 上这个测试用例,二者的性能存在数量级的差距。

探究 canvas 绘图中撤销(undo)功能的实现方式详解

因此,我们认为此优化方案是可行的。

改进后的应用方式大致如下:

class WrappedCanvas {
    constructor (canvas) {
        this.ctx = canvas.getContext('2d');
        this.width = this.ctx.canvas.width;
        this.height = this.ctx.canvas.height;
        this.executionArray = [];
    }
    drawImage (...params) {
        this.executionArray.push({
            method: 'drawImage',
            params: params
        });
		this.ctx.drawImage(...params);
    }
    clearCanvas () {
        this.ctx.clearRect(0, 0, this.width, this.height);
    }
    undo () {
        if (this.executionArray.length > 0) {
            // 清空画布
            this.clearCanvas();
            // 删除当前操作
            this.executionArray.pop();
            // 逐个执行绘图动作进行重绘
            for (let exe of this.executionArray) {
                this[exe.method](...exe.params)
            }
        }
    }
}

新人入坑 canvas,如有错误与不足,欢迎指出。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 #HTML / CSS
HTML5 device access 设备访问详解
May 24 #HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 #HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 #HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 #HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 #HTML / CSS
使用Canvas操作像素的方法
Jun 14 #HTML / CSS
You might like
编写自己的php扩展函数
2006/10/09 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
python mysqldb连接数据库
2009/03/16 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python入门教程之运算符与控制流
2016/08/17 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
python re模块常见用法例举
2021/03/01 Python
YII2 全局异常处理深入讲解
2021/03/24 PHP
年终自我鉴定
2013/10/09 职场文书
给导游的表扬信
2014/01/10 职场文书
领导工作表现评语
2015/01/04 职场文书
支教个人总结
2015/03/04 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
delete in子查询不走索引问题分析
2022/07/07 MySQL