Javascript Поместите 4 целых числа в диапазон RGBA - PullRequest
Новая
       10

Javascript Поместите 4 целых числа в диапазон RGBA

2 голосов
/ 05 марта 2020

У меня есть функция, которая помещает 4 целых числа в диапазон RGBA. Другими словами, он принимает 4 целых числа, помещает первые 3 в 8-битный диапазон (0-255) (десятичное значение не имеет значения) и помещает 4-е число в диапазон 0-1. И тогда это делает fillStyle к этому цвету. (Важно, чтобы все это происходило в функции, потому что я хочу использовать случайные математические операции над числами)

Вот код: 

function FillColor(r,g,b,a){
    if (r > 255){r = 255;}
    if (g > 255){g = 255;}
    if (b > 255){b = 255;}
    if (a > 1){a = 1;}

    if (r < 0){r = 0;}
    if (g < 0){g = 0;}
    if (b < 0){b = 0;}
    if (a < 0){a = 0;}

    ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
}

Моя проблема в том, что это выглядит излишне длинным и это в основном просто повторяется. Есть ли лучший способ сделать это?

Ответы [ 4 ]

3 голосов
/ 06 марта 2020

Попробуйте это: 

function FillColor(r, g, b, a) {
  for (let i = 0; i < arguments.length; i++) {
    if (i === 3) arguments[i] = Math.min(Math.max(parseInt(arguments[i]), 0), 1);
    else arguments[i] = Math.min(Math.max(parseInt(arguments[i]), 0), 255);
  }

  ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
}
2 голосов
/ 05 марта 2020 

// Your code:
/*function FillColor(r,g,b,a){
    if (r > 255){r = 255;}
    if (g > 255){g = 255;}
    if (b > 255){b = 255;}
    if (a > 1){a = 1;}

    if (r < 0){r = 0;}
    if (g < 0){g = 0;}
    if (b < 0){b = 0;}
    if (a < 0){a = 0;}

    ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
}*/

// Updated function (assuming you can use ES6/ES2015):
function FillColor(r, g, b, a) {
  const rgb = (v) => v < 0 ? 0 : v > 255 ? 255 : v;
  const alpha = a < 0 ? 0 : a > 1 ? 1 : a;
  
  // You can replace this "return" with your "ctx.fillStyle", but it doesn't work for this example to log the values out.
  return `rgba(${rgb(r)}, ${rgb(g)}, ${rgb(b)}, ${a})`;
}

// Updated function (assuming you are bound to ES5):
function FillColorEs5(r, g, b, a) {
  var rgb = function(v) {
    return v < 0 ? 0 : v > 255 ? 255 : v;
  }
  var alpha = a < 0 ? 0 : a > 1 ? 1 : a;
  
  // Same thing here...you can replace the "return" with your "ctx.fillStyle" instead.
  return "rgba(" + rgb(r) + ", " + rgb(g) + ", " + rgb(b) + ", " + alpha + ")";
}

// Sample running function:
console.log(FillColor(1, 2, 354, 0.1));
console.log(FillColorEs5(1, 2, 354, 0.1));
2 голосов
/ 05 марта 2020 
function FillColor(red,green,blue,alpha){
  let [r,g,b] = [red,green,blue].map(c => Math.max(0, Math.min(255, c)));
  let a = Math.max(0, Math.min(1, alpha));
  ctx.fillStyle =  `rgba(${r}, ${g}, ${b}, ${a})`;
}
2 голосов
/ 05 марта 2020

Вы можете использовать троичный оператор: 

 r = (r>255)? 255 :(r<0)?0 :r

пример: 

<html>
<script type="application/javascript">
    function FillCOllor(r) {
        r = (r > 255) ? 255 : (r < 0) ? 0 : r
        console.log(r)
    }
</script>
<body>
<button onclick="FillCOllor(-12)">click</button>
</body>
</html>
...