KineticJS de Desenho de uma forma complexa

Question

Eu gostaria de criar uma forma complexa em KineticJS.

Eu tentei de várias maneiras e procurei muito e cheguei à conclusão de que eu deveria criar um novo Cinética.Forma com o conteúdo.Mas quando eu faço, a forma é criado, mas sem preencher.

Ele é todo preto.

Aqui está o meu código:

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

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

Parte do seu conteúdo "dude.js":(a coisa toda é de cerca de 4000 linhas)

  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();

Resultado Normal de Lona vs KineticJS:

http://i.imgur.com/bM7ugyC.jpg

Answer 1

Você não está usando a Forma de classe corretamente.Você precisa de acesso a Cinética de contexto do objeto passado para o seu desenho função.Também, como Mark apontou, você precisa usar a Cinética.Contexto de métodos para lidar com os preenchimentos e traços.A notação abreviada é o contexto de uso.fillStrokeShape(este) no final da sua função de desenho.Dê uma olhada neste tutorial:

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

Alternativamente, você também pode utilizar o Caminho de um plugin que permite que você defina sua forma com uma SVG caminho.Aqui está um tutorial sobre isso:

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

Answer 2

Cinética.Forma dá-lhe um wrapper em torno de uma lona contexto, não um real html canvas contexto.

Para executar um acidente vascular cerebral/preenchimento, você chamar isso de "magia" método dentro da sua drawFunc

Esta magia, em seguida, chama o método fill() e stroke() no atual contexto.

// both fill and stroke

context.fillStrokeShape(this);

Você tem outro problema, no entanto.

Um único Cinética.A forma só vai fazer 1 preenchimento e o traço dentro do drawFunc.

Portanto, sua forma complexa com vários preenchimentos e traços não funciona.

Você tem, no mínimo, 2 alternativas:

1. Usar um grupo que contenha vários Cinética.Forma de objetos.

2. "Cheat", obtendo o real lona contexto: var ctx=this.getContext()._context