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;