时间戳

首页 > 解决方案 > 将色调状态值插入 Chromajs HSL 状态值

javascript - 将色调状态值插入 Chromajs HSL 状态值

问题描述

我正在尝试根据用户的输入更改 divs 背景颜色。我想将状态的键设置为色调，值是用户的输入。然后我想获取该状态并将其注入另一个称为颜色值的状态键。我希望颜色值是在 chromajs 中使用 hsl 的色调状态值。

当我尝试输入红色时，色调的状态变为红色。此外，颜色的值在第一个“r”键击时变为红色，然后在任何其他击键后变为黑色。它在开发工具中显示了 rgb(0, 0, 0, 1) 的值。

我无法弄清楚为什么它在单个字母上变为红色，以及为什么当颜色值应该是色度（'red'，1,0.5，“hsl”）时它变为黑色。

我对 chromajs 的使用有什么不了解的地方？

import React from 'react';
import './App.css';
import chroma from 'chroma-js';


class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    hue: '',
    color: ''
  };
  this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      hue: e.target.value,
      color: chroma(this.state.hue, 1, 0.5, "hsl")
    })
  }

  render() {
    const style = {
      background: this.state.color,
      height: 200
    }
    return (
      <div style={style}>
        <input value={this.state.hue} onChange={this.handleChange}></input>
      </div>
    );
  }
}

export default App;

标签： javascriptreactjs

解决方案

如果您将像这样更改 handleChange 函数，则 div 的颜色将起作用：

handleChange(e) {
  const color = chroma.valid(e.target.value) 
    ? chroma(e.target.value).saturate().alpha(0.5) : chroma("white");
  this.setState({
    hue: e.target.value,
    color,
  });
}

首先，我们需要通过 chroma.valid() 函数验证用户输入。之后，我们可以设置饱和度和 alpha 值。如果用户输入不会通过色度验证，它将使用白色。

你可以看到它在这里工作： https ://codesandbox.io/s/rmmk0j5mmp?fontsize=14

如果你想通过你开始的方式来构建你的颜色，你需要传递一个色调角度，而不是一个颜色名称。从文档：

您可以通过将颜色空间的名称作为最后一个参数传递来从不同的颜色空间构造颜色。在这里，我们通过传递色相角 (0-360) 以及饱和度和亮度的百分比在 HSL 中定义相同的颜色：chroma(330, 1, 0.6, 'hsl')

来源：https ://gka.github.io/chroma.js/

推荐阅读