如何以编程方式选择 Fabric.js 对象

Posted 2023-03-25

【中文标题】如何以编程方式选择 Fabric.js 对象

【英文标题】：How to select Fabric.js object programmatically

【发布时间】：2013-12-04 12:07:28

【问题描述】：

我想以编程方式选择 Fabrics.js 对象。我需要做什么？例如，我正在添加两个这样的对象：

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect(
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  ));

 canvas.add(new fabric.Circle(
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
  ));

点击名为

的按钮时我有两个按钮

选择矩形 选择第二个对象

当点击选择矩形按钮时，它应该选择矩形形状，当点击选择第二个对象按钮时，它应该选择第二个对象圆。

这是解决方法的Jsfiddle。

我看腻了，我在这里寻找一些如何开始。

编辑

我喜欢拥有每个对象的 ID，应该可以使用该 ID 选择对象，我问这个的原因是，在使用协作事物时，我们无法确定所有连接的节点都会有同一索引中的项目，因此唯一的 id 将很有用。

【问题讨论】：

@kangax 请帮忙

【参考方案1】：

你想使用：

 canvas.setActiveObject(canvas.item(0));

在按钮点击事件中

数字对应于对象添加到画布的顺序。

看这里：

http://jsfiddle.net/ThzXM/1/

【讨论】：

不错！我们不能在点击时获取项目编号，然后将其传递给canvas.setActiveObject(canvas.item(itemNumber));

有没有办法让项目编号被选中（onclick）？

@danbrown 有什么方法可以设置项目的 ID，因为我喜欢这样协作......所以如果您按项目位置进行选择，每个人都会有所不同，所以如果我们可以添加一些唯一的 id 并获取它会有什么好处。为您的宝贵建议 +1

我可能会使用函数将项目添加到画布，这样您就可以在每次调用添加项目函数时设置一个全局计数器。同时，我可能会使用一个选择框，每次调用 add 函数时都会添加一个新的 字段。

由于某种原因，后来我不得不打电话给canvas.renderAll();

【参考方案2】：

是的，您可以通过在 all.js 中添加以下代码来为每个项目设置 id

在 fabric.js 构建版本 1.3.0 中：在对象声明中添加

 var object = 
   id:   this.id,
   remaining properties in all.js
  

现在您可以使用以下方法设置对象 ID：

canvas.getActiveObject().id=your id value;

您可以使用以下方法检索对象 ID：

Myid= canvas.getActiveObject().get('id');

【讨论】：

谢谢，现在我可以添加 id +1，你能告诉我是否可以使用该 id 选择对象？如果是，请给我一个例子

无论如何你必须遍历所有对象并检查当前对象id ==你需要的对象的id！简单..如果是的话做一些动作..

是的，我首先想到的是，但如果我们拥有大量对象，我觉得这不是一个好方法，是吗？

嗨，我尝试用 id 保存对象的 JSON 字符串。但我找不到 id 值。 JSON 字符串不包含 id。有什么解决办法吗？

@MiguelIke，迟到 3 年总比没有好。 . .您需要将一组额外属性传递给 toJSON 函数，以使其在 JSON 中包含这些属性。例如：canvas.toJSON(["id"])fabricjs.com/docs/fabric.Canvas.html#toJSON

【参考方案3】：

要查找所选对象的织物对象编号（项目编号），请使用：

canvas.on(
    'object:selected': selectedObject
);

function selectedObject(e) 
    var id = canvas.getObjects().indexOf(e.target);

如果您按照 Dan Brown 的回复以编程方式设置对象，则 var id 是相同的数字：

canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.

【参考方案4】：

为您的对象添加一个 id。

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Rect(
    id: 123,
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
));

canvas.add(new fabric.Circle(
    id: 456,
    left: 200,
    top: 200,
    radius: 30,
    fill: 'gray',
    stroke: 'black',
    strokeWidth: 3
));

function removeSpot(canvas, id) 
    canvas.forEachObject(function(obj) 
        if (obj.id && obj.id === id) canvas.remove(obj);
    );


// remove rect
removeSpot(canvas, 123);

// remove circle
removeSpot(canvas, 456);