vue绘制-VUE开发--二维绘图(四十)

图片涂鸦、绘制、标注

在线预览

1.画笔颜色 ????

2.画笔粗细 ✏️

3.画布放大 ????

4.画布缩小 ????

5.清除画布 ????

6.保存图片 ????

7.回退一步 ↩️

8.前进一步 ↪️

1.画笔 ✏️

2.直线 ????

3.圆形 ⚪️

4.矩形 ????

5.橡皮 ????

6.文字 ????

创建三个不同作用的画布

鼠标按下判断工具类型,记录初始位置

若是输入文字则定位输入框到画布中,失焦或回车文字绘制到画布中

鼠标移动,根据工具类型绘制不同路径

若工具类型是橡皮,则从 canvas_base 中获取底图像素放回 canvas_front 中

鼠标抬起,从绘制画布 canvas_front 生成绘制图并绘制到 canvas_back 中,然后再重绘 canvas_front

最终保存图片

图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域。这里为了交互体验,使用了elementui的弹窗方式。鼠标左键拖动添加矩形框标记区域,鼠标点击已绘制的矩形;选中矩形,并绘制不同选中效果。

ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

文档地址:

初始化 ZRender

在使用 ZRender 前需要初始化实例,具体方式是传入一个 DOM 容器:

创建出的这个实例对应文档中 zrender 实例部分的方法和属性。

在场景中添加元素

ZRender 提供了将近 20 种图形类型,可以在文档 下找到。如果想创建其他图形,也可以通过 进行扩展。

以创建一个圆为例:

创建了一个圆心在 [150, 50] 位置,半径为 40 像素的圆,并将其添加到画布中。

通过 a = new 方法创建了图形元素之后,可以用 a.shape 等形式获取到创建时输入的属性,但是如果需要对其进行修改,应该使用 a.attr(key, value) 的形式修改,否则不会触发图形的重绘。例子: