Question

目前正在实施滴管。它在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没有改变它的宽度和高度以及缩放和实际的画布大小。

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

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

请随时查看实时网站上的完整脚本：http://minimedit.com/

Answer 1

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

x = parseInt（mouse.x）* fabric.devicePixelRatio

Fabric JS getContext（＆＃39; 2d＆＃39;）与getImageData颜色不匹配

1 个答案: