Fabric.js创建eyeDropper

时间:2018-06-23 10:07:49

标签: fabricjs

eyeDropper有点卡住,这是我正在使用fabricjs ZOOM功能和区域移动的主要问题。通过100%缩放,此代码可以正常工作:

ctx.getImageData(x,y,1,1)

但是使用缩放时,我必须将xy值与当前缩放值x*canvas.getZoom()相乘,并且还必须将其乘以fabric.devicePixelRatio,因为我的屏幕为“视网膜”(4k)。除非我移动工作区域canvas.viewportTransform[5] += 100;,否则所有这些操作都很好,所以我尝试对其进行补偿,但是失败了... 整个代码:

(pointer.x+canvas.viewportTransform[4])* fabric.devicePixelRatio*canvas.getZoom()

整个示例在这里: https://jsfiddle.net/2gbrcty4/72/

注意:移动画布-鼠标滚轮或触摸板,放大/缩小Ctrl +鼠标滚轮 注意2:如果您要重置区域偏移,eyeDropper会正常工作:

canvas.viewportTransform[4] = 0;
canvas.viewportTransform[5] = 0;

0 个答案:

没有答案