KineticJS - рисование сложной формы

Question

Я хотел бы создать сложную форму в KineticJS.

Я пробовал много способов и много искал, и я пришел к выводу, что я должен создать новую Kinetic.Shape с контентом. Но когда я это делаю, форма создается, но без заполнения.

Все черное.

Вот мой код:

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

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

Часть содержания "dude.js": (все это составляет около 4000 строк)

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

Результат Нормальный Холст против KineticJS:

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

Answer 1

Вы не используете класс Shape правильно. Вам нужно получить доступ к объекту Kinetic context, переданному в вашу функцию рисования. Кроме того, как отметил Марк, вам нужно использовать методы Kinetic.Context для обработки заливок и штрихов. Сокращенная нотация заключается в использовании context.fillStrokeShape (this) в конце вашей функции рисования. Взгляните на этот учебник:

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

В качестве альтернативы, вы можете также использовать плагин Path, который позволяет определить свою форму с пути SVG. Вот урок по этому вопросу:

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

Answer 2

Kinetic.Shape дает вам обертка вокруг контекста canvas, а не фактического контекста холста html.

Чтобы выполнить удар/заливка, вы вызываете этот метод «волшебный» внутри drawFunc

Этот волшебный метод затем вызывает заливки() и инсульт() о фактическом контексте.

// both fill and stroke 

context.fillStrokeShape(this); 

У вас есть другая проблема, однако.

Единственный Kinetic.Shape будет делать только 1 заливку и обводку в drawFunc.

Следовательно, ваша сложная форма с несколькими заливами и штрихами не будет работать.

У вас есть по крайней мере 2 варианта:

1. Используйте группу, содержащую несколько объектов Kinetic.Shape.

2. "Обман", получив фактический контекст холста: var ctx=this.getContext()._context