在paperjs中的圆段上画线答案

【问题标题】：drawing lines on circle segments in paperjs在paperjs中的圆段上画线
【发布时间】：2017-12-27 19:11:51
【问题描述】：

我试图使线指向圆的中心 - 或圆形 - 而在下面的代码中，它们显然没有。它们在正确的位置初始化，但在错误的位置结束。应该很容易，但我无法破解它。我如何实现这一目标？

var path = new Path.RegularPolygon({
  center: [100, 100],
  radius: 50,
  sides: 10
});
path.style = {
  fillColor: 'red',
  strokeColor: null
}
path.selected = true;

for(var i = 0; i < path.segments.length; i++){
  spike = new Path();
  spike.add(new Point(path.segments[i].point.x, path.segments[i].point.y));
  spike.add(new Point(path.segments[i].point.x + 10, path.segments[i].point.y + 10));
  spike.strokeColor = 'black';
  spike.strokeWidth = 2.5;
}

这就是它的结果：

【问题讨论】：

标签： javascript geometry paperjs

【解决方案1】：

不知道任何paper.js，但就数学而言，这是一个尝试：

var ctr = {x: 100.0, y: 100.0};
var rad = 50.0;
var spikeLen = 10; 

for(var i = 0; i < path.segments.length; i++){
  spike = new Path();
  var p = { 
    x: path.segments[i].point.x,
    y: path.segments[i].point.y
  };
  spike.add(new Point(p.x, p.y));
  spike.add(new Point(p.x - spikeLen*(ctr.x-p.x)/rad, p.y - spikeLen*(ctr.y-p.y)/rad);
  spike.strokeColor = 'black';
  spike.strokeWidth = 2.5;
}

【讨论】：

我认为我解释得不好。我的目标是让他们向外走，而不是向中心走。否则结果与上面的答案相同。
漂亮。谢谢一堆！

【解决方案2】：

设置另一条路径相同形状的路径 1，半径为 40（50 - 10 = 40。因为你想要 10 的尖峰）为每个点绘制从路径到路径 1 的尖峰

最终代码如下

var path = new Path.RegularPolygon({
  center: [100, 100],
  radius: 50,
  sides: 10
});
path.style = {
  fillColor: 'red',
  strokeColor: null
}
path.selected = true;

/* Add path1  */
var path1 = new Path.RegularPolygon({
  center: [100, 100],
  radius: 40,  // 50 -10 =40
  sides: 10
});
path1.style = {
  strokeColor: 'red'
}

for(var i = 0; i < path.segments.length; i++){
  spike = new Path();
  spike.add(new Point(path.segments[i].point.x,    path.segments[i].point.y));

  /* end point is on path1 */
  spike.add(new Point(path1.segments[i].point.x ,  path1.segments[i].point.y));

  spike.strokeColor = 'black';
  spike.strokeWidth = 2.5;
}

【讨论】：

这也是我最终让它发挥作用的解决方案。但我觉得它不太通用。