logo标签列表

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

colorsfillp5.js
3

我正在尝试在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>

这对于颜色来说是有效的，但透明度最终会变成255（100%）。

很不可能alpha是0-255。没有理由这样做。尝试使用浮点数0.5。 - Radio
1
将来请发布一个我们可以运行的 MCVE。对于 P5.js，这意味着包括一个 setup() 和一个 draw() 函数，而不是一个不连贯的代码片段。 - Kevin Workman
Kevin - 好的，我会发一个问题，已经有一段时间了。谢谢。在p5中，alpha是0到255之间的数字。 - Kevin K
4个回答
3

setAlpha()在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>

2
来自参考文献：

如果提供了单个字符串参数，则支持RGB、RGBA和Hex CSS颜色字符串以及所有命名的颜色字符串。在这种情况下，不支持第二个参数作为alpha数值，应使用RGBA形式。

换句话说，您不能在字符串颜色代码中使用alpha值。
您必须使用RGBA字符串或将值分解为它们各自的数字值并使用4-arg fill() 函数。
附注：将来，请发布一个可以运行的MCVE。在P5.js的情况下，这意味着包括setup() 和draw() 函数，而不是一个松散的代码片段。
正如下面的回答所示，您可以使用字符串创建颜色，然后在单独的调用中设置 alpha。 - Charlie Wallace
1
为了将 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>

1
实际上，我弄清楚了。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>

1
我认为最好通过调用setAlpha来设置alpha值，而不是直接访问_array成员。请参见下面的答案。 - Charlie Wallace
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接