我正在尝试在javascript中实现一个简单的绘画工具,以便通过SVG进行徒手绘制。对于徒手,我在绘图时使用折线,一旦绘图完成,我将尝试像Google绘图一样从中绘制出一条曲线以平滑曲线。
当然,到目前为止,我还没有为实际的或什至没有尝试过的平滑逻辑设计过。我目前使用的是在折线的每四个点中取一个来创建一条曲线。这可能是一个不好的方法,但这是我认为值得尝试的第一件事。

<path stroke="black" opacity="1" stroke-width="10" shape-rendering="geometric-precision" fill="none" d="M 1452 559 C 1452 556 1317 518 1308 521 1296 528 1289 537 1281 542 1277 549 1272 559 1267 566 1265 578 1265 585 1263 592 1263 599 1260 606 1258 616 1253 627 1248 639 1244 656"> </path>

但是在chrome中我遇到了这个错误
Problem parsing d="M 1452 559 C 1452 ...
但这正在SVG上呈现所有内容。我只想知道为什么会发生这种情况,而且仅适用于Chrome。

最佳答案

这不是铬的错误。 Bezier曲线需要2个控制点和终点,这意味着除了起点之外的最少3个点,对于一系列曲线,点的数量应为3的倍数,因为曲线的起点是的终点以前。
当这些点不在3的倍数中时,chrome会引发错误,但仍会呈现错误。

10-06 02:48