在 canvas 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">

Java脚本代码：

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

你可以看到这个link.

点击十字图标图像后应该被删除。我们可以添加删除图标吗？如果是，请给我一些想法。

Answer 1

您需要使用所选对象的坐标及其宽度和高度来绘制图标图像，而不是将其附加到对象变换点。如果您执行 su，您将失去该转换点的调整大小功能。此外，在对象旋转后，很难判断哪个变换点最接近右上角。我更喜欢有一些外部工具栏按钮，可以做到这一点，或者有上下文菜单。

添加按钮或其他元素

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

在 canvas HTML5 和 Fabric js 中添加删除图像上的图标

Add remove icon on image in canvas HTML5 and Fabric js

html

javascript

jquery

canvas

fabricjs