在paperjs中的圆段上绘制线

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使线指向圆的中心 - 或圆形 - 并且在下面的代码中它们显然不是。他们在适当的位置初始化，但他们在错误的地方结束。应该相当容易，但我无法破解它。我如何实现这一目标？在paperjs中的圆段上绘制线

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（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中的圆段上绘制线 的全部内容， 来源链接： utcz.com/qa/267079.html

回到顶部