Javascript konvaJS:如何添加自定义标记来区分形状;

Javascript konvaJS:如何添加自定义标记来区分形状;,javascript,html,canvas,konvajs,Javascript,Html,Canvas,Konvajs,我在鼠标移动的基础上画一条线连接两个矩形。我希望一个rect只连接一次,我的想法是用分隔符记录两个rect的id,然后存储在行的id中。但当鼠标移动时,该层上的形状数组将循环一次。效率极低。所以我想问一下,是否有任何方法可以在这些形状中添加一个自定义标记来区分它们。比如rect.isLinked=true/false。我在API文档中没有找到这个方法 有人能帮我吗?谢谢 客观地说,这是一个需要保存一个具有某种价值的事物列表,并且能够有效地查找列表中的实例。这是一个标准的javascript模式

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

有人能帮我吗?谢谢


客观地说,这是一个需要保存一个具有某种价值的事物列表,并且能够有效地查找列表中的实例。这是一个标准的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值,就像指定填充颜色一样。如果您想突出显示线条链接两端的形状,可以使用该方法通过其id获取形状。

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