Processing 绘制边框/轮廓（即镂空形状）的方法

tags: Processing

想绘制一个类似像框这种内部镂空的形状，类似 Photoshop 里的遮罩效果。“回”字图或“O”字图。尝试了一下。

环境：Processing 3.x

方法1：画线，调整线的宽度

示例代码：

//方法1代码示例

size(200, 200);
noFill();
float w=20;
stroke(255, 0, 0);
strokeWeight(w);
ellipse(width/2, height/2,100,100);
stroke(255);
strokeWeight(1);
ellipse(width/2, height/2,100-w,100-w);
ellipse(width/2, height/2,100+w,100+w);

效果图：

方法2：画轮廓线 beginContour()

Processing 内置提供了轮廓线方法。案例参考：

// code from: https://processing.org/reference/beginContour_.html
size(100, 100);
translate(50, 50);
stroke(255, 0, 0);
beginShape();
// Exterior part of shape, clockwise winding
vertex(-40, -40);
vertex(40, -40);
vertex(40, 40);
vertex(-40, 40);
// Interior part of shape, counter-clockwise winding
beginContour();
vertex(-20, -20);
vertex(-20, 20);
vertex(20, 20);
vertex(20, -20);
endContour();
endShape(CLOSE);

效果：

即 beginShape() 开始画自定义图形，先画外轮廓线，然后 beginContour() 开始画内轮廓线。

注意：外轮廓线，顺时针给坐标。内轮廓线，逆时针给坐标。

[正文结束]

---

[更新记录]
2016-10-14，初建笔记。记录了 storkeWeight 和 beginContour 2种方法