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は）...

任意のヘルプは

EDIT理解されるであろう。それは他の誰か

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