在paperjs中绘制圆形线段上的线条

Posted 2021-04-07

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

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

这就是它的结果：

答案

不知道任何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;
}

另一答案

设置另一条路径说半径为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;
}