带色轮的互补色发生器

Question

我正在尝试使用色轮创建一个补色生成器来 select 主色。我已经成功地合并了下面 2 scripts/sites 中的代码，但是它不会自动更新颜色，我只能让它与输入框一起使用，并且需要单击该框并按回车键才能获得要生成的互补色。

https://codepen.io/rakujira/pen/WZOeNq?editors=0010

http://design.geckotribe.com/colorwheel/

这是我的合并代码版本 -

enter code here

Answer 1

评论中的说明意味着所需的更改比下面给出的更简单。要求是滑块保持不变，只需一键提交颜色。

唯一需要更改的是插入此行：

document.getElementById('jscolor').focus();

紧接在这些行之后

// Finally, use the position to update the picked color
            this.color.hsv = this._mouseTarget.input(x, y);

这是最初的答案 - 它只允许在滚轮上选择颜色，而不是滑块。

问题询问如何消除用户点击输入字段然后在色轮上选择颜色后点击 return 的需要。要求是在用户单击色轮中的颜色后立即发生操作，并且保存所选颜色的十六进制值的输入元素和滑块不应可见。

由于很难准确跟踪各种点击事件发生的情况，我改为创建几行代码来模拟用户点击输入元素然后按下按键并隐藏不需要的输入元素并停止正在创建滑块。

Fiddle可以在这里看到：https://jsfiddle.net/ahaworth/as7ydq4j/1/

代码需要更改 3 个地方。

寻找线条

// Finally, use the position to update the picked color
            this.color.hsv = this._mouseTarget.input(x, y);

并将它们替换为

// use the position to update the picked color
            this.color.hsv = this._mouseTarget.input(x, y);
// Simulate a keyup on the input jscolor element so the color change is immediately updated 
            var input = document.getElementById('jscolor');
            input.focus();
            var ev = document.createEvent('Event');
            ev.initEvent('keyup');
            input.dispatchEvent(ev);
          }
        }

寻找这一行

<input type="text" id="jscolor" size="7" value="" tabindex="12" class="colour"/>  Click here and press enter once you've selected your colour   </table>

并将其替换为

<input type="text" id="jscolor" size="7" value="" tabindex="12" class="colour" style="visibility: hidden;"/>  <!--Click here and press enter once you've selected your colour -->   </table>

寻找这些行

}), new slider(this.svg, {
  sliderType: "v",
  x: leftMargin + borderWidth,
  y: bodyWidth + sliderMargin,
  w: bodyWidth - borderWidth * 2,
  h: sliderHeight - borderWidth * 2,
  r: sliderHeight / 2 - borderWidth,
  marker: marker,
  border: borderStyles
})]; // Create an iroStyleSheet for this colorWheel's CSS overrides

并将它们替换为

})/*, new slider(this.svg, {
  sliderType: "v",
  x: leftMargin + borderWidth,
  y: bodyWidth + sliderMargin,
  w: bodyWidth - borderWidth * 2,
  h: sliderHeight - borderWidth * 2,
  r: sliderHeight / 2 - borderWidth,
  marker: marker,
  border: borderStyles
})*/]; // Create an iroStyleSheet for this colorWheel's CSS overrides

（或者您可以将它们留在原处并设置滑块以显示 none）

带色轮的互补色发生器

Complementary Colour Generator with Colour Wheel

javascript

onchange