Fabricjs在缩放或平移后得到RGB像素值

Question

我在执行平移或缩放后在画布上获取正确的鼠标坐标时遇到问题。 我有采样坐标和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); 

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] + ']'; 
     } 
    });