Question

我正在使用下面线程中问题作者发布的算法来绘制由某些点阵列定义的N点贝塞尔曲线。

how to draw smooth curve through N points using javascript HTML5 canvas?

这是项目的一个小提琴： http://jsfiddle.net/lee2808/2YVx4/

如果您将其复制并粘贴到js文件中并将第15行的曲线Ctor调用中的“AddImage.png”替换为图像文件，则一切正常！您需要在画布上单击三次才能开始绘制曲线。

我在mousedown + mouseup事件上动态添加点。

无论如何，我的实现一半工作（如果这是一件事情大声笑）。一旦我在画布上放置了前3个点，就会按预期绘制贝塞尔曲线。但是，当我添加更多点时，下一条曲线的起点不在前一条曲线的终点。

似乎从上一点开始。

无论如何，这是我的实施：

Curve.prototype.drawCurve = function(pContext){
    pContext.save();
    if(this.getPoints().length >2){

        pContext.moveTo(this.getPoints()[0].getX(),this.getPoints()[0].getY());
        var i = 1;
        for(i; i < this.getPoints().length-2; i++){

            var modX = (this.getPoints()[i].getX() + this.getPoints()[i+1].getX()) /2;
            var modY = (this.getPoints()[i].getY() + this.getPoints()[i+1].getY()) /2;
            pContext.quadraticCurveTo(this.getPoints()[i].getX(), this.getPoints()[i].getY(),modX,modY);

        }

        if(this.getPoints().length > 2){

            pContext.quadraticCurveTo(this.getPoints()[i].getX(),this.getPoints()[i].getY(), //last control point
                                        this.getPoints()[i+1].getX(),this.getPoints()[i+1].getY());//end point
        }

        pContext.stroke();
    }
    pContext.restore();
};

非常相同。任何人都可以看到我的逻辑中的缺陷吗？我正在尝试生成一系列bezier曲线，这样我就可以设置一个对象的动画来跟随该路径，感兴趣的是我为什么要这样做。

提前致谢！

画布：曲线无法从上一曲线的终点开始

0 个答案: