正在删除 Fabric.js 中的选定对象矩形

Question

当我点击一个圆圈时，在 circle.How 周围创建了一个矩形，我可以删除它吗？ http://jsfiddle.net/yrL4eLsn/4/

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});


canvas.add(rect);
canvas.add(circle);

Answer 1

编辑：

好的，看了你的 JSFiddle，你真的是在问如何使用 jQuery canvas api。在这方面帮不了你，但是 looks like 有 moving/updating 个对象在被放置在 canvas 上之后的方法。

原始答案（下方）是针对普通 javascript 的普通 canvas。

你不知道。单个 canvas 没有 'layers' 的概念或记住什么对象放在什么地方。

您有几个选择：

1) 重新绘制canvas，这次不绘制矩形。

2) 绘制两个相互重叠的 canvases 并切换包含矩形的那个的可见性。

3) 在刚刚画的矩形上面画一个白色的矩形（或者背景颜色是什么）

选项 1 是我的首选方式。选项 2 比您需要的更复杂，除非您要开始创建非常复杂的图像。选项 3 似乎很老套而且容易破解。

关于 #1 - canvas 的绘制发生得非常非常快，因此每秒重绘 canvas 几次是安全的（例如，在执行动画的情况下）而不会造成太大的性能损失。

Answer 2

在 FabricJS 中，您所指的矩形称为 Border。边框的角上是较小的控件（正方形），称为控件，可让您操作对象。

当你设置你的对象时，这两个都可以在设置数组中打开或关闭。

hasBorders

默认：真

当设置为false时，不渲染对象的控制边框

hasControls

默认：真

设置为false时，对象的控件不显示，不能用于操作对象

因此，要删除边框和控件，请将您的圆形声明更新为：

var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac',
    hasControls: false,
    hasBorders: false
});

另一种选择是修改边框的颜色。
borderColor

默认："rgba(102,153,255,0.75)"

对象控制边框的颜色（激活时）

控件的样式是通过另一种选择：

cornerColor

默认："rgba(102,153,255,0.5)"

对象控制角的颜色（激活时）

cornerSize

默认：12

对象控制角的大小（以像素为单位）

正在删除 Fabric.js 中的选定对象矩形

Removing selected object rectangle in Fabric.js

javascript

jquery

canvas

fabricjs