0
我正在用kinatic JS構建一個畫布繪製應用程序。目前，它是在這裏html5與kineticjs畫布繪製應用程序變得很慢
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;
});
}
雖然這是很大的代碼，但我只是在這裏粘貼這是剛剛創建一個盒子。任何人都可以請給我任何方式，我怎麼能超過這個緩慢的問題。
任何幫助將不勝感激。
感謝