正文 

当前位置： 首页 > 源码 >

在 FabricJS 画布上拖放和删除对象

     2023-05-08     276

关键词：

【中文标题】在 FabricJS 画布上拖放和删除对象【英文标题】：Drag, drop and delete objects on FabricJS canvas 【发布时间】：2017-08-08 14:53:13 【问题描述】：

我在使用 JQuery 处理 FabricJS 时遇到问题。

选择一个对象并单击删除没有问题。

这是我的代码演示 Fiddle

我可以在 FabricJS 之外进行拖放和删除操作（只需拖动不相关的元素即可删除），但我很难将两者结合起来。

也许我需要在画布中合并删除按钮才能使“拖放”起作用？当我尝试这个时，#delete 元素消失了。

JS

var canvas = new fabric.Canvas('canvas');
$("#delete").click(function() 
  deleteObjects();
);

//Test objects on the canvas
//Circle
var circle = new fabric.Circle(
  left: 200,
  top: 150,
  radius: 30,
  fill: "#ff0072"
);
circle.hasRotatingPoint = true;
canvas.add(circle);

// adding triangle
var triangle = new fabric.Triangle(
  left: 130,
  top: 150,
  strokeWidth: 1,
  width: 70,
  height: 60,
  fill: '#00b4ff',
  selectable: true,
  originX: 'center'
);
triangle.hasRotatingPoint = true;
canvas.add(triangle);

//Select all objects
function deleteObjects() 
  var activeObject = canvas.getActiveObject(),
    activeGroup = canvas.getActiveGroup();
  if (activeObject) 
    canvas.remove(activeObject);
  

//Drag and drop delete
$(function() 
  $('#delete').droppable(
    drop: function(event, ui) 
      deleteObjects();
    
  );
);

HTML

<section class="canvas__container">
  <canvas id="canvas"  ></canvas>
  <div id="delete">&#x267B;</div>
</section>

（我没有粘贴我的 CSS，因为这不是特别相关）

【问题讨论】：

我在下面留下了答案，如果您还需要什么，请告诉我？您倾向于包含在画布中可能是您​​最好的选择。 @TimHarker 非常感谢您的帮助，这太棒了。没有别的了，谢谢，我会努力让自己走得更远，我会从我的斗争中学习：D，并花一些时间查看您的代码以更好地理解它 不用担心。如果您有任何问题，请发布另一个问题，很乐意再次提供帮助。 【参考方案1】：

这应该让你接近：

var bin;
var selectedObject;
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAIAAABuhDQnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPPSURBVGhDzZd9U+IwEIfv+3+2Gxln9PAEcYRBURQVkVeFe9rdC2laIFsK+Pzh2Cab/ZF9Sfpr9bMpr+/r6+v5+fn+/v5vyuXl5e8U/uGx2Wwy9Pr6yjQ1KIVZ32w2e3x8xL2oiYHJmGCoS1gw6MPB7e2t+iwF5laVUfqIEcGq1WrqZw9YhKXig75bHzlUiTIfFmRZdbCVHfrIG13yALC4utnMRn2EYM9siwEX22NdrA8b1y8ODY62SCzWd4Sd88GdOs5RoO+gObeJTbkY6qOs1OLoFFZ0Rh95UHkriQfX+UTM6Ot2uzr3RCBApfxnrY+T54SbJyAgOADX+krX7NnZGTeAm5ub8/NzfbUHQS2rPlTruJFOp7NYLGQR+P7+5vHz8/Pl5eX6+lonGfG3UPWV6ykPDw/L5VJWyIPQcjHxe43qM93nBEz8nSvk4+OD6KtBNKys9qKPqtYRC3d3d/P5XFYRptMpBei/ZGXyUg0suEaT6OOarq/toHI8HrPIZDLhWn91dTUajdKVE4g+tz2dasH16kSfte1Rp29vb71e7+LiQt78SeFRtPqQ7ExmVGZG4hphoo8fra+jQRx7A5QqJeySjJoNgs5jueQW8zL6Wq0WqSb2wnA41LG0gbm6YRqKUW+9rSFJVkj0mYxJsqDFs4s0Gh1OISlJcGJdr9cRR3ytvQZJsniiT9/FQeMVSwe+86240WiQjuDKxXozEiuzPupULB00OR3Lgmg/DTA09UKxMsfX10fuE8cguA6izHGnU9PJ5IaO7SITX1N9uPjijx1CXKFXCpDR4MfEO8rUh6n+3a5QFqQUGSbvaYrtdnswGBBThqghioO6Tr0kUCUyM4ZMfzH1Z3IoSEGksFVPT0/6nELcqQz2TB4R7X5JDJn+bD3fAilsJx0xyDYftDKqxnFkzjfs9XUcHPmYiD0QTQ5ZttDtVkC/31fLaNz6iT6wHkFsuRgKoiB/+ML7+7uprYBLPlB91vspLjFxv1J6L3/JRU5kV0C0RlPaCQX3U9bVQSOcEySftBguCpSwvN8H//xUfVDuLl45yFBBKWt9qP4J35d+5cFaH1gvqpXj2p4jow/tJ9zC/OZBRh9Yb0EV4nqyT6gPyn0L74nfU3wK9MGRazmoWZ9ifeSB9YuhNDjKp52jWB9gc4RdxMUWcbBRn3DQXNyUcz479AFlVXnTYcHCas2zWx8QAjpnJSpZhKW2x9QnSp/AAbhnRmLun/0xGPQJOCBvTPdFJmNiVSaY9TmIETlEsHDP55brR/zDIy8ZYkJ8KAspr+84/Gx9q9U/+FfCZwDz5ogAAAAASUVORK5CYII=', function(img) 
  img.set(
    left: 174,
    top: 329,
    selectable: false
  );
  bin = img;
  canvas.add(img, circle, triangle);
);
canvas.on('object:selected', function(evn) 
  selectedObject = evn.target;
)
canvas.on('mouse:up', function(evn) 
  var x = evn.e.offsetX;
  var y = evn.e.offsetY;
  if (x > bin.left && x < (bin.left + bin.width) &&
    y > bin.top && y < (bin.top + bin.height)) 
    canvas.remove(selectedObject);
  
);

