Блог

Я переписываю свой проект после того, как узнал, что мне пришлось использовать p5.js вместо jquery. Скрипт должен принимать входные данные средства выбора цвета HTML, которое, как я полагаю, является либо шестнадцатеричным, либо цветным элементом, и преобразовывать его в значения rgb для изменения значений обводки и заливки. Я отладил до такой степени, что знаю, что либо this.setColour, либо this.colourAlpha возвращает 255 255 255, несмотря на получение другого шестнадцатеричного значения. Большое спасибо.

 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(); });
};```
  

Вы можете выполнить преобразование из шестнадцатеричного в RGB без какого-либо кода:

Возьмите первые 2 цифры и преобразуйте их из шестнадцатеричного значения в десятичное, что даст вам значение R для RGB

Возьмите 2 средних числа шестнадцатеричного кода и преобразуйте в десятичный, это дает значение G

Преобразуйте последнее в числа, преобразуйте в десятичное число, и вы получите значение B

Например, Hex # 578955

0x57 в десятичной системе счисления = 87 (R)

0x89 в десятичной системе счисления = 137 (G)

0x55 в десятичной системе счисления = 85 (B)

итак, # 578955 в RGB — это rgb (87, 137, 85)

Я обнаружил это симпатичное решение, пытаясь решить проблему 🙂

 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="" />