javascript - KineticJS strokeWidth 居中

Question

当您在 Kinetic 中使用 strokeWidth 时，它会在实际点的每一侧增加宽度。因此，换句话说，笔画以通常为 1px 的线为中心，并且该线的宽度从中心向外增长。

因此，例如在下图“A”中，您会看到点位于 (0,0)，但线从该点向外延伸。我需要的是图像“B”之类的东西。

我知道我可以通过将多边形放大 strokeWidth 的差异来实现这一点，但这会导致许多测量结果丢失，我希望有更容易说“向外增长”的说法。

Answer 1

居中对齐是唯一的原生 html Canvas 笔画对齐方式。

偶尔会建议笔画“在” | “出” | “中心”对齐，但到目前为止还没有来自 whatWG:http://old.nabble.com/Canvas-stroke-alignment-tc29205720.html

您可以将多边形置于自定义的动力学形状中。这样您就可以在原始多边形之外绘制第二个“抚摸”多边形。这需要更多的设置工作，但您可以达到您想要的结果。