0

我正在用 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;        
});   

}

虽然它是大代码,但我只是粘贴在这里,它只是创建一个框。谁能给我任何方法来解决这个减速问题。

任何帮助将不胜感激。

谢谢

4

1 回答 1

0

更新到最新的 KineticJS 4.3,因为随着新版本的发布,对象的绘制速度随着时间的推移而大大提高。

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js
于 2013-01-11T16:47:43.680 回答