问题描述
我想在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元素上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!