您的 JSFiddle 已更新，https://jsfiddle.net/rekrah/jgruwse0/。

如果您还有其他问题，请告诉我。

【讨论】：

如何在 Objective-C 中的地图上拖放和拖动图钉

】如何在Objective-C中的地图上拖放和拖动图钉【英文标题】：HowcanIDropandDragapinonamapinObjective-C【发布时间】：2015-10-3001:34:34【问题描述】：希望有人能提供帮助，我正在尝试在mapView上放置一个Pin。但我希望引脚能够被拖动和放下... 查看详情

JQuery-UI 在 Re-Drag 上拖放和重新拖动克隆

】JQuery-UI在Re-Drag上拖放和重新拖动克隆【英文标题】：JQuery-UIDrag,DropandRe-DragClonesonRe-Drag【发布时间】：2011-01-1905:56:28【问题描述】：我正在使用以下代码来扩展下载中包含的JQuery-UI演示。我正在尝试设置一个容器，用户可以将... 查看详情

在画布上拖放形状

】在画布上拖放形状【英文标题】：Drag&DropShapesonCanvas【发布时间】：2011-01-0107:15:42【问题描述】：我在Canvas上放置了几个形状（如Ellipse和Rectangle）。现在，我希望用户能够拖放这些形状。是否有一些我可以使用的预定义功... 查看详情

FabricJS：始终在画布上居中对象

】FabricJS：始终在画布上居中对象【英文标题】：FabricJS:AlwaysCenterObjectonCanvas【发布时间】：2013-06-2015:31:05【问题描述】：是否可以在fabricjs画布上始终将对象居中？背景：我正在构建一个web工具，可以很容易地使用fabricjs创建复... 查看详情

如何在散点图上拖放

...一个散点图，我希望能够移动点，拖动它们问题是它不像画布，我显然不能使用eventgetX()或getSceneX()，因为有轴，根据场景的大小，它们不在同一位置，所以0/0是显然没有根据图表设置，如果我改变场景的大小，距离：边框/轴也... 查看详情

添加或删除对象时如何添加动画 - Fabricjs

】添加或删除对象时如何添加动画-Fabricjs【英文标题】：Howtoaddanimationwhenaddingorremovinganobject-Fabricjs【发布时间】：2017-06-1314:12:50【问题描述】：我将FabricJS用于我的图像处理库。我想知道如何将动画添加到画布中/从画布中删除的... 查看详情

Jquery拖放和克隆

