相关疑难解决方法(0)

如何使用javascript HTML5画布通过N个点绘制平滑曲线?

对于绘图应用程序,我将鼠标移动坐标保存到数组,然后使用lineTo绘制它们.生成的线条不平滑.如何在所有聚集点之间生成单条曲线?

我用谷歌搜索但我只找到了3个绘制线的函数:对于2个样本点,只需使用lineTo.对于3个样本点,quadraticCurveTo,对于4个样本点,bezierCurveTo.

(我尝试在阵列中每4个点绘制一个bezierCurveTo,但这会导致每4个采样点扭结,而不是连续的平滑曲线.)

如何编写一个函数来绘制一个包含5个样本点的平滑曲线?

javascript bezier canvas spline html5-canvas

114
推荐指数
7
解决办法
10万
查看次数

在画布中平滑用户绘制的线条

我正在使用<canvas>签名形式捕获用户输入,并试图找出如何平滑鼠标输入.

我认为我需要按块处理用户的鼠标移动块并平滑每个块,我不是在超级平滑之后但是锯齿状输入的任何改进都会很好.

谢谢,马克

html5 canvas

8
推荐指数
3
解决办法
1万
查看次数

什么是平滑多个二次贝塞尔曲线的好算法?

我有一个矢量绘图应用程序,用户可以在其中使用多个二次贝塞尔曲线绘制线条。例如,一条曲线可以有 5 个点 - 二次贝塞尔曲线的点 0-2,点 2-4 形成另一个点。如果第一条贝塞尔曲线末端的斜率不等于第二条贝塞尔曲线起点的斜率,则曲线不平滑。

我想包括一个“平滑”按钮,用户可以点击它来自动平滑线条。我想保持原始曲线和平滑曲线之间的整体 MSE 较小,而不是使斜率完美匹配。然而,100% 的准确度并不是必需的,因为它是一个绘图程序——速度更重要。有没有什么好的算法可以做到这一点?我似乎找不到任何参考资料。

algorithm bezier

4
推荐指数
1
解决办法
2668
查看次数

如何“柔化”折线的边缘?

给定一条由多个点组成的线,如何通过添加中间点使线更平滑/更弯曲/更柔和——同时保持原始点完整且不变?

为了说明这一点,我想在此图中从上图转到下图:

在此输入图像描述

请注意,在上图中,如果我们从底部开始,将会有一个更急的右转。然而,在底部图像中,通过添加位于两个点中间的中间点并使用其他线的角度的平均值,使这种急速右转变得“更柔和”一些。(换句话来说,想象一下赛车行驶的路线,因为它不能突然改变方向。)但是请注意,没有一个原始点被“触及”,我只是添加了更多点。

谢谢!!无论如何,我使用 JavaScript 和 Canvas 来实现它。

graphics geometry polygon

3
推荐指数
1
解决办法
2169
查看次数