p5 使用十六进制字符串和 alpha 设置填充颜色

Question

我正在尝试对 p5.js 中的颜色使用十六进制值，但我在使用它和同时使用 alpha 时遇到了问题。我想用一个变量设置颜色，用另一个变量设置 alpha。

let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
  createCanvas(200,200);
}
function draw() {
  fill(color(myColor), myAlpha);
  noStroke();
  ellipse(100, 100, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

这适用于颜色，但 alpha 最终为 255 (100%)。

Answer 1

来自the reference：

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

换句话说，您不能将 alpha 值与字符串颜色代码一起使用。

您要么必须使用 RGBA string，要么将值拆分为各自的数值并使用 4-arg fill() 函数。

旁注：以后请post一个MCVE，我们可以运行。在 P5.js 的情况下，这意味着包含一个 setup() 和一个 draw() 函数，而不是一个断开连接的代码片段。

Answer 2

其实，我想通了。 p5 有一个颜色对象。 alpha 存储在 color._array[3] 处的颜色对象中。您首先使用该字符串创建一个颜色对象。然后您可以通过更改 color._array[3] 中的值来更改 alpha，然后将该颜色对象传递给 fill() 方法。

注意：虽然您通常在 p5 中将 alpha 定义为 0-255 之间的数字，但颜色对象在此处将 alpha 存储为 0 到 1 之间的数字。

let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
  createCanvas(200,200);
}
function draw() {
  background(255);
  let c = color(myColor);
  c._array[3] = myAlpha / 255;
  fill(c);
  noStroke();
  ellipse(100, 100, 50, 50);
  ellipse(110, 110, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

Answer 3

setAlpha() 是 documented on p5.Color，取值范围为 0 到 255。

对于您的代码：

let c = color(myColor);
c.setAlpha(myAlpha);
fill(c);

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

var alphaValue = 50;

function draw(){
  var c = color('#FF0000');
  fill(c);
  rect(100,100,100,100);
  c = color('#0000FF');
  c.setAlpha(alphaValue);
  fill(c);
  rect(150,150,100,100);
}

function mouseClicked(){
    if (alphaValue > 50){
     alphaValue = 50;
 } else {
     alphaValue = 255;
 }
}

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

Answer 4

要将 alpha 值合并到十六进制颜色表示中，您只需在颜色代码的末尾再添加两位数字。范围是 0-255，但十六进制为 00-FF。例如：纯红色为 '#FF0000FF'。请参阅下面的更多示例。

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


function draw(){
  fill('#FF0000FF');
  rect(50,50,100,100);
  fill('#00FF0040');
  rect(75,75,100,100);
  fill('#0000FF80');
  rect(100,25,100,100);

}

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

p5 使用十六进制字符串和 alpha 设置填充颜色

p5 set fill color using hex string and alpha

colors

fill

p5.js