KineticJS - Drawing a complex shape

Question

I would like to create a complex shape in KineticJS.

I tried many way and searched a lot and I came to the conclusion that I should create a new Kinetic.Shape with the content. But when I do, the shape is created but with no fill.

It is all black.

Here's my code:

var complexShape = new Kinetic.Shape({
       drawFunc: function(){
       <?php include_once "script/dude.js" ?>
    }
 });

//Add the shape to the layer
layer.add(complexShape);

Part of the content of "dude.js": (the whole thing is about 4000 lines)

  var ctx = this.getContext();
  // calque1/Groupe
  ctx.save();

  // calque1/Groupe/Groupe
  ctx.save();

  // calque1/Groupe/Groupe/Trac
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(325.6, 98.6);
  ctx.bezierCurveTo(322.3, 86.4, 322.7, 73.7, 326.7, 60.6);
  ctx.bezierCurveTo(317.3, 47.6, 309.7, 39.8, 303.7, 37.0);
  ctx.bezierCurveTo(295.8, 42.3, 290.8, 61.0, 288.7, 93.1);
  ctx.bezierCurveTo(283.5, 71.4, 282.5, 51.1, 285.7, 32.0);
  ctx.bezierCurveTo(280.5, 22.3, 275.1, 14.8, 269.5, 9.5);
  ctx.bezierCurveTo(265.6, 5.8, 261.7, 3.1, 257.6, 1.5);
  ctx.bezierCurveTo(256.8, 4.1, 256.0, 6.8, 255.3, 9.5);
  ctx.bezierCurveTo(249.2, 31.9, 247.5, 53.9, 250.1, 75.5);
  ctx.lineWidth = 3.0;
  ctx.strokeStyle = "rgb(75, 39, 111)";
  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  ctx.stroke();

Result Normal Canvas vs KineticJS:

https://i.stack.imgur.com/cGduj.jpg

score 0 · Answer 1 · answered Nov 15 '13 at 19:26

Kinetic.Shape gives you a wrapper around a canvas context, not an actual html canvas context.

To execute a stroke/fill, you call this "magic" method inside your drawFunc

This magic method then calls fill() and stroke() on the actual context.

// both fill and stroke

context.fillStrokeShape(this);

You have another problem, however.

A single Kinetic.Shape will only do 1 fill and stroke within the drawFunc.

Therefore, your complex shape with multiple fills and strokes won't work.

You have at least 2 alternatives:

Use a group containing multiple Kinetic.Shape objects.
"Cheat" by getting the actual canvas context: var ctx=this.getContext()._context

Thanks Mark ! The "cheat" work but I don't want to do it this way, not so clean and I have some bug with it. I may use a group of shapes. — mykadam, Nov 18 '13 at 15:48

score 0 · Accepted Answer · answered Nov 16 '13 at 22:07

You're not using the Shape class correctly. You need to access the Kinetic context object passed into your drawing function. Also, as Mark pointed out, you need to use the Kinetic.Context methods to handle fills and strokes. The shorthand notation is to use context.fillStrokeShape(this) at the end of your drawing function. Take a look at this tutorial:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

Alternatively, you could also use the Path plugin which allows you to define your shape with an SVG path. Here's a tutorial on that:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/

Well, I understand now ! It might take me a while to create all these shapes. Thanks Eric ! — mykadam, Nov 18 '13 at 15:47

KineticJS - Drawing a complex shape

2 Answers2