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

结果 Normal Canvas 与 KineticJS：

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

Answer 1

您没有正确使用 Shape 类。您需要访问传递给绘图函数的 Kinetic 上下文对象。此外，正如 Mark 指出的，您需要使用 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 为您提供了一个围绕画布上下文的包装器，而不是实际的 html 画布上下文。

要执行描边/填充，您可以在 drawFunc 中调用此“魔术”方法

这个神奇的方法然后在实际上下文中调用 fill() 和 stroke()。

// both fill and stroke

context.fillStrokeShape(this);

不过，你还有另一个问题。

单个 Kinetic.Shape 只会在 drawFunc 内进行 1 次填充和描边。

因此，具有多个填充和笔划的复杂形状将无法工作。

您至少有 2 个选择：

1. 使用包含多个 Kinetic.Shape 对象的组。

2. 通过获取实际画布上下文“作弊”：var ctx=this.getContext()._context