Question

我正在将Konva与Konva-React配合使用，以绘制一个简单的自定义形状，该形状由两条垂直线和一条圆弧连接而成。

custom shape的API文档指出，我们可以使用渲染器来访问HTML5 Canvas上下文。这样，我创建了一个使用Konva.Canvas渲染器显示我的形状的绘图函数，但是该形状未按预期进行渲染。参见：https://codesandbox.io/s/react-konva-custom-shape-demo-hs3y4。

在使用HTML5 Canvas https://codepen.io/anon/pen/voYNLR时，这可以正确呈现。

经过几次排列（使用打字稿）后，我设法生成了一条错误消息，突出显示了arcTo命令的问题：

 Expected 6 arguments, but got 5.  TS2554

但是https://www.w3.org/TR/2dcontext/特别声明arcTo具有5个参数：

context.arcTo(x1, y1, x2, y2, radius)

在进一步调查中，Context.d.ts指出：

         arc(a0: any, a1: any, a2: any, a3: any, a4: any, a5: any): void;   
         arcTo(a0: any, a1: any, a2: any, a3: any, a4: any, a5: any): void; <== Note 6 args (the same as arc)

在nodemodules \ konva \ lib \ Context.js中arcTo的定义我认为是一个错误：

function Context(canvas) {
this.canvas = canvas;
this._context = canvas._canvas.getContext('2d');
……
Context.prototype.arc = function (a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
};
Context.prototype.arcTo = function (a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
};

请注意，arcTo的原型实现使用_context.arc代替arcTo。对于这些发现的任何验证，或者如果有此意图的话，我将不胜感激。

我在这里创建了一个带有经过修改的arcTo签名的fork：https://github.com/piriej/konva（警告：正在进行中）

亲切问候杰夫

Answer 1

这看起来像是将上下文方法包装在Konva代码库中的错误。解决方法是，您可以直接致电arcTo：

 context._context.arcTo(150, 20, 150, 70, 50);

演示：https://codesandbox.io/s/react-konva-custom-shape-demo-4u6kz

使用arcTo的React-Konva自定义形状无法正确渲染

1 个答案: