7

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

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

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

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

基本上我正在记录每个线段，然后当用户鼠标向上时，它会平滑线。

我已经使用 bezierCurveTo 尝试了我自己的方法，但这只会平滑每隔一个点，然后连接点仍然很刺耳。互联网似乎认为我正在寻找的是所谓的 B 样条曲线。我尝试将线性代数矩阵应用于问题，但我失败了，哈哈。

这是我能得到的最好的曲线，（图片）。红色的线是“平滑”线，正如您所见，它每隔一个点平滑，但不是连续的。这是使用来自的代码

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

我的代码做同样的事情

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

谢谢你的帮助！

4

2 回答 2

3

您需要在线下的点保持相同的切线。检查http://jsfiddle.net/FHKuf/4/。

编辑：

不好意思，今天才注意到你的评论。只是碰巧在测试一些相关的东西并记住了你的问题。碰巧在过去我确实写了一些代码来插入一些行。它被称为Catmull-Rom（只是我在谷歌上搜索的一个参考），它通过中间控制点。我确实将代码更改为我的测试，并认为您可能对它有一些用处。请参阅http://jsfiddle.net/FHKuf/6/。

于 2011-10-25T16:31:53.493 回答
1

我正在探索所有技术，但没有得到任何合适的解决方案来在画布上流畅地自由绘图。然后我简单地使用了具有不同逻辑的 quadraticCurveTo 而不使用原始鼠标点。

我首先计算控制点（中点）并用控制点替换旧的鼠标移动点。我这样做了 2 次，最后将 quadraticCurveTo 应用于最终数组，我得到了超级平滑的绘图。

这是惊人的。我没有使用这个沉重的 paper.js 和其他平滑库就做到了。

这是我的代码：

currentCanvas.beginPath();
        currentCanvas.lineCap = 'round';
        currentCanvas.strokeStyle = "black";
        currentCanvas.lineWidth = "2";
        currentCanvas.moveTo(queue[0].x, queue[0].y);

        //queue is an array of original points which were stored while onmousemove event callback

        var tempQueue1 = [queue[0]];
        for (var i = 1; i < queue.length - 1;  i = i+1) {
            //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) &&  (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){
                var c = (queue[i].x + queue[i + 1].x) / 2;
                var d = (queue[i].y + queue[i + 1].y) / 2;
                //tempQueue.push(queue[i]);
                tempQueue1.push({x:c, y:d});
                //currentCanvas.quadraticCurveTo(queue[i].x, queue[i].y, c, d);
            //}
        }

        var tempQueue2 = [tempQueue1[0]];
        for (var i = 1; i < tempQueue1.length - 1;  i = i+1) {
            //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) &&  (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){
                var c = (tempQueue1[i].x + tempQueue1[i + 1].x) / 2;
                var d = (tempQueue1[i].y + tempQueue1[i + 1].y) / 2;
                //tempQueue.push(queue[i]);
                tempQueue2.push({x:c, y:d});
                //currentCanvas.quadraticCurveTo(queue[i].x, queue[i].y, c, d);
            //}
        }

        var tempQueue = [tempQueue2[0]];
        for (var i = 1; i < tempQueue2.length - 1;  i = i+1) {
            //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) &&  (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){
                var c = (tempQueue2[i].x + tempQueue2[i + 1].x) / 2;
                var d = (tempQueue2[i].y + tempQueue2[i + 1].y) / 2;
                //tempQueue.push(queue[i]);
                tempQueue.push({x:c, y:d});
                //currentCanvas.quadraticCurveTo(queue[i].x, queue[i].y, c, d);
            //}
        }

        for (var i = 1; i < tempQueue.length - 2;  i = i+1) {
            //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) &&  (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){
                var c = (tempQueue[i].x + tempQueue[i + 1].x) / 2;
                var d = (tempQueue[i].y + tempQueue[i + 1].y) / 2;
                currentCanvas.quadraticCurveTo(tempQueue[i].x, tempQueue[i].y, c, d);
            //}
        }

        // For the last 2 points
        currentCanvas.quadraticCurveTo(
        tempQueue[i].x,
        tempQueue[i].y,
        tempQueue[i+1].x,
        tempQueue[i+1].y
        );
        currentCanvas.stroke();
        queue = [];
于 2017-06-28T18:55:29.797 回答