fabric.js 偏移解决方案答案

【问题标题】：fabric.js Offset Solutionfabric.js 偏移解决方案
【发布时间】：2013-06-24 02:24:10
【问题描述】：

在使用fabric.js 处理偏移时——最好的方法是什么？

我基本上允许用户绘制一个框，并且我想确保我在拖动操作的确切开始和结束坐标处绘制了该框。

...
    left: x + width/2 - 8, 
    top: y + height/2 - 8, 
...

我基本上不得不对 left 和 top 值进行一些操作。它似乎工作。有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

您没有考虑到画布元素的位置。使用以下内容：

var canvas = new fabric.Canvas('c');

canvas.on("after:render", function(){canvas.calcOffset();});

var started = false;
var x = 0;
var y = 0;
var width = 0;
var height = 0;

canvas.on('mouse:down', function(options) {
  //console.log(options.e.clientX, options.e.clientY);

  x = options.e.clientX;
  y = options.e.clientY;

  canvas.on('mouse:up', function(options) {

    width = options.e.clientX - x;
    height = options.e.clientY - y;   

    var square = new fabric.Rect({

        width: width, 
        height: height, 
        left: x + width/2 - canvas._offset.left, 
        top: y + height/2 - canvas._offset.top, 
        fill: 'red',
        opacity: .2
    });
    canvas.add(square);
    canvas.off('mouse:up');
    $('#list').append('<p>Test</p>');

  });

});

正如你在代码中看到的，canvas元素的坐标由：canvas._offset.left和canvas._offset.top给出

【讨论】：

这可能是一个旧线程，但如果你能回答我的问题，那真的很有帮助。所以我的问题是如何使用元素来实现这一点。是否只是将事件侦听器添加到 img 标签然后等待 mouse:drag 的问题，如果这甚至是一个事件。
@RepeaterCreeper 我认为您最好提出一个新问题。参考这个，以防它被标记为重复。
我实际上已经这样做了。按here 重定向。如果你能给我一个答案，那就太棒了。我对自己问题的解释有点令人困惑，所以如果您需要任何帮助来理解我想要实现的目标，请告诉我。