Processing中网格布局SVG内部形状随机上色问题咨询

一、先修正SVG文件的生成方式 #

你当前生成的SVG只是四条独立线条，没有闭合的可填充路径，因此无法应用填充色。需要用闭合形状生成SVG，示例代码如下：

import processing.svg.*;

void setup() {
  size(100, 100, SVG, "BlockO.svg");
  background(255);
  
  // 绘制闭合方形（作为外框）
  noStroke();
  beginShape();
  vertex(0, 0);
  vertex(100, 0);
  vertex(100, 100);
  vertex(0, 100);
  endShape(CLOSE);
  
  // 绘制内部小三角形（可填充的闭合路径）
  beginShape();
  vertex(25, 25);
  vertex(75, 25);
  vertex(50, 75);
  endShape(CLOSE);
  
  println("Finished.");
  exit();
}

这样导出的SVG包含两个独立的闭合路径，后续才能单独为它们设置颜色。

二、遍历HShape子元素设置随机颜色 #

你当前的代码是给整个HShape对象统一上色，而SVG内部的每个图形是HShape的子元素，需要逐个遍历设置：

修改onCreate回调中的代码，替换原有的d.randomColors(colors.fillOnly())部分：

.onCreate(
  new HCallback() {
    public void run(Object obj) {
      HShape d = (HShape) obj;
      d
        .enableStyle(false)
        .strokeJoin(ROUND)
        .strokeCap(ROUND)
        .strokeWeight(1)
        .stroke(#000000)
        .anchorAt(H.CENTER)
        .rotate( (int)random(4) * 90 );
      
      // 遍历SVG内部所有子图形，逐个设置随机填充色
      for (int i = 0; i < d.getChildCount(); i++) {
        HShape childShape = (HShape) d.getChild(i);
        childShape.fill(colors.random());
        // 若需要随机描边色，可添加：childShape.stroke(colors.random());
      }
    }
  }
)

关键注意点 #

• enableStyle(false)：关闭样式继承，确保每个子图形能独立设置颜色
• 必须保证SVG中的图形是闭合路径（通过endShape(CLOSE)生成），独立线条无法应用填充色
• 若用其他工具（如Illustrator）制作SVG，需确保内部图形是独立路径对象，而非合并的整体

内容的提问来源于stack exchange，提问作者absolutepsyco