Canvas KineticJS-绘制复杂形状

我想在KineticJS中创建一个复杂的形状

我尝试了很多方法，搜索了很多，我得出的结论是，我应该用内容创建一个新的动能形状。但当我这样做时，形状被创建，但没有填充

全是黑色的

这是我的密码：

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

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

结果普通画布vs KineticJS：

---

Kinetic.Shape为您提供了围绕画布上下文的包装，而不是实际的html画布上下文

要执行笔划/填充，可以在

drawFunc

然后，这个神奇的方法对实际上下文调用fill（）和stroke（）

// both fill and stroke

context.fillStrokeShape(this);

然而，你还有另一个问题

单个Dynamic.Shape在drawFunc中只能进行1次填充和笔划

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

您至少有两种选择：

使用包含多个动能形状对象的组

通过获取实际画布上下文来“作弊：

var ctx=this.getContext（）。\u context

---

您没有正确使用Shape类。您需要访问传递到绘图函数中的动力学上下文对象。此外，正如Mark指出的，您需要使用Dynamic.Context方法来处理填充和笔划。速记法是在绘图函数的末尾使用context.fillStrokeShape（this）。请看本教程：

或者，您也可以使用Path插件，该插件允许您使用SVG路径定义图形。以下是关于这方面的教程：

---

我现在明白了！创建所有这些形状可能需要一些时间。谢谢你，埃里克！谢谢你，马克！“作弊”的工作，但我不想这样做，不那么干净，我有一些错误与它。我可以使用一组形状。

// both fill and stroke

context.fillStrokeShape(this);