[英]How to put an html element over a fabric.js element
I want to put a button over a fabric.js element which is inside of a fabric.Group. 我想在fabric.Group内部的fabric.js元素上放置一个按钮。
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/ 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): 另一件事是setSize
函数会在调整窗口大小时缩放组(只是为了获得响应行为):
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. 简而言之,您可以使用画布内对象的绝对坐标将HTML元素置于画布外。
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. 它只是将HTML按钮定位在织物图像元素上,并在图像上分配移动事件,因此,当您移动图像时,按钮将跟随它。
(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);
});
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.