Question

我做了换色器。但现在我想向其中添加一个表单。如果更改下拉菜单，则必须直接显示颜色更改。最好的方法是什么？

下面，我为换色器添加了代码

 $im = b.gif;
    $index = imagecolorclosest ( $im,  128,128,128); // old color
    imagecolorset($im,$index,$color[0],$color[1],$color[2]); // new color

    $imgname = "result.gif";
    imagegif($im, $imgname ); // save image as gif
    imagedestroy($im);

Answer 1

如果您不想使用<input type="color" />，则可以使用3个<input type="range">向他们添加更改侦听器，并在更改其中之一时更新所需的元素样式。（释放输入后将触发事件change，即使更改值，即使您仍保持输入，事件input也会触发）。我使用Object.defineProperty进行了着色和设置着色，以便于测试。

["red", "green", "blue", "opacity"].forEach(function(colorType) {
  Object.defineProperty(this, colorType, {
    get: function() {
      return +document.querySelector("#" + colorType).value;
    }
  });
  document.querySelector("#" + colorType).addEventListener("input", onChange);
});

Object.defineProperty(this, "result", {
  set: function(newColor) {
    document.querySelector("#result").setAttribute("style", "background-color: rgba(" + newColor + ");");
  }
});

onChange();

function onChange() {
  result = [red, green, blue, opacity].join(", ");
}

#result {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<form id="result">
  <input type="range" id="red" name="red" min="0" max="255" />
  <input type="range" id="green" name="green" min="0" max="255" />
  <input type="range" id="blue" name="blue" min="0" max="255" />
  <input type="range" id="opacity" name="opacity" min="0" max="1" step="0.01" />
</form>

Object.defineProperty(this, "color", {
  get: function() {
    return document.querySelector("#color").value;
  }
});
document.querySelector("#color").addEventListener("input", onChange);

Object.defineProperty(this, "result", {
  set: function(newColor) {
    document.querySelector("#result").setAttribute("style", "background-color: " + newColor + ";");
  }
});

onChange();

function onChange() {
  result = color;
}

#result {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<form id="result">
  <input type="color" id="color" name="color" />
</form>

现场色彩变化

1 个答案: