我正在使用Konva和Konva-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 (警告:正在进行中)
亲切的问候杰夫