[英]How to put an html element over a fabric.js element
我想在fabric.Group內部的fabric.js元素上放置一個按鈕。
如何獲取相對於布料元素的畫布容器的左上角坐標,然后將其設置為按鈕?
jsfiddle: https ://jsfiddle.net/d9sp16yc/2/
我試過的東西像這樣或這樣 ,但我沒有得到我想要的結果。 該按鈕會稍微向右或向左/向下或向上移動。
另一件事是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);
}
問題是這會影響坐標的計算方式。
即使在調整窗口大小時,是否可以將其放置在結構對象的左上角?
我真的需要一個快速的解決方案,因此我將為實現此目的提供任何建議/幫助。
提前致謝。
看一看(與畫布外部對象的交互) 。 希望對您有幫助...
簡而言之,您可以使用畫布內對象的絕對坐標將HTML元素置於畫布外。
這是網站上的代碼和屏幕截圖。 它只是將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.