使用 jquery - 点距绘制螺旋线

Question

我正在尝试使用 jquery 从 div 中绘制螺旋线。到目前为止，我已经做了一个常规的螺旋，似乎对我来说效果很好。然而，下一步是我需要它在开始时 div 之间有较大的距离，而在开始时 div 之间的距离较小。我知道我应该添加一个额外的变量来执行此操作，但我不知道如何实现它。

到目前为止，这是我的代码

var radius = 50;
var x0 = 300;
var y0 = 300;
var segment = 50;
var angle = 0;    

for (var i=0; i<=segment; i++){
  angle = angle + (Math.PI * 2) / 30;
  var x=x0+radius*Math.sin(angle);
  var y=y0+radius*Math.cos(angle);
  $("#terrain").append("<div class='drag' style='top:"+ y +"px;left:"+ x +"px;'></div>")
  radius = radius + 5;   
}

jsfiddle

Answer 1

您可以使每个 div 的大小成为半径的函数。七分之一似乎效果不错：

size = radius/7;
$("#terrain")
  .append("<div class='drag' style='top:"+ y +"px;left:"+x+
          "px;width:"+size+"px;height:"+size+"px;'></div>"
         );

Working Fiddle

编辑

根据我们的评论，我现在对问题有了更好的理解。您可以声明一个 distance 变量，它是 div 之间的距离。 angle 将更新为：

angle += distance/radius;

每循环一次，距离就会减少，像这样：

distance -= 1.5;

其余代码几乎保持不变。

Working Fiddle

Answer 2

您可以使用 transform:scale() 调整尺寸

var newitem = $('<div>',{
    'class': 'drag',
    css:{
        top:y,
        left:x,
        transform: 'scale('+ scale +')'
    }
});
$("#terrain").append(newitem);

scale += 0.02;

并且在使用它时，您应该将变换的原点设置在中心（on CSS）。

transform-origin: 50% 50%;

演示在 http://jsfiddle.net/v7avLbej/7/

使用 jquery - 点距绘制螺旋线

drawing spiral using jquery - spot distance

javascript

jquery

spiral