在畫布上添加刪除圖標HTML5和Fabric js

我正在使用HTML5和Fabric.js。我正在上傳多張圖片。但我想用戶可以刪除上傳的圖像。我會告訴你一個屏幕截圖。在畫布上添加刪除圖標HTML5和Fabric js

我想在用戶單擊圖像時在圖像上添加一個刪除圖標。

HTML代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 

<input type="file" id="file"> 
<input type="color" value="blue" id="fill" /> 
<select id="font">

的Java Sript代碼：

var canvas = new fabric.Canvas('canvas'); 

document.getElementById('file').addEventListener("change", function (e) { 
    var file = e.target.files[0]; 
    var reader = new FileReader(); 
    console.log("reader " + reader); 
    reader.onload = function (f) { 
    var data = f.target.result; 
    fabric.Image.fromURL(data, function (img) { 
     var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     canvas.setActiveObject(oImg); 
     // add an event listener 
     oImg.on('mousedown', function(){ 
     // bring the image to front 
     oImg.bringToFront(); 
     }); 
    }); 
    }; 
    reader.readAsDataURL(file); 
}); 

$('#fill').change(function(){ 
    var obj = canvas.getActiveObject(); 
    if(obj){ 
    obj.setFill($(this).val()); 
    } 
    canvas.renderAll(); 
}); 

$('#font').change(function(){ 
    var obj = canvas.getActiveObject(); 
    if(obj){ 
    obj.setFontFamily($(this).val()); 
    } 
    canvas.renderAll(); 
}); 

function addText() { 
    var oText = new fabric.IText('Tap and Type', { 
    left: 100, 
    top: 100 , 
    }); 

    canvas.add(oText); 
    canvas.setActiveObject(oText); 
    $('#fill, #font').trigger('change'); 
    oText.bringToFront(); 
} 

document.querySelector('#txt').onclick = function (e) { 
    e.preventDefault(); 
    canvas.deactivateAll().renderAll(); 
    document.querySelector('#preview').src = canvas.toDataURL(); 
};

CSS代碼：

canvas{ 
    border: 1px solid black; 
}

你可以看到這個鏈接。 Write custom text on image canvas with fabric.js and HTML5

點擊十字圖標圖像後應該刪除。我們可以添加刪除圖標嗎？如果是的話，請給我一些想法。

來源

2016-01-16 V SH

@AndreaBogazzi。你可以建議我回答http://stackoverflow.com/questions/43803661/how-to-set-time-in-rang-slider-in-angular-js –

您需要使用選定對象的座標及其寬度和高度繪製圖標圖像，而不是將其附加到對象轉換點。如果你這樣做，你會失去這個轉換點的調整功能。另外，在對象旋轉後，很難確定哪個變換點最接近右上角。我會承諾有一些exterlal工具欄按鈕，這將做到這一點，或者有它的上下文菜單。

添加一個按鈕，或者一些其他的元素

<button id="remove" style="display:none">remove</button>

，並添加到您的代碼

$('#remove').on('click', function(){ 
    canvas.getActiveObject().remove(); 
}); 

canvas.on('object:selected', function(o) { 
    if (o.target.isType('image')) { 
    $('#remove').show(); 
    } 
}); 

canvas.on('selection:cleared', function() { 
    $('#remove').hide(); 
});

來源

2016-01-16 16:09:34 dzona

如何添加exterlal工具欄按鈕。 –

@varunsharma我已經更新了我的答案，代碼片段 – dzona

我認爲這段代碼不適合這個https://jsfiddle.net/varunPes/vb1weL93/ –

在畫布上添加刪除圖標HTML5和Fabric js

回答

相關問題