javascript - P5顶点添加描边权重

Question

在我的代码中，不同的顶点将对齐( map 上的路线)。我想想象是否有更多的人走同一条路线 -> 我想产生更大的笔划。是否有可能“添加”笔画粗细？

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

function draw() {
    strokeWeight(2);
    beginShape();          
    vertex(0,0);
    vertex(500,60);           
    endShape(); 

    noFill();
    strokeWeight(2);
    beginShape();          
    vertex(0,0);
    vertex(500,60); 
    vertex(400,400);
    endShape();  
}

这里有 2 个带有 strokweight(2); 的重叠顶点；我希望重叠部分有更大的笔触。

Answer 1

我认为您可以尝试以下两种方法来实现此目的。

第一个是在描边颜色中使用透明度。它不会使您的描边宽度变厚，但会使重叠的路线突出。我在下面放置了一些代码，您可以将其复制/粘贴到 Processing 中进行尝试。我将描边粗细增加到 4，以使其更易于查看。

第二种方法是将每条行驶路线视为一系列线路或连接，而不是连续的线路。对于点之间的每个连接，计算不同路线行驶的次数，并据此确定您的行程重量。

例如。 A、B、C、D 城市之间的 3 条路线。

• 路线 1:A - B、B - C、C - D
• 路线 2:A - D、D - C
• 路线 3:C - B、B - D、D - C

每个城市连接的出行次数。

• A - B = 1
• B - C = 2
• C - D = 3
• A - D = 1
• B - D = 2

第一种方法快速且简单，第二种方法涉及更多，但更灵活。

// Quick and easy approach using transparency
void setup() {
  size(600, 600);
}

void draw() {
  background(255);
  stroke(0, 75); // black with alpha set to 75
  strokeWeight(4);
  beginShape();          
  vertex(0, 0);
  vertex(500, 60);           
  endShape(); 

  noFill();
  strokeWeight(4);
  beginShape();          
  vertex(0, 0);
  vertex(500, 60); 
  vertex(400, 400);
  endShape();
}