Question

目前我正在查看此代码，但无法弄清楚错误。

 function fibNumbers() {
    return [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89]
}

function continiusFib(a) {
    var b = fibNumbers(),
    c = Math.floor(a),
    d = Math.ceil(a);
    if (d >= b.length)
        return null;
    a = Math.pow(a - c, 1.15);
    return b[c] + (b[d] - b[c]) * a
}

function drawSpiral(pointA, pointB) {
    var b = pointA;
    var c = pointB;
    ctx.translate(b.x, b.y);
    b = Math.sqrt(((c.x - b.x) * (c.x - b.x)) + ((c.y - b.y) * (c.y - b.y)));
    d = 1 / Math.sqrt(((c.x - b.x) * (c.x - b.x)) + ((c.y - b.y) * (c.y - b.y)));
    c = Math.acos(c.x - b.x);
    0 > Math.asin(c.y - b.y) && (c = 2 * Math.PI - c);
    ctx.rotate(c);
    ctx.scale(b / 5, b / 5);
    var d = Math.PI / 100;
    ctx.moveTo(0, 0);
    for (var e = 0; e < 50 * (fibNumbers().length - 1) ; e++) {
        var f = e * d, g = continiusFib(e / 50),
        h = Math.cos(f) * g,
        f = Math.sin(f) * g;
        ctx.lineTo(h, f);
    }
    ctx.scale(5 / b, 5 / b);
    ctx.rotate(-c);
    //ctx.stroke();
}

我想要的是绘制与Golden Spiral不同的Fibonacci Spiral

我也有question作为其他参考。

Answer 1

这就是我做的。要做的是找到从点A到B的角度的螺旋半径，然后缩放螺旋以适应。

该函数将画布上的螺旋渲染为以pointA为中心并与pointB相交。它使用ctx.setTransform来定位螺旋以适应约束，或者你可以使用比例和中心偏移来转换siral点并保持默认的画布转换（包括你正在绘制其他东西）;

注意事项

如果没有解决方案，则无法绘制pointB === pointA。
如果pointA远远超出画布，我可能不会画画（我没有测试了。）。
总是从中心抽出来。不考虑削减螺旋以外的地方。

所以代码。（更新）

// Assume ctx is canvas 2D Context and ready to render to
var cx = ctx.canvas.width / 2;
var cy = ctx.canvas.height / 2;
var font = "Verdana";       // font for annotation
var fontSize = 12;          // font size for annotation
var angleWind = 0;
var lastAng;

function getScale(){ // gets the current transform scale
    // assumes transform is square. ie Y and X scale are equal and at right angles
    var a = ctx.currentTransform.a;  // get x vector from current trans
    var b = ctx.currentTransform.b;
    return Math.sqrt(a * a + b * b);  // work out the scale    
}

// Code is just a quicky to annotate line and aid visualising current problem
// Not meant for anything but this example. Only Tested on Chrome
// This is needed as the canvas text API can not handle text at very small scales
// so need to draw at unit scale over existing transformation
function annotateLine(pA, pB, text, colour, where){  
    var scale, size, ang, xdx, xdy, len, textStart, ox, oy;

    scale = getScale(); // get the current scale
    size = fontSize;  // get font size

    // use scale to create new origin at start of line
    ox = ctx.currentTransform.e + pA.x * scale ;
    oy = ctx.currentTransform.f + pA.y * scale;

    // get direction of the line
    ang = Math.atan2(pB.y - pA.y, pB.x - pA.x);
    xdx = Math.cos(ang); // get the new x vector for transform
    xdy = Math.sin(ang);

    // get the length of the new line to do annotation positioning
    len = Math.sqrt( Math.pow(pB.y - pA.y, 2) + Math.pow(pB.x - pA.x, 2) ) * scale;

    ctx.save();  // save current state

    //Set the unit scaled transform to render in
    ctx.setTransform(xdx, xdy, -xdy, xdx, ox, oy); 

    // set fint
    ctx.font= size + "px " + font;

    // set start pos
    textStart = 0;
    where = where.toLowerCase();  // Because I can never get the cap right
    if(where.indexOf("start") > -1){
        textStart = 0;  // redundent I know but done
    }else
    if(where.indexOf("center") > -1 || where.indexOf("centre") > -1 ){ // both spellings 
        // get the size of text and calculate where it should start to be centred
        textStart = (len - ctx.measureText(text).width) / 2;
    }else{
        textStart = (len - ctx.measureText(text).width);
    }
    if(where.indexOf("below") > -1){  // check if below
        size = -size * 2;
    }
    // draw the text
    ctx.fillStyle = colour;
    ctx.fillText(text, textStart,-size / 2);    

    ctx.restore(); // recall saved state


}

