Fabric JS getContext（'2d'）与getImageData颜色不匹配

Question

网址：http://minimedit.com/

目前正在实施滴管。它在我正常的 1080p 分辨率下工作正常，但在更高或更低的分辨率上测试时它不起作用。

这是代码的基础：

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

canvas.on('mouse:down', function(e) {
    var newColor = dropColor(e, ctx);
}

function dropColor(e, ctx) {
    var mouse = canvas.getPointer(e.e),
        x = parseInt(mouse.x),
        y = parseInt(mouse.y),
        px = ctx.getImageData(x, y, 1, 1).data;
        return rgb2hex('rgba('+px+')');
}

当我第一次启动画布时，我会调整它的大小以适应分辨率：

setResolution(16/9);

function setResolution(ratio) {
    var conWidth = ($(".c-container").css('width')).replace(/\D/g,'');
    var conHeight = ($(".c-container").css('height')).replace(/\D/g,'');
    var tempWidth = 0;
    var tempHeight = 0;

    tempHeight = conWidth / ratio;
    tempWidth = conHeight * ratio;

    if (tempHeight > conHeight) {
        canvas.setWidth(tempWidth);
        canvas.setHeight(conHeight);
    } else {
        canvas.setWidth(conWidth);
        canvas.setHeight(tempHeight);
    }
}

x 和 y 鼠标坐标在放大时工作正常，但它们与返回的图像数据不一致。似乎 ctx 并没有改变它的宽度和高度，也没有随着实际的画布大小而缩放。

canvas 元素在使用 getContext 之前也显示了正确的宽度和高度。

关于解决方案的任何想法？

随时在现场网站上查看完整的脚本：http://minimedit.com/

Answer 1

尝试“fabric.devicePixelRatio”计算实际位置，例如：

x = parseInt(mouse.x) * fabric.devicePixelRatio