0

I am writing an app in which I have to draw a lot of draggable quadratic curves.

I am using Kinetic.Shape for this (KineticJS 4.4.3).

Since the performance is not great I tried to analyze and optimize the code and found out that the drawFunc function is executed twice. Look at the attached Demo Code. 

var stage = new Kinetic.Stage({
    container: 'kinetic',
    width: 400,
    height: 300
});

var curveLayer = new Kinetic.Layer();

var line = new Kinetic.Shape({
    drawFunc: function (canvas) {
        console.log("drawFunc executed");
        var context = canvas.getContext();
        context.beginPath();
        context.moveTo(10, 10);
        context.quadraticCurveTo(95, 100, 200, 10);
        canvas.stroke(this);
    },
    strokeWidth: 10
});

curveLayer.add(line);
stage.add(curveLayer);

If you run the script there will be 2 times "drawFunc executed" in the console.

I do not understand why and I ask myself if there is any better way to do it.

The Link to the Fiddle: http://jsfiddle.net/solitud/ZpU4J/9/

The Link to my project: http://modulargrid.net/e/patches/view/92

solitud
  • 683
  • 5
  • 15

1 Answers1

0

KineticJS always creates a non-visible buffer canvas that it uses for drags, etc.

You are seeing drawFunc execute once for that buffer canvas and once for your visible canvas.

No way to eliminate that 2X drawing.

Looking at your project link, I'm guessing that the user creates connections into various receptors by visually dragging the plugs. No way to make that more efficient.

But, once any connection is complete, you can greatly speed redrawing of that connector by caching it to an image: connector1.toImage( ... );

Redrawing your image-cached "connectors" create much less performance penalty than redrawing quad-beziers.

markE
  • 102,905
  • 11
  • 164
  • 176
  • Thanks a lot, that clears things up. I will try the image caching approach. If I understand correctly I have to convert an image back to a shape object, when the user interacts with that image (hover, click..)? Is there a best practice/tutorial available? – solitud May 10 '13 at 09:28
  • Beziers are costly to draw because each point along the curve must be calculated every redraw. Your 15+ cables times 100+ calculated points on each cable = performance penalty! I would convert any Bezier “cable” that’s already in position to an image, but every "plug" circle would remain a draggable kinetic object. If a plug starts dragging, then make the cable a "live" draggable Bezier. That way you would redraw 15+- stationary cable images (inexpensive redraws) instead of redrawing that many "live" beziers (expensive redraws). – markE May 10 '13 at 17:23
  • I will try this, thanks. The plugs and cables are already separated on different layers, so that could help. – solitud May 11 '13 at 18:30