用画布绘制平滑的线条 [英] Drawing smooth lines with canvas
问题描述
到目前为止，平滑线路上的所有线程都是正确的。
p> 两者都会导致锯齿线。平滑我的意思是使用x，y点作为控制点使线平滑。线不需要经过点。 基本上，我记录每个线段，然后当用户鼠标移动时，它会平滑线条。 / p> 我使用bezierCurveTo尝试了我自己的方法，但只是平滑每个其他点，然后连接点是严厉的。互联网似乎认为我在寻找的是B样条曲线。我尝试应用线性代数矩阵的问题，但我失败了在那个lol。 这是我能得到的最好的曲线，（图像）。红色的线是平滑的线，你可以看到它平滑每个其他点，但不连续。这是使用来自 我的代码做同样的事情 http://www.square-bracket.com/images/smoothlines.png 感谢您的帮助！ 您需要在行下面的点保持相同的切线。检查 http://jsfiddle.net/FHKuf/4/ 。 编辑： 对不起，只是注意到你今天的评论。刚刚碰巧是测试相关的东西，记住你的问题。它发生，在过去，我写了一些代码来内插一些行。它被称为 Catmull-Rom （仅仅是我google了）它通过中间控制点。我没有改变代码到我的测试，并认为你可能有一些用法。请访问 http://jsfiddle.net/FHKuf/6/ 。 So far none of the threads here on smooth lines are correct. how to draw smooth curve through N points using javascript HTML5 canvas? Smooth user drawn lines in canvas 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. 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 how to draw smooth curve through N points using javascript HTML5 canvas? My code does the same thing http://www.square-bracket.com/images/smoothlines.png Thanks for your help! You need to keep the same tangent in the points bellowing in the line. Check http://jsfiddle.net/FHKuf/4/. Edit: 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屋！
