如何在Java或Processing中将SVG形状拆分为多个形状？

Question

例如，给定一个圆形SVG形状，其上有五个点等距离。我想根据这些点将圆圈分成五个圆弧。在下图中，其中一个弧为红色。我该怎么做呢？特别是，我想使用geomerative库（来自Processing），但也可以使用Java中的其他解决方案。

Answer 1

为什么不使用Processing arc()函数简单地绘制五个弧？ 您只需要为5个部分中的每个部分保持72度角度增量的计数：

int sides = 5;
//360 degrees / 5 sides, but in radians (what arc() likes)
float angleIncrement = TWO_PI / sides;
float diameter = 350;

void setup(){
  size(400,400);
  colorMode(HSB,sides,100,100);
  noFill();
  strokeWeight(30);
  strokeCap(SQUARE);
}
void draw(){
  background(0,0,100);

  for(int i = 0 ; i < sides; i++){
    //72 degrees * each side to which we subtract a 90 degrees offset to first point is towards the top, not the side
    float angle = (angleIncrement * i)-HALF_PI;

    stroke(i,100,100);
    arc(200,200,diameter,diameter,angle,angle+angleIncrement);
  }
}

你可以实际运行这个演示如下：

＆＃13;

＆＃13;

var sides = 5;
//360 degrees / 5 sides, but in radians (what arc() likes)
var angleIncrement;
var diameter = 350;

function setup(){
  createCanvas(400,400);
  colorMode(HSB,sides,100,100);
  noFill();
  strokeWeight(30);
  strokeCap(SQUARE);
  
  angleIncrement = TWO_PI / sides;
}
function draw(){
  background(0,0,100);
  
  for(var i = 0 ; i < sides; i++){
    //72 degrees * each side to which we subtract a 90 degrees offset to first point is towards the top, not the side
    var angle = (angleIncrement * i)-HALF_PI;
    
    stroke(i,100,100);
    arc(200,200,diameter,diameter,angle,angle+angleIncrement);
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>

＆＃13;

＆＃13;

＆＃13;