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

【问题标题】：konvaJS : How can I add a custom Tag to distinguish shapes？konvaJS : 如何添加自定义标签来区分形状？
【发布时间】：2020-07-23 03:46:43
【问题描述】：

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

任何人都可以帮助我吗？谢谢！

【问题讨论】：

标签： javascript html canvas konvajs

【解决方案1】：

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

创建一个普通对象

let myList = {};

我们可以将对象属性称为字符串，以便存储我们可以使用的值：

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

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

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

您可以扩展它以存储更复杂的值 - 如果我们需要知道链接形状的 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 值，就像您分配填充颜色一样。如果您想突出显示线条链接两端的形状，可以使用Konva find or findOne 方法通过其 id 获取形状。

【讨论】：

你是对的。如果没有 Konva 自定义标签 api，这是解决我的问题的最佳方法。谢谢！
我认为随着代码的扩展，您可能希望存储更复杂的关系，这意味着现在采用这种类型的方法将为您未来提供更多的灵活性。
其实这个方法对于以后的扩展非常有效。但是我的想法是，如果Konva.shpe可以直接添加一个自定义对象，程序就不需要每次都遍历数组，只要鼠标移到形状上就听，效率会更高。