// Just draws a circle and should be self exlainatory 
function circle(pA, size, colour1, colour2){
    size = size * 1 / getScale();
    ctx.strokeStyle = colour1;
    ctx.fillStyle = colour2;
    ctx.beginPath();
    ctx.arc(pA.x, pA.y, size , 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
}

function renderSpiral(pointA, pointB, turns){
    var dx, dy, rad, i, ang, cx, cy, dist, a, c, angleStep, numberTurns, nTFPB, scale, styles, pA, pB;
    // clear the canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // spiral stuff
    c = 1.358456;   // constant See https://en.wikipedia.org/wiki/Golden_spiral
    angleStep = Math.PI/20;  // set the angular resultion for drawing
    numberTurns = 6;  // total half turns drawn

    nTFPB = 0;   //  numberOfTurnsForPointB is the number of turns to point
                     // B should be integer and describes the number off
                     // turns made befor reaching point B

    // get the ang from pointA to B
    ang = (Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) + Math.PI * 2) % (Math.PI *2 );

    // Check for winding. If the angle crosses 2PI boundary from last call
    // then wind up or wind down the number of turns made to get to current
    // solution.
    if(lastAng !== undefined){
        if(lastAng > Math.PI * 1.5 && ang < Math.PI * 0.5 ){
            angleWind += 1;
        }else
        if(lastAng < Math.PI * 0.5 && ang > Math.PI * 1.5 ){
            if(angleWind > 0){
                angleWind -= 1;
            }
        }
    }
    lastAng = ang;  // save last angle

    // Add the windings
    nTFPB += angleWind;

    // get the distance from A to B
    dist = Math.sqrt(Math.pow(pointB.y-pointA.y,2)+Math.pow((pointB.x)-pointA.x,2));
    if(dist === 0){
        return;  // this makes no sense so exit as nothing to draw
    }
    // get the spiral radius at point B
    rad = Math.pow(c,ang + nTFPB * 2 * Math.PI); // spiral radius at point2

    // now just need to get the correct scale so the spiral fist to the
    // constraints required.
    scale = dist / rad;

    while(Math.pow(c,Math.PI*numberTurns)*scale < ctx.canvas.width){
        numberTurns += 2;
    }

    // set the scale, and origin to centre
    ctx.setTransform(scale, 0, 0, scale, pointA.x, pointA.y);

    // make it look nice create some line styles
    styles = [{
            colour:"black",
            width:6
        },{
            colour:"gold",
            width:5
        }
    ];

    // Now draw the spiral. draw it for each style 
    styles.forEach( function(style) {
        ctx.strokeStyle = style.colour;
        ctx.lineWidth = style.width * ( 1 / scale); // because it is scaled invert the scale
                                                    // can calculate the width required
        // ready to draw                               
        ctx.beginPath();
        for( i = 0; i <= Math.PI *numberTurns; i+= angleStep){
            dx = Math.cos(i);  // get the vector for angle i
            dy = Math.sin(i);
            var rad = Math.pow(c, i);  // calculate the radius
            if(i === 0) {                
                ctx.moveTo(dx * rad , dy * rad );        // start at center
            }else{
                ctx.lineTo(dx * rad , dy * rad );  // add line
            }
        }
        ctx.stroke();  // draw it all
    });

    // first just draw the line A-B
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2 * ( 1 / scale); // because it is scaled invert the scale
                                      // can calculate the width required

    // some code to help me work this out. Having hard time visualising solution                                      
    pA = {x: 0, y: 0};                                      
    pB = {x: 1, y: 0};                                      
    pB.x = ( pointB.x - pointA.x ) * ( 1 / scale );
    pB.y = ( pointB.y - pointA.y ) * ( 1 / scale );
    // ready to draw                               
    ctx.beginPath();
    ctx.moveTo( pA.x, pA.y );        // start at center
    ctx.lineTo( pB.x, pB.y );  // add line
    ctx.stroke();  // draw it all

    if(scale > 10){
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 1 * ( 1 / scale); 
        ctx.beginPath();
        ctx.moveTo( 0, 0 );        // start at center
        ctx.lineTo( 1, 0 );  // add line
        ctx.stroke();  // draw it all
    }

    annotateLine(pA, pB, "" + ((ang + angleWind * Math.PI * 2) / Math.PI).toFixed(2) + "π", "black", "centre");
    annotateLine(pA, pB, "" + rad.toFixed(2), "black", "centre below");

    if(scale > 10){
        annotateLine({x: 0, y: 0}, {x: 1, y: 0}, "1 Unit", "blue", "centre");
    }

    circle(pA, 5, "black", "white");
    circle(pB, 5, "black", "white");

    ctx.setTransform(1,0,0,1,0,0); // reset transform to default;
}

var centerMove = 0;
canvasMouseCallBack = function(){
    centerMove += 0.0;
    renderSpiral(
        {
            x:cx+Math.sin(centerMove)*100,
            y:cy+Math.cos(centerMove)*100
        },
        {x:mouse.x,y:mouse.y}
    );
};

希望这会有所帮助。对于额外的水果感到抱歉，但我必须测试它，所以我会把它全部复制为答案。

我为那些希望看到它正在运行的人添加了一个小提琴。 PointA被自动移动（所以当你移动鼠标时看起来有点奇怪），因为我无法添加适当的界面。

