Question

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

}

虽然它是大代码，但我只是粘贴在这里只是创建一个盒子。任何人都可以给我任何方式，我怎么能解决这个缓慢的问题。

任何帮助将不胜感激。

谢谢

Answer 1

更新到最新的KineticJS 4.3，随着新版本的推移，对象的绘制速度已经大大提高。

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js

html5与kineticjs画布绘图应用程序突然变慢

1 个答案: