Question

当我点击一个圆圈时，会在圆圈周围创建矩形。如何删除它？ 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

在FabricJS中，您引用的矩形称为边框。在边框的角落是较小的控件（正方形），称为控件，允许您操纵对象。

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

hasBorders

默认值：true

设置为false时，不会呈现对象的控制边框

hasControls

默认值：true

设置为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

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

Answer 2

编辑：

看完你的JSFiddle后，你真的在问如何使用jQuery canvas api。无法帮助你，但looks like有一些方法可以在将对象放在画布上后移动/更新对象。

原始答案（如下）适用于普通画布上的普通javascript。

你没有。单个画布没有“图层”的概念或记住放置在哪里的对象。

您有几个选择：

1）重绘画布，这次不绘制矩形。

2）绘制两个相互叠加的画布，并切换包含矩形的画布的可见性。

3）在刚绘制的矩形（或任何背景颜色）上绘制一个白色矩形

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

关于＃1 - 画布的绘制非常非常快，因此可以安全地每秒重绘画布几次（例如，在执行动画的情况下），而不会产生太多的性能损失。

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

2 个答案: