您好,我想使用 FabricJS 在元素中添加删除按钮。我有一个例子:
我尝试添加这部分代码,但是当我调整图像大小时,删除按钮不在原位。
http://jsfiddle.net/wxao1on8/13/
function addDeleteBtn(x, y, w){
$(".deleteBtn").remove();
var btnLeft = x;
var btnTop = y - 30;
var widthadjust=w/2;
btnLeft=widthadjust+btnLeft-1
var deleteBtn = '<img src="https://www.funagain.com/images/old/common/delete-icon.png" class="deleteBtn" ' +
'style="position:absolute;top:'+btnTop+'px;right:'+btnLeft+'px;cursor:pointer;"/>';
$(".canvas-container").append(deleteBtn);
}
canvas.on('object:selected',function(e){
addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width);
});
canvas.on('mouse:down',function(e){
if(!canvas.getActiveObject())
{
$(".deleteBtn").remove();
}
});
canvas.on('object:modified',function(e){
addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width);
});
canvas.on('object:moving',function(e){
$(".deleteBtn").remove();
});
$(document).on('click',".deleteBtn",function(){
if(canvas.getActiveObject())
{
canvas.remove(canvas.getActiveObject());
$(".deleteBtn").remove();
}
});
最佳答案
target.oCoords.mt
是中上 Angular 。
改用右上角:e.target.oCoords.tr
var canvas = new fabric.Canvas('canvas');
var HideControls = {
'tl':true,
'tr':false,
'bl':true,
'br':true,
'ml':true,
'mt':true,
'mr':true,
'mb':true,
'mtr':true
};
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function (img) {
img.top = 60;
img.left = 30;
img.setControlsVisibility(HideControls);
canvas.add(img);
});
canvas.renderAll();
function addDeleteBtn(x, y){
$(".deleteBtn").remove();
var btnLeft = x-10;
var btnTop = y-10;
var deleteBtn = '<img src="https://www.funagain.com/images/old/common/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';
$(".canvas-container").append(deleteBtn);
}
canvas.on('object:selected',function(e){
addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
});
canvas.on('mouse:down',function(e){
if(!canvas.getActiveObject())
{
$(".deleteBtn").remove();
}
});
canvas.on('object:modified',function(e){
addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
});
canvas.on('object:scaling',function(e){
$(".deleteBtn").remove();
});
canvas.on('object:moving',function(e){
$(".deleteBtn").remove();
});
canvas.on('object:rotating',function(e){
$(".deleteBtn").remove();
});
$(document).on('click',".deleteBtn",function(){
if(canvas.getActiveObject())
{
canvas.remove(canvas.getActiveObject());
$(".deleteBtn").remove();
}
});
关于javascript - 在 Canvas Fabric JS 中的元素上添加删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35630508/