@ray-js/lamp-rect-picker-color v1.1.5

English | 简体中文

@ray-js/lamp-rect-picker-color

照明矩形色盘组件

Installation

$ npm install @ray-js/lamp-rect-picker-color
# or
$ yarn add @ray-js/lamp-rect-picker-color

Usage

• 属性与方法

type TProps = {
  id: string, // 矩形色盘的 id
  rgb: RGBA, // 矩形色盘颜色值
  canvasIns: any, // 矩形色盘所在的画布实例
  thumbWidth?: number, // 矩形色盘thumb的宽度
  rectWidth?: number, // 矩形色盘的宽度
  rectHeight?: number, // 矩形色盘的高度
  isShowThumb?: boolean, // 是否显示thumb
  onTouchStart?: (rgba: RGBA) => void, // 矩形色盘触摸开始的回调函数
  onTouchMove?: (rgba: RGBA) => void, // 矩形色盘触摸移动的回调函数
  onTouchEnd?: (rgba: RGBA) => void, // 矩形色盘触摸结束的回调函数
};

import LampRectPickerColor from '@ray-js/lamp-rect-picker-color';

const { useCanvasReady } = LampRectPickerColor;

export default () => {
  const [colorR, setColorR] = useState(null);
  useCanvasReady(
    [
      {
        id: 'rectPicker', // 设置id
        type: 'RectPickerColor', // 设置色盘类型
      },
    ],
    colorCurrent => {
      // 获取到矩形色盘的实例
      colorCurrent && setColorR(colorCurrent);
    }
  );
  <LampRectPickerColor
    id="rectPicker" // 设置id
    canvasIns={colorR} // 传入实例
    rgb={{
      r: 255,
      g: 0,
      b: 0,
    }}
    onTouchStart={(rgba: RGBA) => {
      console.log(rgba);
    }}
  />;
};