Javascript 如何将html元素放在fabric.js元素上

我想在fabric.js元素上放置一个按钮，该元素位于fabric.Group内部

如何获取相对于结构元素的画布容器的左上角坐标，然后将其设置为按钮

jsfiddle：

我尝试过像或这样的事情，但我没有得到我想要的结果。按钮会稍微向右或向左/底部或顶部移动

另一件事是，

setSize

函数在调整窗口大小时缩放组（只是为了获得响应行为）：

问题是这会影响坐标的计算方式

即使窗口调整了大小，也可以将其放在fabric对象的左上角吗

我真的需要一个快速的解决方案，因此我将非常感谢为实现这一点提供的任何建议/帮助

提前谢谢。

看看这个。我希望它能帮助

简而言之，您可以使用画布内对象的绝对坐标将HTML元素定位到画布外

这是网站上的代码和截图。它只是将HTML按钮放置在fabric图像元素上，并在图像上指定移动事件，因此当您移动图像时，按钮将跟随它

看看这个。我希望它能帮助

简而言之，您可以使用画布内对象的绝对坐标将HTML元素定位到画布外

这是网站上的代码和截图。它只是将HTML按钮放置在fabric图像元素上，并在图像上指定移动事件，因此当您移动图像时，按钮将跟随它

---

欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。

function setSize() {
  var width = $('.container').width();
  var height = width * 0.6;
  canvas.setWidth(width);
  canvas.setHeight(height);
  group.scaleToWidth(width);
  canvas.centerObjectH(group);
  // setPos($('#btn'), rect);
}

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
    return {
      left: object.left + this._offset.left,
      top: object.top + this._offset.top
    };
  }

  var btn = document.getElementById('inline-btn'),
      btnWidth = 85,
      btnHeight = 18;

  function positionBtn(obj) {
    var absCoords = canvas.getAbsoluteCoords(obj);

    btn.style.left = (absCoords.left - btnWidth / 2) + 'px';
    btn.style.top = (absCoords.top - btnHeight / 2) + 'px';
  }

  fabric.Image.fromURL('../lib/pug.jpg', function(img) {

    canvas.add(img.set({ left: 250, top: 250, angle: 30 }).scale(0.25));

    img.on('moving', function() { positionBtn(img) });
    positionBtn(img);
  });
})();