0

その を使用してshapeからを選択するのに問題があります。これは私のコードペンです: http://codepen.io/drixta/pen/AInHLgroupid

正方形を作成するための私のコードは次のとおりです。

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 関数に入れ子にしましたが、ボックスの数が増えると非常に遅く、応答しなくなりました。

4

1 に答える 1

0

あなたの例はクロムで問題なくうまくいきます。

パフォーマンスを向上させる。ここでの問題:

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

layer.draw() を2回呼び出します-遅いです。あなたはこれを行うことができます：

square.on("mouseover", function(){
    square.setFill('blue');
});
square.on("mouseout", function(){
    square.setFill('white');
    setTimeout(function(){layer.draw();});
});
于 2013-05-08T05:44:42.200 に答える