(크롬 전용) 평범한 컬러 투수를 만들었어요.

외부 프로그램 라이브러리에 의존하지 않고 매우 간단한 컬러 페인트를 만들었다
https://github.com/a-nakanosora/ANColorPicker
Electron에서 사용하기 때문에 동작 확인 브라우저는 Chrome만 있습니다.Firefox도 움직일 수 있습니다.
라이센스는 The Unlicense입니다.

사용법

const {ANColorPicker} = require('./ancp')

const ancp = new ANColorPicker()
document.body.appendChild(ancp.getContainer())

const callback = ({rgb, hsv, isTrusted})=> console.log("rgb:",rgb, "hsv:",hsv, "isTrusted:",isTrusted)
ancp.onChange(callback)

모듈에 장착한 후new ANColorPicker() 컬러 투수 실례를 생성합니다.ancp.getContainer()DOM을 얻을 수 있으므로 적당한 위치에 놓아야 한다.등록ancp.onChange(callback)의 색상 변경 프로세스매개변수는 뒤에 설명되어 있습니다.setColor()/setColorHsv()를 사용하여 프로그램에서 색상 선택기의 선택 색상을 변경합니다.

// RGB
const [r,g,b] = [200,100,50]
ancp.setColor(r,g,b)

// HSV
const [h,s,v] = [310,100,200]
ancp.setColorHsv(h,s,v)

API

new ANColorPicker(size=200)채색 투수를 만들다.매개변수에 색상 투수의 치수(pixel)가 지정됩니다.

ancp.getContainer()채색 투수의 컨테이너 덤을 획득한다.DOM 트리의 적절한 위치appendChild()에 색상 표시등을 표시합니다.

ancp.onChange(callback)등록 색상 픽업기의 선택 색상이 변경되었을 때 부르는 처리 프로그램입니다.callback는 첫 번째 파라미터에 저장rgb,hsv,isTrusted 각 구성원의 대상을 제공한다.

rgb: R, G, B의 각각의 값을 저장한 배열.
(가격 범위: 0 <= R,G,B <= 255

hsv: H, S, V 각각의 값을 저장한 배열.
( 0 <= H <= 360 , 0 <= S,V <= 255 )

isTrusted: 부울 값.사용자 입력에 따라 색상이 변경된 경우true, setColor()/setColorHsv()에 따라 변경된 경우false를 선택합니다.

ancp.setColor(r,g,b)RGB로 색상 투수의 선택 색상을 지정합니다.

ancp.setColorHsv(h,s,v)HSV로 색상 투수의 선택 색상을 지정합니다.

참고 자료

이 스크립트를 작성할 때는 다음 페이지를 참조하십시오.

RGB와 HSV, HSB의 상호 변환 도구 및 변환 컴퓨팅 - PEKO STEP
http://www.peko-step.com/tool/hsvrgb.html