2

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

简单的自定义形状

自定义形状的 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 签名的叉子:https ://github.com/piriej/konva (警告:正在进行中)

亲切的问候杰夫

4

1 回答 1

3

这看起来像是在Konva代码库中包装上下文方法的错误。作为解决方法,您可以arcTo直接调用:

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

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

于 2019-07-19T03:02:30.953 回答