javascript - HTMl5 Canvas 科赫分形

我今天要问的是要提供Koch算法的帮助，以保持不断增加的迭代次数，而不必一次又一次地手动重新执行该过程。这就是到目前为止。

KochStar.prototype.draw = function (context) {

    var StartPoint = new Vector(this.getStart().getX(), this.getStart().getY());
    var MiddlePoint = new Vector(this.getMiddle().getX(), this.getMiddle().getY());
    var EndPoint = new Vector(this.getEnd().getX(), this.getEnd().getY());


    //iteration 1, left side
    var v1 = MiddlePoint.copy();
    v1.subtract(StartPoint);
    v1.divide(3);
    var P1 = StartPoint.copy();
    P1.add(v1);


    var v1R = v1.copy();
    v1R.rotate(-Math.PI/3);
    var P2 = P1.copy();
    P2.add(v1R);

    var v1R2 = v1.copy();
    v1R2.rotate(Math.PI/3);
    var P3 = P2.copy();
    P3.add(v1R2);

当前正在做的是将一个矢量分成三个部分，并将其中的两个部分旋转60度，以在一条简单的直线上创建一个三角形“凸点”。

我要问的是，每次调用起点和终点时，都要应用较早的数学方法来自动创建曲线，并在“ x”次迭代中继续执行此操作。

-------------- UPDATE ----------------

好的，到目前为止，我所做的是遍历数组并完成每个操作。但是，例如，对于迭代部分，我真正需要的是什么。从A开始到A和B之间的B进行此操作。像这样A [C-D-E] B。

接下来，我需要的是从该数组中获取C-D，并将这两点作为我的起点和终点，并在两者之间进行较早的数学运算。

    KochStar.prototype.draw = function (context) {
        var pArrayX = new Array(P1.getX(), P2.getX(), P3.getX());
        var pArrayY = new Array(P1.getY(), P2.getY(), P3.getY());

        var p1ArrayX = new Array(P1a.getX(), P2a.getX(), P3a.getX());
        var p1ArrayY = new Array(P1a.getY(), P2a.getX(), P3a.getY());

        var p2ArrayX = new Array(P1b.getX(), P2b.getX(), P3b.getX());
        var p2ArrayY = new Array(P1b.getY(), P2b.getX(), P3b.getY());

        var iterat;

        context.save()
        context.beginPath();
        context.lineWidth = "5";
        context.strokeStyle = "red";
        context.fillStyle = "Yellow";


    context.lineTo(StartPoint.getX(),StartPoint.getY());
              for (var i = 0; i < pArrayX.length; i++) {
                 var x = pArrayX[i];
                 var y = pArrayY[i];
                 context.lineTo(x, y);
             }

        context.lineTo(MiddlePoint.getX(),MiddlePoint.getY());
             for (var p = 0; p < p1ArrayX.length; p++) {
                var x1 = p1ArrayX[p];
                var y1 = p1ArrayY[p];
                context.lineTo(x1, y1);
            }

        context.lineTo(EndPoint.getX(),EndPoint.getY())
            for (var z = 0; z < p2ArrayX.length; z++) {
                var x2 = p2ArrayX[z];
                var y2 = p2ArrayY[z];
                context.lineTo(x2, y2);
            }
    context.lineTo(StartPoint.getX(),StartPoint.getY())

这是前面提到的，这就是我要达到的目标！
任何帮助都太棒了！


  除了画点之外，您还有其他理由吗？如果只需要绘制画布上下文，则可以获取画布上下文来为您完成所有数学运算。如果需要这些点，请让KochStar构造函数使用一个函数进行所有数学运算，该函数将数组中的每对连续点“递归”化为4个点的数组并将它们连接起来。保留结果数组，并通过调用lineTo在draw中对其进行迭代。 – sq

最佳答案

关于一种方法的建议：


将科赫形中的每条线保持为单个对象。
保持分形的中心点，以便您知道新线将指向哪个方向（中间拆分）
遍历前三行并将其分为三部分（这样就得到了点），在中间插入新点。
使用新点创建新的单独的线对象，中间有两条新线，并删除中间的基线。
迭代完成后，将主数组替换为临时数组，然后重复进行所需的任意多次迭代。


对于每次迭代，一行会生成3条额外的行，但是由于您仅处理行对象，因此无关紧要（就复杂性而言）。

中心点将决定两条新线的方向，您可以将1/3用作两条新线的长度的基数。所有线都连接在相同的端点上。

希望这可以帮助。