相关疑难解决方法(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万
查看次数

分割贝塞尔曲线

我正在开发一款适用于iPhone的游戏,它可以在你的角色移动后创造一条路径(运动类似于蛇,但在转向方面是弯曲的).我现在这样做的方法就是将玩家所有的顶点保持在一个数组中,然后在每一帧上画一个圆圈.

我想转而使用贝塞尔曲线.我已经做了很多关于它们的阅读,我对它们的理解非常好,但我对数学并不是很好.我已经明白我应该使用DeCasteljau的算法在特定的t处分割曲线,但我还没有找到使用哪个公式以及如何在代码中实现它.

所以我目前拥有的是t = 1时曲线的所有控制点.现在我只想获得t <1的所有控制点.有人可以给我一个易于理解的数学公式或者这个实现(最好是python或objective-c).也许甚至有一个物体可以在iphone sdk中用来分割曲线?

math bezier split ios4

10
推荐指数
1
解决办法
8569
查看次数

用画布绘制流畅的线条

到目前为止,平滑线上的线程都不是正确的。

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

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

两者都会导致锯齿状线条。平滑我的意思是使用 x,y 点作为控制点来使线条平滑。这条线不需要经过这些点。它只需要在给定 n 个点的情况下绘制一条平滑的线。

基本上我正在记录每个线段,然后当用户将鼠标悬停时,它会平滑线条。

我已经使用 bezierCurveTo 尝试了我自己的方法,但这只会平滑其他点,然后连接点仍然很粗糙。互联网似乎认为我在寻找什么叫做 B-Spline 曲线。我尝试将线性代数矩阵应用于该问题,但我失败了,哈哈。

这是我能得到的最好的曲线,(图片)。红色的线是“平滑”的线,你可以看到它平滑每隔一个点,但不是连续的。这是使用来自的代码

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

我的代码做同样的事情

http://www.square-bracket.com/images/smoothlines.png

谢谢你的帮助!

javascript bezier drawing canvas smoothing

7
推荐指数
1
解决办法
9777
查看次数

如何找到beizer曲线的中间点?

我想制作一个'命名的'贝塞尔曲线.我希望它是一个单词命名所以我不必担心自动换行.

我通过P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey)函数制作贝塞尔曲线,我希望在贝塞尔曲线的中间显示一个字符串.但我不知道如何找到曲线的"中间".

现在我的结果看起来像这样(我不知道从哪里开始解决这个问题,所以我更简单的方法就是在曲线的开头打印文本):

R1

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

R2

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

R3

对不起油漆,但我还没有我的代码.一旦我掌握它,我会在这里添加它.

以下是绘制曲线的代码:

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)

javascript bezier p5.js

7
推荐指数
1
解决办法
252
查看次数

标签 统计

bezier ×4

javascript ×3

canvas ×2

drawing ×1

html5-canvas ×1

ios4 ×1

math ×1

p5.js ×1

smoothing ×1

spline ×1

split ×1