<强>更新我已经更新了答案并试图找到更新问题的更好解决方案。不幸的是，我无法满足新的要求，但根据我的分析，我发现这些要求是一个无法解决的问题。也就是说当螺旋角接近零时，尺度（在解中）接近无穷大，渐近线就在PI / 4附近，但因为这只是近似，所以它都变得毫无意义。 A点和B点有一组位置，不能安装螺旋线。这是我的解释，并不代表没有解决方案，因为我没有提供证据。

Fiddle (updated)

Answer 2

在你的函数drawSpiral中，在第四行中执行：

b = Math.sqrt(((c.x - b.x) * (c.x - b.x)) + ((c.y - b.y) * (c.y - b.y)));

因此，b现在应该是标量，但是您尝试访问下一行中的b.x和b.y，这些不再存在：

d = 1 / Math.sqrt(((c.x - b.x) * (c.x - b.x)) + ((c.y - b.y) * (c.y - b.y)));

第6-7行中c再次发生这种情况。这可能就是您的代码无效的原因。

我尝试使用自己的代码。我完全不确定数学，但是我使用@ Blindman67答案中的一些鼠标跟踪代码将我的算法基于你在问题上发布的片段。

螺旋

这是重要的部分。它返回一个带有螺旋点的数组（我使用另一个函数来实际渲染它们）。我们的想法是使用您提供的连续斐波纳契函数绘制螺旋线。它从A点开始并强制缩放，使得一圈的半径是A点和B点之间的距离。它还增加了一个角度偏移，因此一圈的角度是A点和B点之间的角度。

编辑以解决评论：我将for循环更改为while循环，继续绘制直到螺旋达到最大半径。我还更改了一些名称并添加了注释以尝试使算法更清晰。

var getSpiral = function(pA, pB, maxRadius){
    // 1 step = 1/4 turn or 90º    
    var precision = 50; // Lines to draw in each 1/4 turn
    var stepB = 4; // Steps to get to point B

    var angleToPointB = getAngle(pA,pB); // Angle between pA and pB
    var distToPointB = getDistance(pA,pB); // Distance between pA and pB

    var fibonacci = new FibonacciGenerator();

    // Find scale so that the last point of the curve is at distance to pB
    var radiusB = fibonacci.getNumber(stepB);
    var scale = distToPointB / radiusB;

    // Find angle offset so that last point of the curve is at angle to pB
    var angleOffset = angleToPointB - stepB * Math.PI / 2;

    var path = [];    
    var i, step , radius, angle;

    // Start at the center
    i = step = radius = angle = 0;

    // Continue drawing until reaching maximum radius
    while (radius * scale <= maxRadius){

        path.push({
            x: scale * radius * Math.cos(angle + angleOffset) + pA.x,
            y: scale * radius * Math.sin(angle + angleOffset) + pA.y
        });

        i++; // Next point
        step = i / precision; // 1/4 turns at point    
        radius = fibonacci.getNumber(step); // Radius of Fibonacci spiral
        angle = step * Math.PI / 2; // Radians at point
    }    
    return path;
};

Fibonacci序列

生成连续斐波那契数字的代码基本上是你的，但我改了一些名字来帮助我理解它。我还添加了一个生成器函数，因此它可以处理任何数字：

var FibonacciGenerator = function(){
    var thisFibonacci = this;

    // Start with 0 1 2... instead of the real sequence 0 1 1 2...
    thisFibonacci.array = [0, 1, 2];

    thisFibonacci.getDiscrete = function(n){

        // If the Fibonacci number is not in the array, calculate it
        while (n >= thisFibonacci.array.length){
            var length = thisFibonacci.array.length;
            var nextFibonacci = thisFibonacci.array[length - 1] + thisFibonacci.array[length - 2];
            thisFibonacci.array.push(nextFibonacci);
        }

        return thisFibonacci.array[n];
    };

    thisFibonacci.getNumber = function(n){
        var floor = Math.floor(n);
        var ceil = Math.ceil(n);

        if (Math.floor(n) == n){
            return thisFibonacci.getDiscrete(n);
        }

        var a = Math.pow(n - floor, 1.15);

        var fibFloor = thisFibonacci.getDiscrete(floor);
        var fibCeil = thisFibonacci.getDiscrete(ceil);

        return fibFloor + a * (fibCeil - fibFloor);
    };

    return thisFibonacci;
};

点之间的距离和角度

为了使代码更清晰，我使用了几个辅助函数来处理2D点：

var getDistance = function(p1, p2){
    return Math.sqrt(Math.pow(p1.x-p2.x, 2) + Math.pow(p1.y-p2.y, 2));
};

var getAngle = function(p1, p2){
    return Math.atan2(p2.y-p1.y, p2.x-p1.x);
};

整件事：JSFiddle和Updated-to-address-comment JSFiddle

HTML5 Canvas Fibonacci螺旋

2 个答案:

螺旋

Fibonacci序列

点之间的距离和角度