在处理中，获得与比例无关的恒定笔划宽度

Question

无论当前的 scale() 设置如何，输入到 strokeWidth() 的哪个值会给出一个像素的笔触宽度？

Answer 1

我认为strokeWeight(0) 应该可以工作。这是一个例子：

void setup() {
   size(100,100);
   noFill();
   scale(10);
   // 1st square, stroke will be 10 pixels
   translate(3,3);
   strokeWeight(1);
   beginShape();
   vertex(-1.0, -1.0);
   vertex(-1.0,  1.0);
   vertex( 1.0,  1.0);
   vertex( 1.0, -1.0);
   endShape(CLOSE);
   // 2nd square, stroke will be 1 pixel
   translate(3,3);
   strokeWeight(0);
   beginShape();
   vertex(-1.0, -1.0);
   vertex(-1.0,  1.0);
   vertex( 1.0,  1.0);
   vertex( 1.0, -1.0);
   endShape(CLOSE);
}

Answer 2

Kevin 确实提供了一些好方法。 您的问题并不清楚您对该语言的舒适程度。我的假设（我可能错了）是层方法不清楚，因为您之前可能没有使用过PGraphics。

不过，Kevin 提供的这个选项简单明了：

手动乘以坐标

注意大多数绘图函数不仅需要坐标，还需要尺寸？ 不要使用scale()，但要跟踪用于形状尺寸的乘数浮点变量。手动缩放每个形状的尺寸：

void draw(){
  //map mouseX to a scale between 10% and 300%
  float scale = map(constrain(mouseX,0,width),0,width,0.1,3.0);

  background(255);
  //scale the shape dimensions, without using scale()
  ellipse(50,50, 30 * scale, 30 * scale);
}

您可以将其作为演示运行：

function setup(){
  createCanvas(100,100);
}
function draw(){
  //map mouseX to a scale between 10% and 300%
  var scale = map(constrain(mouseX,0,width),0,width,0.1,3.0);
  
  background(200);
  //scale the shape dimensions, without using scale()
  ellipse(50,50, 30 * scale, 30 * scale);
}

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

另一个答案是问题本身：你会为 strokeWidth() 提供什么价值？如果scale() 正在使笔划变大，但您希望保持外观不变，这意味着您需要在比例增加时使用较小的笔划粗细：粗细与比例成反比：

void draw(){
  //map mouseX to a scale between 10% and 300%
  float scale = map(constrain(mouseX,0,width),0,width,0.1,3.0);

  background(255);
  translate(50,50);
  scale(scale);
  strokeWeight(1/scale);
  //scaled shape, same appearing stroke, just smaller in value as scale increases
  ellipse(0,0, 30, 30);
}

您可以在下面运行：

function setup(){
  createCanvas(100,100);
}
function draw(){
  //map mouseX to a scale between 10% and 300%
  var scaleValue = map(constrain(mouseX,0,width),0,width,0.1,3.0);
  
  background(240);
  translate(50,50);
  scale(scaleValue);
  strokeWeight(1/scaleValue);
  //scale the shape dimensions, without using scale()
  ellipse(0,0, 30, 30);
}

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

Kevin 很耐心，不仅会回答您的问题，还会回答您的客户，他对自己的时间非常慷慨。您需要耐心仔细阅读并理解所提供的答案。如果是这种情况，请自行尝试，然后返回有关澄清的具体问题。这是最好的学习方式。

只需问“我该怎么做？”在没有显示您尝试过的内容以及您对问题背后的想法的情况下，期望 sn-p 复制/粘贴不会让您走得太远，这不是 stackoverflow 的目的。

通过学习、使用可用文档，尤其是首先自己思考问题，您将获得更多收获。你可能不会一开始就解决问题（我知道我当然不会），但推理它并从不同的角度观察它会让你的齿轮继续前进。

始终保持耐心，无论情况如何，从长远来看，它都会对您有好处。

更新也许你的意思是

无论当前的 scale() 设置如何，输入到 strokeWidth() 的哪个值会给出一个像素的笔触宽度？

没有anti-aliasing你怎么画？

如果是这样，您可以通过一行禁用平滑：在setup() 中调用一次noSmooth();。试试上面的示例代码。

Answer 3

无。

scale() 的全部意义在于它可以扩展所有内容。

您可能希望在图层中绘制内容：绘制一个缩放图层，以及一个包含单像素宽度线条的未缩放图层。然后合并这些层。

如果您需要混合图层，例如在缩放的形状顶部的未缩放的线，在另一条缩放的线的顶部，这将不起作用。在这种情况下，您只需在绘制线条之前取消缩放，然后再次缩放以绘制形状。