如何将html元素放在fabric.js元素上 [英] How to put an html element over a fabric.js element

问题描述

我想在fabric.Group内部的fabric.js元素上放置一个按钮.

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

jsfiddle:

 (function(){var canvas = this .__ canvas = new fabric.Canvas('c');fabric.Object.prototype.transparentCorners = false;fabric.Object.prototype.originX = fabric.Object.prototype.originY ='中心';fabric.Canvas.prototype.getAbsoluteCoords = function(object){返回 {左:object.left + this._offset.left，top:object.top + this._offset.top};}var btn = document.getElementById('inline-btn')，btnWidth = 85，btnHeight = 18;函数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({左:250，上:250，角度:30}).scale(0.25));img.on('moving'，function(){positionBtn(img)});positionBtn(img);});})(); 

I want to put a button over a fabric.js element which is inside of a fabric.Group.

How do I get the top-left corner coords relative to the canvas container of a fabric element and then set it to the button?.

jsfiddle: https://jsfiddle.net/d9sp16yc/2/

I've tried things like this or this but I don't get the results that I want. The button gets slightly moved to right or left / bottom or top.

Another thing is that the setSize function is scaling the group when the window gets resized (just to get a responsive behaviour):

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);
}

And the problem is that this affects the way the coords are being calculated.

Is this possible to put it in the top-left corner of the fabric object even when the window gets resized?

I really need a quick solution for this so I would appreciate any suggestion/help to achieve this.

Thanks in advance.

解决方案

Take a look at this (Interaction with objects outside canvas). I hope it helps...

In a nutshell you can use the absolute coordinates of an object inside the canvas to position an HTML element out of the canvas.

Here is the code and a screenshot from the website. It simply positions HTML button over a fabric image element and assigns move event on the image, so when you move the image, the button follows it.

(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);
  });
})();

这篇关于如何将html元素放在fabric.js元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！