对于绘图应用程序,我将鼠标移动坐标保存到数组,然后使用lineTo绘制它们.生成的线条不平滑.如何在所有聚集点之间生成单条曲线?
我用谷歌搜索但我只找到了3个绘制线的函数:对于2个样本点,只需使用lineTo.对于3个样本点,quadraticCurveTo,对于4个样本点,bezierCurveTo.
(我尝试在阵列中每4个点绘制一个bezierCurveTo,但这会导致每4个采样点扭结,而不是连续的平滑曲线.)
如何编写一个函数来绘制一个包含5个样本点的平滑曲线?
我正在开发一款适用于iPhone的游戏,它可以在你的角色移动后创造一条路径(运动类似于蛇,但在转向方面是弯曲的).我现在这样做的方法就是将玩家所有的顶点保持在一个数组中,然后在每一帧上画一个圆圈.
我想转而使用贝塞尔曲线.我已经做了很多关于它们的阅读,我对它们的理解非常好,但我对数学并不是很好.我已经明白我应该使用DeCasteljau的算法在特定的t处分割曲线,但我还没有找到使用哪个公式以及如何在代码中实现它.
所以我目前拥有的是t = 1时曲线的所有控制点.现在我只想获得t <1的所有控制点.有人可以给我一个易于理解的数学公式或者这个实现(最好是python或objective-c).也许甚至有一个物体可以在iphone sdk中用来分割曲线?
到目前为止,平滑线上的线程都不是正确的。
如何使用javascript HTML5画布通过N个点绘制平滑曲线?
两者都会导致锯齿状线条。平滑我的意思是使用 x,y 点作为控制点来使线条平滑。这条线不需要经过这些点。它只需要在给定 n 个点的情况下绘制一条平滑的线。
基本上我正在记录每个线段,然后当用户将鼠标悬停时,它会平滑线条。
我已经使用 bezierCurveTo 尝试了我自己的方法,但这只会平滑其他点,然后连接点仍然很粗糙。互联网似乎认为我在寻找什么叫做 B-Spline 曲线。我尝试将线性代数矩阵应用于该问题,但我失败了,哈哈。
这是我能得到的最好的曲线,(图片)。红色的线是“平滑”的线,你可以看到它平滑每隔一个点,但不是连续的。这是使用来自的代码
如何使用javascript HTML5画布通过N个点绘制平滑曲线?
我的代码做同样的事情
http://www.square-bracket.com/images/smoothlines.png
谢谢你的帮助!
我想制作一个'命名的'贝塞尔曲线.我希望它是一个单词命名所以我不必担心自动换行.
我通过P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey)函数制作贝塞尔曲线,我希望在贝塞尔曲线的中间显示一个字符串.但我不知道如何找到曲线的"中间".
现在我的结果看起来像这样(我不知道从哪里开始解决这个问题,所以我更简单的方法就是在曲线的开头打印文本):

但我希望它看起来像这样:

这意味着我需要P1和P2坐标:

对不起油漆,但我还没有我的代码.一旦我掌握它,我会在这里添加它.
以下是绘制曲线的代码:
let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3, // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y}, // distance between objects
r1 = {}, // bezier point 1
r2 = {}; // bezier point 2
if(c.x > 0){
// b is on left
r1 = {
x: g.x + c.x/2,
y: g.y
};
r2 = {
x: b.x - c.x/2,
y: b.y
};
}
else {
// b is on …Run Code Online (Sandbox Code Playgroud)