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

问题描述

我正在使用HTML5和Fabric.js。我上传了多张图片。但我希望用户可以删除上传的图像。我将向您展示一个屏幕截图。

I am using HTML5 and Fabric.js. I am uploading multiple images. But i want user can remove uploaded image. I will show you one screen shot.

我想在用户点击图片时在图片上添加一个删除图标。

I want to add one remove icon on image when user clicked on image.

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 Code：

Java Sript Code:

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

您可以看到此链接。

点击十字图标后，应删除图片。我们可以添加删除图标。如果是，请告诉我这个。

After click on cross icon image should be remove. Can we add remove icon. If yes then give me idea about this.

推荐答案

您需要使用所选对象的坐标及其宽度来绘制图标图像。高度，而不是它附加到对象的转换点。如果你做su，你将失去该转换点的大小调整功能。此外，在对象旋转之后，很难分辨哪个变形点最接近右上角。我会考虑使用一些exterlal工具栏按钮，它会执行此操作，或者使用上下文菜单。

You'll need to draw icon image using selected object's coordinates and it's width and height, rather than having it attached to objects transformation point. If you do su, you'll lost resizing functionality for that transformation point. Also, after object's rotation it will be hard to tell which transformation point is closest to upper right corner. I would preffer to have some exterlal toolbar button, that will do this, or have context menu with it.

添加按钮或其他元素

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

并将其添加到您的代码中

and add this to your code

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

这篇关于在画布HTML5和Fabric js中的图像上添加删除图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！