Dynamically Adding to Path Extremely Slow

[xbrowne]

I've been playing around with freehand drawing using the new DrawComponent and I have it working, however, when drawing a long complex path or adding a lot of sprites to the surface the rendering becomes extremely slow, especially on mobile devices. When it slows down the paths no longer look smooth.

I suspect it has to do with the surface re-rendering all of the sprites (or path entries) every time a mousemove event is fired.. any ideas? Is there a way to only draw the most recent addition to the path or only redraw the last sprite that was added to the surface?

I tried redraw(), but so far the only way I can get the paths to display is by calling surface.renderFrame() after every mousemove event. Thanks in advance..

startPath: function(e) {
    
    this.currentPath = this.surface.add({
        type: 'path',
        stroke: 'black',
        'stroke-width': 5,
        path: []
    });

    this.addPathEntry('M', e.pageX, e.pageY);
},


addToPath: function(e) {
    
    this.addPathEntry('L', e.pageX, e.pageY);
    this.refresh();
},


addPathEntry: function(command, x, y) {
    
    this.currentPath.path.push(command + x + ',' + y);
},


refresh: function() {
    this.surface.renderFrame();
}

[rayman1900]

Hi, I'm with the same problem here. Did you found any solution about this ?

[xbrowne]

Nope, still slow.