】Jquery拖放和克隆【英文标题】：Jquerydrag/dropandclone【发布时间】：2011-01-0705:42:57【问题描述】：你好，我需要实现这个..我有一组可丢弃的物品（基本上我正在丢弃一件衣服上的设计）并且我正在丢弃一个克隆..如果我不喜欢丢... 查看详情

从画布中删除图像-fabricjs（javascript）

】从画布中删除图像-fabricjs（javascript）【英文标题】：removeimagefromcanvas-fabricjs(javascript)【发布时间】：2015-07-2917:49:39【问题描述】：我正在开发Web应用程序，其中大部分部分已被Angularjs覆盖。我被困在一个点上。我使用fabric.js... 查看详情

FabricJS动画：鼠标：向上和：向下期间画布上的选定对象

】FabricJS动画：鼠标：向上和：向下期间画布上的选定对象【英文标题】：FabricJSanimating:selectedobjectoncanvasduringmouse:upand:down【发布时间】：2017-09-1405:39:34【问题描述】：我正在尝试使用FabricJS在任何对象被选中时为其设置动画。Sow... 查看详情

从 Vue 方法更新 FabricJS 对象

】从Vue方法更新FabricJS对象【英文标题】：UpdatingFabricJSobjectsfromVuemethod【发布时间】：2021-05-2406:28:37【问题描述】：我正在尝试通过Vue控件更新Fabricjs画布。我正在通过“mounted()”初始化画布，但不知道如何在函数中访问画布而... 查看详情

无法将 FabricJS svg 或组对象移动到画布左上角

】无法将FabricJSsvg或组对象移动到画布左上角【英文标题】：Can\'tmoveFabricJSsvgorgroupobjectstothecanvastopleftcorner【发布时间】：2019-04-0810:10:03【问题描述】：我正在开发一个FabricJS应用程序，我希望用户通过简单的单击将对象移动到画... 查看详情

将图像拖放到画布（FabricJS）

】将图像拖放到画布（FabricJS）【英文标题】：DragAndDropImagetoCanvas(FabricJS)【发布时间】：2015-11-0702:32:31【问题描述】：问题我想用图像而不是canvas对象来做到这一点。这意味着您必须先添加要添加到画布的内容并作为画布的一部... 查看详情

如何在fabricJS中向圆形对象添加文本？

】如何在fabricJS中向圆形对象添加文本？【英文标题】：HowtoaddtexttoacircleobjectinfabricJS?【发布时间】：2016-08-0120:13:02【问题描述】：我在这里搜索fabricJS-circle，但没有找到添加数字1或2或3等文本的方法...在画布上的圆圈内？这是... 查看详情

拖放和鼠标事件

】拖放和鼠标事件【英文标题】：Draganddropandmouseevents【发布时间】：2011-05-2510:32:16【问题描述】：我的问题是，当我从另一个窗口拖放一些文本时，为什么在窗口上没有引发鼠标事件？我有一个窗口，可以在其中收听MouseEnter事... 查看详情

jquery拖放和克隆，找到元素的放置位置

】jquery拖放和克隆，找到元素的放置位置【英文标题】：jquerydrag,dropandclone,finddroppedpositionofelement【发布时间】：2014-11-1407:41:00【问题描述】：这里是我的jquery拖放和克隆功能。问题：我的问题是：当我删除元素时，它会显示：po... 查看详情

如何从 JSON 重新加载自定义 fabricJS 画布对象？

】如何从JSON重新加载自定义fabricJS画布对象？【英文标题】：HowdoIreloadcustomfabricJScanvasobjectsfromJSON?【发布时间】：2021-06-1700:49:01【问题描述】：我正在使用fabricJS和自定义类。我遇到了canvas.loadFromJSON()的问题，所以我从anotherquesti... 查看详情

通过在其上拖放文件或文件夹来启动 Swift OSX 应用程序

】通过在其上拖放文件或文件夹来启动SwiftOSX应用程序【英文标题】：LaunchaSwiftOSXappbydragginganddroppingafileorfolderonit【发布时间】：2022-01-0518:30:32【问题描述】：我试图弄清楚如何通过拖放文件或文件夹在OSX上启动Swift应用程序，并... 查看详情

在格子grid-flex上拖放

】在格子grid-flex上拖放【英文标题】：Draganddroponlatticegrid-flex【发布时间】：2011-07-0507:28:24【问题描述】：我正在尝试构建一个可视化的简单电路模型。朝着那个方向a)我希望构建一个拖放功能，其中我有可以在屏幕上拖放的项... 查看详情