在 paperjs 中的圆段上画线

Question

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

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;
}

结果是这样的：

Answer 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;
}

Answer 2

设置另一条路径，比如半径为 40 的相同形状的路径 1（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;
}

在 paperjs 中的圆段上画线

drawing lines on circle segments in paperjs

javascript

geometry

paperjs