2

我最近一直在开发一个涂鸦应用程序，只是为了好玩。在尝试了许多方法用鼠标给出的样本点绘制平滑曲线之后，我已经确定了使用二次曲线的东西。

我必须承认，我对这些曲线的理解不是最佳的，但我想我理解它们是如何工作的。我无法理解的是，当我绘制一条上升然后突然下降的曲线时，曲线的峰值不再是圆形的（它看起来很平坦）。

一个演示可以更好地理解我在说什么：链接到 JCanvas 沙箱

如果删除曲线的最后一部分（从 cx11 到 y15）：链接到另一个 JCanvas 沙箱。看起来不错，但是当你添加下一个控制点和结束点时，你会得到这个奇怪的效果。

注意：我没有使用 JCanvas，但它有相同的错误并且沙箱很方便。我想它来自我得到的坐标，但我无法解释，也找不到解决方法/黑客让它看起来圆润......

对于那些不关心沙盒的人，这里是导致问题的坐标的简短版本：

x1：216，y1：98，cx1：216，cy1：97，x2：216，y2：98，cx2：216，cy2：99，x3：215，y2：103，

关于为什么的任何想法？数学的东西是受欢迎的。我已经对这个问题进行了一些搜索和阅读，但没有找到任何类似的东西。

--

更新

正如 Simon 指出的那样，我使用的是 Chrome 16，并且我已经使用 Firefox 4 和最新的 Safari 测试了该示例，并且存在错误。我尝试使用 Opera，它看起来不错。

我对此感到非常沮丧，因为该错误也出现在 iPad 上，而我正在尝试做一个移动网络应用程序，所以我有点卡住了。

任何解决方法/黑客的想法？

4

1 回答 1

1

找到了解决方法。这是那些愚蠢的 as-blah-approaches-zero bug 之一，我真的不知道它们的正确名称。如果两点之间的连接是一条非常小的垂直线并且Safari会感到困惑，那么就很难绕过一个角落。

在您的问题所在的位置，有一条 1 像素高的垂直线曲线需要进行四舍五入。

如果一条二次曲线和下一条二次曲线的 X 目的地相同，则 safari 会给您带来问题。所以这很糟糕：

ctx.beginPath();
ctx.moveTo(161,178);
ctx.quadraticCurveTo(215, 102, 216, 100);
ctx.quadraticCurveTo(216, 98, 216, 98);
ctx.quadraticCurveTo(216, 99, 215, 103); // I have the same X as the previous quadratic
ctx.quadraticCurveTo(213, 107, 211, 120);
ctx.quadraticCurveTo(209, 133, 209, 145);
ctx.stroke();

在这里看到它：http: //jsfiddle.net/Ws6UY/

所以如果我们只是改变这个值最小的数量：

ctx.beginPath();
ctx.moveTo(161,178);
ctx.quadraticCurveTo(215, 102, 216, 100);
ctx.quadraticCurveTo(216, 98, 216, 98);
ctx.quadraticCurveTo(216.01, 99, 215, 103); // 216.01 is not the same X as 216!
ctx.quadraticCurveTo(213, 107, 211, 120);
ctx.quadraticCurveTo(209, 133, 209, 145);
ctx.stroke();

在这里看到它：http: //jsfiddle.net/Ws6UY/1/

多么愚蠢！要让 safari/iOS 浏览器正常工作，您所要做的就是确保 x（可能还有 y）值与最后一点不同。

于 2011-12-28T19:46:19.573 回答