0
나는 kinatic JS로 캔버스 그리기 어플리케이션을 만들고 있습니다. 현재는이 내가 박스를 선택하고 내가 드래그 할 때, 사각형은 마우스 드래그에 따라 생성 할 때처럼 작동합니다 여기html5와 kineticjs canvas 그리기 앱이 갑자기 느려짐
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;
});
}
입니다. 아무도 저에게이 느린 문제를 어떻게 극복 할 수 있는지 알려주시겠습니까?
도움이 될 것입니다.
감사 목적의 드로잉 속도가 크게 새로운 릴리스와 시간이 지남에 따라 개선되었습니다로 최신 KineticJS 4.3