使用动力学形状从组中选择形状 ID 时遇到问题？答案

【问题标题】：Having trouble selecting id of a shape from a group using Kinetic shape?使用动力学形状从组中选择形状 ID 时遇到问题？
【发布时间】：2013-03-29 06:59:16
【问题描述】：

我无法使用 id 从 group 中选择 shape。这是我的代码笔：http://codepen.io/drixta/pen/AInHL

这是我创建正方形的代码：

function create_square(posr,posc,state,len){
var square = new Kinetic.Rect({
    id : "sqr"+ posr + "," + posc,
    posr: posr,
    posc: posc,
    state : state,
    x: posr*len,
    y: posc*len,
    width: len,
    height: len,
    stroke: 'black',
    strokeWidth: 2,
    fill: 'white'
});
console.log(square.attrs.id);
squareGroup.add(square);
}

从这里一切正常。控制台会打印出每个方格的 id。

sqr0,0 javascript.js:44
sqr0,1 javascript.js:44
sqr0,2 javascript.js:44
sqr0,3 javascript.js:44
sqr0,4 javascript.js:44
sqr0,5 javascript.js:44
sqr0,6 javascript.js:44
sqr0,7 javascript.js:44

但是，根据这个网站：http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shape-by-id-with-kineticjs/

我尝试在程序末尾使用console.log((squareGroup.get('#sqr0,0')[0]).attrs.id)，它显示cannot get attrs of undefined。假设这不起作用。

非常感谢！

PS：这是高亮框的代码：

square.on("mouseover", function(){
square.setFill('blue');
layer.draw();
});
square.on("mouseout", function(){
square.setFill('white');
layer.draw();
});

我将它嵌套在 create_square 函数中，当盒子数量增加时它非常缓慢且无响应，有谁知道我可以在哪里做得更好？

【问题讨论】：

对我来说很好用。

标签： javascript html canvas kineticjs

【解决方案1】：

您的示例在 chrome 上运行良好，没有问题。

提高性能。问题在这里：

square.on("mouseover", function(){
square.setFill('blue');
    layer.draw();
});
square.on("mouseout", function(){
    square.setFill('white');
layer.draw();
});

您调用 layer.draw() 两次 - 它很慢。你可以这样做：

square.on("mouseover", function(){
    square.setFill('blue');
});
square.on("mouseout", function(){
    square.setFill('white');
    setTimeout(function(){layer.draw();});
});

【讨论】：