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

Question

我正在使用 Konva with Konva-React 绘制一个简单的自定义形状，该形状由两条由弧连接的垂直线组成。

custom shape states that we can use the renderer to access the HTML5 Canvas context. As such I have created a drawing function that uses the Konva.Canvas renderer to display my shape, however the shape does not render as expected. See: https://codesandbox.io/s/react-konva-custom-shape-demo-hs3y4 的 API 文档。

这在使用 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 签名的分支：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 自定义形状渲染不正确

React-Konva Custom Shape using arcTo renders incorrectly

konvajs

konvajs-reactjs