キナティック JS を使用してキャンバス描画アプリケーションを構築しています。現在はこちら
182.19.26.90/kjs/
これは、ボックスを選択してドラッグすると、マウスのドラッグに従って長方形が作成されるように機能します。しかし、長方形の数が増えると、アプリケーションは非常に遅くなります。以下は私のコードです
$(stage.getContent()).bind('mousedown',function(){
isMouseDown = true;
initial_x = stage.getMousePosition().x;
initial_y = stage.getMousePosition().y;
stroke = 1;
rect = new Kinetic.Rect({
x: initial_x,
y: initial_y,
width: 0,
height: 0,
stroke: "black",
strokeWidth: stroke,
name: 'rect-'+Math.random(1000)
});
rect.setDetectionType("path");
rect.on('click', function(){
if(isPointer){
removeAnchor();
addAnchor(this.getX(), this.getY(), "tl");
addAnchor(this.getX()+this.getWidth(), this.getY(), "tr");
addAnchor(this.getX(), this.getY()+this.getHeight(), "bl");
addAnchor(this.getX()+this.getWidth(), this.getY()+this.getHeight(), "br");
currSel = this.getName();
}
})
rect.on('mousemove', function(){
if(isPointer) {
document.body.style.cursor = 'move';
this.setStroke("blue");
this.draggable(true);
layer.draw();
}
})
rect.on('mouseout', function(){
if(isPointer) {
document.body.style.cursor = 'default';
this.setStroke("black");
this.draggable(false);
layer.draw();
}
})
rect.on('dragstart', function(){
removeAnchor();
})
rect.on('dragend', function(){
addAnchor(this.getX(), this.getY(), "tl");
addAnchor(this.getX()+this.getWidth(), this.getY(), "tr");
addAnchor(this.getX(), this.getY()+this.getHeight(), "bl");
addAnchor(this.getX()+this.getWidth(), this.getY()+this.getHeight(), "br");
currSel = this.getName();
})
});
$(stage.getContent()).bind('mousemove',function(){
if(isMouseDown){
last_x = stage.getMousePosition().x;
last_y = stage.getMousePosition().y;
width = last_x - initial_x;
height = last_y - initial_y;
rect.setHeight(height);
rect.setWidth(width);
layer.add(rect);
stage.add(layer);
}
});
$(stage.getContent()).bind('mouseup',function(){
isMouseDown = false;
});
}
大きなコードですが、ボックスを作成するだけでここに貼り付けました。どうすればこのスローダウンの問題を克服できるか、誰か教えてください。
どんな助けでも大歓迎です。
ありがとう