如何更改 PIXI.js 中的行上限?

How to change the line cap in PIXI.js?

我正在尝试使用 PIXI.js 在 Graphics 对象上绘制一条圆角线。我使用 moveTo()lineTo() 命令来画线,但这会导致它出现对接角(尖角、方形)。他们的文档说你可以使用 lineStyle() 方法并向它传递一个对象,在那里你可以指定 cap 并将其设置为来自名为 PIXI.LINE_CAP 的枚举的三个值之一。我试过这个:

myGraphics.lineStyle({
    cap: PIXI.LINE_CAP.ROUND
});

我被告知 LINE_CAP 未定义。我从这个 link https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js 导入 PIXI.js,如果我在该文件上执行 ctrl + F,“LINE_CAP”不会出现在任何地方。

我是否需要导入库的另一部分才能访问此枚举?我为 drawTorus() 方法导入了 graphics-extra 文件,但里面也没有 LINE_CAP。我还打印了我的图形对象的 _lineStyle 属性,但那里似乎没有任何 lineCapcap 属性? (他们也不是 lineWidth 或类似的东西)

此外,这可能无关紧要,但我似乎无法使用 lineStyle() 方法做任何事情,甚至无法更改线条的颜色或宽度。整个概念是否已被弃用或者他们只是没有更新他们的文档?如果是这样,我应该如何绘制圆角线?

到目前为止,我一直使用 arc() 方法在末尾放置一个圆帽,效果很好,但我在使用它时遇到了性能问题,我宁愿尽可能避免使用它. (如果我手动放置圆弧,那么 JavaScript 必须进行计算,而我假设更改线帽可以利用 WebGL 来显着加快渲染速度)

Here 是文档谈到这个枚举的地方。也许如果有办法找到这些枚举值中包含的值,我可以直接使用这些值而不是依赖枚举?

看来 LINE_CAP 是在 PIXI v5.3.0 或前后添加的。您使用的版本 (v5.1.3) 于 2019 年 9 月发布,因此建议更新到较新的版本(希望 5.1 和 5.3 之间没有太多(如果有的话)重大更改)。