【发布时间】：2016-01-21 08:44:22
【问题描述】：
目前我有来自 Blindman67 的 fiddle，它绘制了 Golden spiral 图 1（见下图）。
function renderSpiral(pointA, pointB, turns){
var dx, dy, rad, i, ang, cx, cy, dist, a, c, angleStep, numberTurns, nTFPB, scale, styles;
// clear the canvas
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height)
// spiral stuff
a = 1; // the larger this number the larger the spiral
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 = 2; // 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);
// 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 requiered.
scale = dist / rad;
// ajust the number of turns so that the spiral fills the canvas
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
// 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 requiered
// ready to draw
ctx.beginPath();
ctx.moveTo(0, 0) // start at center
ctx.lineTo((pointB.x-pointA.x)*(1/scale),(pointB.y-pointA.y)*(1/scale) ); // add line
ctx.stroke(); // draw it all
// Now draw the sporal. 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 requiered
// 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(0, 0) // start at center
}else{
ctx.lineTo(dx * rad, dy * rad ); // add line
}
}
ctx.stroke(); // draw it all
});
ctx.setTransform(1,0,0,1,0,0); // reset tranfrom to default;
}
我想要得到的是图 2（见下图）。
第一季度。 我怎样才能改变我的螺旋线，使线AB 将适合第一个和第二个螺丝之间，而A 是螺旋的开始？
您也可以参考我之前的question 以更好地了解我的问题。
【问题讨论】：
-
@Spektre 如果您将图 1 和图 2 进行比较，那么您可以找出问题所在。
-
A 和 B 是创建螺旋所依赖的线的点
-
这并不能解释任何事情。 1.左图与您的输出不对应。 2. 你想要有
|AB|距离的螺旋螺丝，这很明显，但是|AB| 是什么？它不是恒定的（至少不是在图像中，因为您只显示 2 个螺钉，所以无论如何我可能是错的，您应该指定这个......）那么它到底是什么？它如何取决于从螺旋开始的角度或距离等......如果没有这个，你的问题就无法回答 -
@Spektre 抱歉不清楚。 A点也将是螺旋的起点。基本上我唯一的问题是如何使螺旋图从点 A 开始，这样线 |AB|只会在螺旋处相交两次。
-
螺旋和
|AB|是否相互关联？例如AB是否正常在A处螺旋？什么是螺旋方程？如果你改变AB的大小，螺旋的形状会改变还是只是旋转？
标签： javascript math geometry 2d computational-geometry