konvaJS : 如何添加自定义标签来区分形状？

Question

我在鼠标移动时画了一条线来连接两个矩形。我只想连接一个矩形 once.I 有一个想法是用分隔符记录两个矩形的id，然后存储在行的id中。但是当鼠标移动时，这一层的形状数组会循环一次。这是非常低效的。所以我想问问有没有什么办法可以在这些形状中添加自定义标签来区分它们。喜欢rect.isLinked = true/false。我在 API 文档中没有找到这个方法。

谁能帮帮我？谢谢！

Answer 1

客观上，这是一种要求，需要保存一个具有一定价值的事物列表，并能够高效地在列表中查找实例。这是一个标准的 javascript 模式

创建普通对象

let myList = {};

我们可以将对象属性作为字符串引用，因此要存储一个值，我们可以使用：

myList["shapeId1"] = "I am linked";

现在我们可以通过测试列表中是否存在具有该字符串名称的属性来检查 shapeId1 是否被 link 编辑。

let isLinked = myList.hasOwnProperty("shapeId1"); // true if property exists, false if not.

您可以扩展它以存储更复杂的值 - 如果我们需要知道 linked 形状的 ID。

let myList = {};
...
myList["shapeId1"] = {linkedTo: "shapeId2"};
myList["shapeId2"] = {linkedTo: "shapeId1"};
...
console.log("ShapeId1 is linked = " + myList.hasOwnProperty("shapeId1")); // true
if (myList.hasOwnProperty("shapeId1")){
    console.log("ShapeId1 is linked to " + myList["shapeId1"].linkedTo); // shapeId2
}
etc

关于如何使用 Konva 进行部署 - 您可以在形状创建时为其分配一个 id 值，就像分配填充颜色一样。如果您想突出显示线条两端的形状 link 您可以使用 Konva find or findOne 方法通过它们的 ID 获取形状。

konvaJS : 如何添加自定义标签来区分形状？

konvaJS : How can I add a custom Tag to distinguish shapes？

javascript

html

canvas

konvajs