用画布绘制流畅的线条 [英] Drawing smooth lines with canvas
问题描述
到目前为止，平滑线上的线程都不是正确的.
So far none of the threads here on smooth lines are correct.
如何使用 javascript HTML5 画布通过 N 个点绘制平滑曲线?
两者都会导致锯齿状线条.平滑我的意思是使用 x,y 点作为控制点来使线条平滑.这条线不需要经过这些点.它只需要在给定 n 个点的情况下绘制一条平滑的线.
Both result in jagged lines. By smooth I mean using the x,y points as control points to make the line smooth. The line does NOT need to go through the points. It simply has to draw a smooth line given n points.
基本上我正在记录每个线段，然后当用户将鼠标向上移动时，它会平滑线.
Basically I'm recording each line segment, then when the user mouses up, it wil smooth the line.
我使用 bezierCurveTo 尝试了我自己的方法，但这只会平滑每隔一个点，然后连接点仍然很粗糙.互联网似乎认为我在寻找什么叫做 B 样条曲线.我尝试将线性代数矩阵应用于该问题，但我失败了，哈哈.
I've tried my own method using bezierCurveTo but that only smooths every other point, and then the connecting points are harsh still. The internet seems to think what I'm looking for is called B-Spline curves. I tried applying a linear algebra matrix to the problem, but I failed at that lol.
这是我能得到的最好的曲线，(图片).红色线是平滑"线，正如您所看到的，它每隔一点平滑一次，但不连续.这是使用来自
Here is the best curve I can get, (image). The line in red is the "smoothed" line, as you can see it smooths every other point, but not continuous. This is using the code from
如何使用 javascript HTML5 画布通过 N 个点绘制平滑曲线?
我的代码做同样的事情
http://www.square-bracket.com/images/smoothlines.png
感谢您的帮助！
推荐答案
您需要在直线下方的点中保持相同的切线.检查 http://jsfiddle.net/FHKuf/4/.
You need to keep the same tangent in the points bellowing in the line. Check http://jsfiddle.net/FHKuf/4/.
抱歉，今天才注意到您的评论.碰巧正在测试相关的东西并记住了你的问题.碰巧过去我确实写了一些代码来插入一些行.它被称为 Catmull-Rom(只是我用谷歌搜索的参考) 它经过中间控制点.我确实将代码更改为我的测试，并认为您可能对它有一些用处.请参阅 http://jsfiddle.net/FHKuf/6/.
Sorry, just noticed your comment today. Just happened to be testing something related and remembered your question. It happens that in the past I did wrote some code to interpolate some lines. It is called Catmull-Rom(just a ref. that I googleed) it passes by the middle control points. I did changed the code to my test and thought that you may have some use to it. See at http://jsfiddle.net/FHKuf/6/.
这篇关于用画布绘制流畅的线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
