在Fabric.js画布上以鼠标坐标添加图像会导致图像位置偏移

Question

I have a rather trivial example where I'm attempting to insert an image on a Fabric.js canvas with the image centered at the mouse coordinates. The center of the cursor should be the exact center of the image.

I calculate the center of the image by halving its width and height and apply them as offsets to the left and top coordinates of the canvas.Image I'm inserting. Simple enough:

// Coordinates from the mouse click event. 
// `x` and `y` are aliases for `clientX`, `clientY`, respectively
const x = event.e.x,
      y = event.e.y

image.set({
    left: x - (image.width / 2),
    top: y - (image.height / 2)
})

canvas.add(image);

When the image is added, it's not quite center. In fact, there's a difference of 8 pixels on both x and y axes that I cannot account for.

This is the result:

The center of the image should be under the cursor.

If I manually set the offset to 28, the image is properly centered. But since I cannot account for the 8 extra pixels, this hack is unacceptable.

Working sample:

 const canvas = new fabric.Canvas('c', { width: 400, height: 150 }); // Add an image centered x & y at the exact point the user clicks. canvas.on('mouse:up', (opt) => { canvas.clear(); const x = opt.ex, y = opt.ey; fabric.Image.fromURL('https://i.imgur.com/htyNxF6.png', (image) => { /* Calculate the offset based on the image dimensions: This does not work as expected. A 40x40 image has ax/y offsets of 20. If we set the offset to 28, the image is centered at the cursor. Why 28? Check the "Apply ..." checkbox to see this in action. */ const offsetX = chkOffset.checked ? 28 : (image.width / 2), offsetY = chkOffset.checked ? 28 : (image.height / 2); const left = x - offsetX, top = y - offsetY; image.set({ left: left, top: top, stroke: 0, padding: 0, centeredScaling: true, hasControls: false, strokeWidth: 0, hasBorders: 0 }); canvas.add(image); writeDebug(`Mouse at: x=${x}, y=${y}; Image placed at: x=${left}, y=${top} Difference of ${Math.abs(left-x)}, ${Math.abs(top-y)}`); }); // Show coordinates on mouse move canvas.on('mouse:move', (opt) => { const x = opt.ex, y = opt.ey; writeDebug(`Mouse coordinates: x=${x}, y=${y}`); }); }); function writeDebug(message) { document.getElementById('debug').innerText = message; } 

 body { font-family: Consolas; } #c { border: 1px solid #ececec; box-shadow: 2px 2px 5px #c0c0c0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.1.0/fabric.min.js"></script> <canvas id="c"></canvas> <label for="chkOffset"> <input type="checkbox" id="chkOffset" /> Apply 28px offset </label> <div id="debug">Click in the canvas to add the image</div> 

Answer 1

When I was adding sample code to my question, I stumbled upon the answer. I set the padding of every element to 10 using CSS ( * { padding: 10px } ) to make everything look better and upon doing so discovered that the offset gap had increased.

Getting mouse coordinates using MouseEvent.ex and MouseEvent.xy are the culprit. I compared their values with MouseEvent.e.offsetX and MouseEvent.e.offsetY and found that the x and y values did not account for padding and margins.

Using offsetX and offsetY seemed to do the trick.

It seems if you want to get relevant mouse coordinates in Fabric.js, using offsetX and offsetY is the best bet as it accounts for offsets caused by CSS.

 const canvas = new fabric.Canvas('c', { width: 400, height: 150 }); // Add an image centered x & y at the exact point the user clicks. canvas.on('mouse:up', (opt) => { canvas.clear(); // Use .offset instead: const x = opt.e.offsetX, y = opt.e.offsetY; fabric.Image.fromURL('https://i.imgur.com/htyNxF6.png', (image) => { const offsetX = (image.width / 2), offsetY = (image.height / 2); const left = x - offsetX, top = y - offsetY; image.set({ left: left, top: top, stroke: 0, padding: 0, centeredScaling: true, hasControls: false, strokeWidth: 0, hasBorders: 0 }); canvas.add(image); writeDebug(`Mouse at: x=${x}, y=${y}; Image placed at: x=${left}, y=${top} Difference of ${Math.abs(left-x)}, ${Math.abs(top-y)}`); }); // Show coordinates on mouse move canvas.on('mouse:move', (opt) => { const x = opt.e.offsetX, y = opt.e.offsetY; writeDebug(`Mouse coordinates: x=${x}, y=${y}`); }); }); function writeDebug(message) { document.getElementById('debug').innerText = message; } 

 body { font-family: Consolas; } #c { border: 1px solid #ececec; box-shadow: 2px 2px 5px #c0c0c0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.1.0/fabric.min.js"></script> <canvas id="c"></canvas> <div id="debug">Click in the canvas to add the image</div>