微信上如何做网站,wordpress缓存单个页面,要建一个优惠卷网站怎么做,制作图简介
标注平台很关键的一点#xff0c;对于整个图片为底图的画布#xff0c;需要支持缩放、拖拽#xff0c;并且无论画布位置在哪里#xff0c;大小如何#xff0c;所有绘制的点、线、面的坐标都是相对于图片左上角的#xff0c;并且#xff0c;拖拽、缩放#xff0c;…
简介
标注平台很关键的一点对于整个图片为底图的画布需要支持缩放、拖拽并且无论画布位置在哪里大小如何所有绘制的点、线、面的坐标都是相对于图片左上角的并且拖拽、缩放点、线、面的坐标不改变。
要实现这一点其实就是理解这个画布的坐标系以及变换矩阵。
画布
fabric.js的底层是canvas绘图。canvas作为画布要支持拖拽、缩放就需要有个容器监听鼠标事件。如果我们直接对canvas dom进行拖拽、缩放有两个缺陷1是后续只能在最新的canvas范围内进行缩放、拖拽不易点击2是dom大小和位置变更会不断触发浏览器的重绘性能开销较大容易卡顿。
为了解决上述问题我提供以下解决方案
以一个固定位置的canvas作为画布拖拽、缩放只改变canvas的变形矩阵即可transform(a, b, c, d, e, f)。 a水平方向的缩放b竖直方向的倾斜偏移c水平方向的倾斜偏移d竖直方向的缩放e水平方向的移动f竖直方向的移动
因此我们的平移可以通过设置e和f缩放可以通过设置a和d。
在fabric.js中可以通过viewportTransform属性获取这六个参数。然后再通过setViewportTransform方法设置这六个参数。
居中
画布居中是标注平台必须的功能因为你拖拽缩放后图像可能偏离视图范围很多需要快速复原。居中的功能说起来简单但是实现还是有一些困难。其原理如下图所示。 首先获取要标注的图片宽100高80设置canvas的背景图片。
const canvas new fabric.Canvas(domId, {width: 100,height: 80
});
canvas.setBackgroundImage(图片链接);
其次初始化canvas的为父容器的宽高100x60初始化变换矩阵[1,0,0,1,0,0]即平移0缩放1不缩放。
canvas.setDimensions({ width: 100, height: 60 });
canvas.setViewportTransform([1,0,0,1,0,0]);
再次根据canvas父容器的宽高100x60按图像能全展示的比例对canvas视图范围进行等比缩放0.75得到新的宽高75x60。即a0.75d0.75。
canvas.setCanvasZoom(0.75);
最后将canvas视图范围往右平移15即e15f0。
canvas.setViewportTransform[0.75,0,0,0.75,15,0]
这样我们的canvas始终是父容器的范围而viewport范围已经居中。
注意变换矩阵设置后还需要执行渲染重置方法这个是fabric的底层逻辑漏洞如果不重置画布上的点线面的位置会偏移。
canvas.renderAndReset();
平移
首先我们需要监听canvas的mousedown、mousemove、mouseup。
mousedown的回调函数我们设置全局变量active为true用于mousemove判断是否需要执行平移并记录lastX e.pageX和lastY e.pageY。
mousemove的回调函数如果active为true我们根据e.pageX - lastX和e.pageY - lastY确定横向和纵向的平移量再通过对transform的e和f进行叠加这个平移量实现平移功能。
mouseup的回调函数设置acitve为false。
缩放
监听canvas的wheel鼠标滚轮事件。
wheel的回调函数如果e.deltaY 0则表示缩小否则表示放大。缩小我们对当前的缩放比例统一进行 -0.1放大统一 0.1。如果你想更人性化可以对缩放比例做非线性的变化。
注意点
canvas的缩放是基于canvas左上角的原点并非基于平移后的点为原点。因此需要先将canvas的平移参数置为0后再设置缩放比例。
另外我们的缩放是基于鼠标当前位置为原点进行缩放。如图红色点处(x, y)进行缩放视图从v1变到v2我们已知两个视图对应的缩放比例z1和z2要求deltaX和deltaY根据相似定理得
deltaX (x - left) * (1 - z2 / z1)
deltaY (y - top) * (1 - z2 / z1)
newLeft deltaX left
newTop deltaY top 因此我们在上一步设置好缩放比例后执行平移操作enewLeftfnewTop从而将视图从黑色框缩放至蓝色框。
预告
下一章 聊聊fabric的几何定制化渲染。
