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

【问题标题】：Fabricjs get RGB pixel value after zoom or panFabricjs在缩放或平移后获取RGB像素值
【发布时间】：2017-08-14 16:50:46
【问题描述】：

在执行平移或缩放后，我无法在画布上获取正确的鼠标坐标。我有这个用于采样坐标和 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] + ']';
            }
        });

问题是缩放/平移后坐标“错误”，例如左上角不是 (0, 0) 而是 (-someX, -someY)...

任何帮助将不胜感激

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

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

【问题讨论】：

帮我一个忙？把你的答案写在下面并标记为“接受”。因此，与 Stack Overflow 的设计方式一致……帮助其他人快速看到问题已得到解决。谢谢，请！

标签： javascript fabricjs

【解决方案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] + ']';
        }
    });

【讨论】：