我今天要问的是帮助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度,在一条简单的直线上创建一个三角形'凹凸'。
这是我绘制线条的方式:
KochStar.prototype.draw = function(context) {
context.save()
context.beginPath();
context.lineWidth="5";
context.strokeStyle="red";
context.fillStyle = "Yellow";
//iteration 1, left side
context.lineTo(StartPoint.getX(), StartPoint.getY());
context.lineTo(P1.getX(), P1.getY());
context.lineTo(P2.getX(), P2.getY());
context.lineTo(P3.getX(), P3.getY());
context.lineTo(MiddlePoint.getX(), MiddlePoint.getY());
context.stroke();
context.fill();
context.restore();
}
}
我要问的是,每次调用起点和终点时,应用前面的数学运算来自动创建曲线,并继续执行“x”次迭代。
-------------- ---------------- UPDATE
好的,到目前为止我所做的是,它正在通过数组并完成每一点。然而,我真的需要它为迭代部分例如。从A到B之间的A转到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())