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