在p5.js中是否有一种简单的方法可以绘制透明形状而不将轮廓绘制到该形状上？

问题描述

我试图在p5.js的彩色背景上绘制不透明的形状。因此，我给填充颜色和笔触颜色都指定了一个alpha值。问题在于形状的轮廓部分绘制到了形状上。由于笔触不透明，因此看起来好像有两个轮廓线的颜色不同。这是一个示例：

function setup() {
    createCanvas(60,60);
}

function draw() {
    background(255);

    fill(127,127);
    stroke(50,127);
    strokeWeight(5);

    rect(10,10,40,40);
}

我得到的是this square，它似乎有一个内部的深灰色和一个外部的浅灰色边界框。

有没有一种简单的方法可以防止这种情况的发生？我知道我可以绘制“两次”形状（首先填充，然后再将轮廓画得更远），但是我试图绘制一个相当复杂的多边形，所以我必须调整外形的所有顶点坐标，这很烦人。

我已经尝试了不同的blendModes，但是它们似乎无法解决我的问题。

解决方法

发生这种情况的原因是，笔划粗细为5，它是从形状的边缘沿两个方向绘制的。因此，某些笔触位于形状的内部，而某些笔触位于形状的外部。

我不知道更改此设置的方法。我尝试过与strokeCap和strokeJoin一起玩，但是没有任何解决办法。

我想到的一个选择是绘制一个按比例缩小的形状，其笔划粗细为1。看起来像这样：

let shapeGraphics;

function setup() {
  createCanvas(260,260);
  
  // draw a scaled-down version of the shape
  shapeGraphics = createGraphics(8,8);
  shapeGraphics.fill(127,127);
  shapeGraphics.stroke(50,127);
  shapeGraphics.rect(0,8,8);
}

function draw() {
  background(255);
  noSmooth();
  
  // draw a scaled-up version of the graphics
  image(shapeGraphics,10,40,40); 
}

shape with border

如果这不起作用，那么我能想到的另一种选择是自己计算外边缘并绘制两次形状，就像您提到的那样。

javascript opacity p5.js