Fabricjs 在缩放或平移后获取 RGB 像素值

Question

在执行平移或缩放后，我无法在 canvas 上获得正确的鼠标坐标。我有这段用于采样坐标和 RGB 的代码：

        canvas1.on('mouse:move', function (e) {
            //allowing pan only if the image is zoomed.
            if (panning && e && e.e) {
                var delta = new fabric.Point(e.e.movementX, e.e.movementY);
                canvas1.relativePan(delta);
            } else {//Read the RGB value of the mouse point
                var mouse = canvas1.getPointer(e.e);

                var x = parseInt(mouse.x);
                var y = parseInt(mouse.y);

                // get the color array for the pixel under the mouse
                var px = ctx.getImageData(x, y, 1, 1).data;

                // report that pixel data
                results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
            }
        });

问题是在zoom/pan之后坐标是'wrong'，例如左上角不是 (0, 0) 而是 (-someX, -someY)...

任何帮助将不胜感激

编辑：我发现了错误，这将解决它。希望对其他人有用

                var x = e.e.offsetX;//parseInt(mouse.x);
                var y = e.e.offsetY;//parseInt(mouse.y);

Answer 1

这段代码解决了，希望对其他人有用。

 canvas1.on('mouse:move', function (e) {
        //allowing pan only if the image is zoomed.
        if (panning && e && e.e) {
            var delta = new fabric.Point(e.e.movementX, e.e.movementY);
            canvas1.relativePan(delta);
        } else {//Read the RGB value of the mouse point
            var mouse = canvas1.getPointer(e.e);

            var x = e.e.offsetX;//parseInt(mouse.x);
            var y = e.e.offsetY;//parseInt(mouse.y);

            // get the color array for the pixel under the mouse
            var px = ctx.getImageData(x, y, 1, 1).data;

            // report that pixel data
            results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
        }
    });

Fabricjs 在缩放或平移后获取 RGB 像素值

Fabricjs get RGB pixel value after zoom or pan

javascript

fabricjs