我正在用 kinatic 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;
});
}
虽然它是大代码，但我只是粘贴在这里，它只是创建一个框。谁能给我任何方法来解决这个减速问题。
任何帮助将不胜感激。
谢谢