[英]Is there a way to change Hex values into RGB values when given a p5.js color element
I'm rewriting a project of mine after finding out I had to use p5.js instead of jquery.在发现我必须使用 p5.js 而不是 jquery 之后,我正在重写我的一个项目。 The script should take the input of a HTML colour picker which I believe is either a hex or a color element and turn it into the rgb values to change the stroke and fill values.该脚本应接受 HTML 颜色选择器的输入,我认为它是十六进制或颜色元素,并将其转换为 rgb 值以更改笔划和填充值。 I've debugged to the point where I know either this.setColour or this.colourAlpha is returning 255 255 255 despite getting a different hex value.我已经调试到我知道 this.setColour 或 this.colourAlpha 返回 255 255 255 尽管得到不同的十六进制值的地步。 Thanks a bunch.谢谢一堆。
function ColourPalette() {
//make the start colour be black
this.selectedColour = "#000000";
this.alpha = 1
//load in the colours
this.loadColours = function() {
var aColour = document.getElementById("colourInput").value
//set the selected colour to the colourInput calue with current alpha
this.setColour(this.colourAlpha(aColour, this.alpha));
console.log(aColour)
console.log(this.colourAlpha(aColour, this.alpha))
};
this.setColour = function (color){
this.selectedColour = color
//set fill and stroke to selectedColour value
fill(this.selectedColour);
stroke(this.selectedColour);
console.log(this.selectedColour);
//Create hex colour string and pass it into the colourInput element
//to make sure it is set to the currently selected colour
var redHex = red(this.selectedColour).toString(16);
if (redHex.length == 1) {
redHex = "0" + redHex
};
var greenHex = green(this.selectedColour).toString(16);
if (greenHex.length == 1) {
greenHex = "0" + greenHex
};
var blueHex = blue(this.selectedColour).toString(16);
if (blueHex.length == 1) {
blueHex = "0" + blueHex
};
document.getElementById("colourInput").value = "#" + redHex + greenHex + blueHex;
console.log(document.getElementById("colourInput").value)
};
// Creates a new colour with RGB values from a colour and a value from alpha
this.colourAlpha = function(aColour, alpha){
var c = color(aColour);
console.log(c)
return 'rgba(' + [red(c), green(c), blue(c), alpha].join('.') + ')';
}
//call the loadColours function now it is declared
this.loadColours();
//Load the colour everytime the colour input is changed
const selectElement = document.querySelector('#colourInput');
selectElement.addEventListener('change', (event) => { this.loadColours(); });
};```
You can work out the conversion from Hex to RGB without any code:您无需任何代码即可计算出从十六进制到 RGB 的转换:
Take the first 2 digits and convert them from hex value to decimal value, that gives you the R value of the RGB取前 2 位数字并将它们从十六进制值转换为十进制值,从而为您提供 RGB 的 R 值
Take the 2 middle numbers of hex code and convert to decimal, this gives the G value取十六进制代码的中间2个数字并转换为十进制,这给出了G值
Take the last to numbers, convert to decimal, and you get the B value取最后一个数字,转换为十进制,得到B值
Eg Hex #578955例如十六进制 #578955
0x57 in decimal = 87 (R)十进制的 0x57 = 87 (R)
0x89 in decimal = 137 (G)十进制的 0x89 = 137 (G)
0x55 in decimal = 85 (B)十进制的 0x55 = 85 (B)
so #578955 in RGB is rgb(87, 137, 85)所以 #578955 在 RGB 中是 rgb(87, 137, 85)
I discovered this cute solution while trying to solve a problem :)我在尝试解决问题时发现了这个可爱的解决方案:)
function changeHexaToRgba() { h3.style.color = input1.value; input2.value = h3.style.color; } changeHexaToRgba();
<h3 id="h3">Type Your Hexa Color and then click button</h3> <input type="text" id="input1" value="#080" /> <button onclick="changeHexaToRgba()">GO</button> <input type="text" id="input2" value="" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.