在 HTML5 和 Fabric js 的画布上添加或删除图像的图标

Question

我使用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">

JavaScript代码：

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;
}

您可以点击此链接查看：如何使用fabric.js和HTML5在图像画布上编写自定义文本

点击“叉号”图标后，应将图像移除。我们能否添加删除图标？如果可以，请提供相关想法。

- Varun Sharma

---

@AndreaBogazzi，你能为我建议一个答案吗？http://stackoverflow.com/questions/43803661/how-to-set-time-in-rang-slider-in-angular-js - Varun Sharma

Answer 1

为绘制图标图像，需要使用选定对象的坐标、宽度和高度，而不是将其附加到对象的转换点。如果这样做，你将失去该转换点的调整大小功能。此外，在对象旋转后，很难确定哪个转换点最靠近右上角。我更喜欢有一些外部工具栏按钮来完成这项任务，或者在上下文菜单中进行操作。

添加一个按钮或其他元素。

<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();
});

- dzona

---

如何添加外部工具栏按钮。 - Varun Sharma

@varunsharma 我已经更新了我的答案，并附上了代码片段。 - dzona

@varunsharma 只需在代码末尾添加片段，并将按钮HTML添加到HTML部分并进行测试。我刚刚这样做了，它可以正常工作。 - dzona

你能给我一些关于去除敲击和输入的想法吗？因为你的代码对图片非常完美。 - Varun Sharma

只需将“$('#remove').show();”放在if块之外，它就可以适用于所有对象类型，包括文本。 - dzona