Question

我正在使用 KineticJS ，我正在为图层添加一些矩形：

var kNode = new Kinetic.Rect({
    x: 300,
    y: 300,
    cornerRadius: 8,
    fill: '#ffffff',
    strokeWidth: 1,
    stroke: '#cccccc',
    width: 200,
    height: 100,
    draggable: true
});

    kNode.customAttrs = new Object(); // attributes that I need as reference
    kNode.customAttrs.chosen = 0;

我需要：

为每个矩形指定自定义ID （GUID）。我试过 kNode.id（“idaa23434”）（如文档中所述：http://kineticjs.com/docs/Kinetic.Rect.html）但它告诉我该对象没有方法id（）。
我需要获得一个ARRAY，其中所有 Rect 的属性 kNode.customAttrs.chosen （我添加了利用Rect是一个对象）是== 1通常我使用jQuery选择器 $（'。node [selected =“1”]'）但由于Rect不是DOM元素，我不能这样做。
有没有办法让对应的DOM元素到Rect？我尝试在Chrome开发者工具中查看HTML，但没有显示DOM元素。

提前感谢任何线索。

修改

我不明白为什么使用

console.log(stage);

jsfiddle 我得到此输出（Chrome开发者控制台）：

Kinetic.Stage {nodeType: "Stage", children: Kinetic.Collection[1], _id: 1, eventListeners: Object, attrs: Object…}

但在我的应用中，我得到:(代码相同）

Kinetic.Stage {children: Kinetic.Collection[1], _id: 1, eventListeners: Object, attrs: Object, cache: Object…}

事实上，如果我在jsfiddle上使用 stage.find（）它可以工作，但在我的应用程序中没有（* 未捕获的TypeError：对象[对象对象]没有方法'查找'* ）。

有任何线索吗？我在使用canvas元素时遇到了同样的问题，因为我得到了 prevObject ，但没有对象本身。

Answer 1

您可以使用以下方式获取舞台中的所有矩形：

rects = stage.find("Rect");
rects.each(function (node) {
//do what u want
}

我认为这将解决您的问题

Answer 2

在KineticJS中，id类似于html id：

// SET

kNode.setId(123);

// GET
// 
// specify #123 to get an id
// .find returns a set so use [0] to get the first element

var id123 = stage.find("#123")[0];

id123.setFill("green");

在KineticJS中，名称类似于html类：

// SET

kNode.setName("chosen1");

// GET
// specify .chosen1 to get a name

var chosen1=stage.find(".chosen1");

chosen1.each(function(i){
    i.setFill("blue");
});

演示：http://jsfiddle.net/m1erickson/vnEPL/

KineticJS：如何获得所有Rect / etc。以及如何设置自定义ID？

2 个答案: