@caohenghu/colorpicker v1.0.2

colorpicker

LiveDemo

Install

$ yarn add @caohenghu/colorpicker

Example

import ColorPicker from '@caohenghu/colorpicker'

export default class App {
    constructor(props) {
        super(props)
        this.changeColor = this.changeColor.bind(this)
        this.openSucker = this.openSucker.bind(this)
        this.color = '#59c7f9'
        this.$bg = null
        this.$cover = null
        this.suckerCanvas = null
        this.colorpicker = new ColorPicker({
            theme: '',
            color: this.color,
            suckerHide: false,
            openSucker: this.openSucker,
            changeColor: this.changeColor
        })
    }

    render() {
        this.$bg = document.querySelector('.bg')
        this.$cover = document.querySelector('.cover')
        this.$cover.appendChild(this.colorpicker.$el)
        this.$bg.style.background = this.color
    }

    changeColor(color) {
        const { r, g, b, a } = color.rgba
        this.$bg.style.background = `rgba(${r},${g},${b},${a})`
    }

    openSucker(isOpen) {
        if (isOpen) {
            // ... canvas be created, and get the area of canvas
            // this.colorpicker.canvasLoaded({
            //     suckerCanvas: this.suckerCanvas,
            //     suckerArea: [
            //         coverRect.left,
            //         coverRect.top,
            //         coverRect.left + coverRect.width,
            //         coverRect.top + coverRect.height
            //     ]
            // })
        } else {
            // this.suckerCanvas && this.suckerCanvas.remove()
        }
    }
}

new ColorPicker(options)

Options

if you want to use sucker, then openSucker, suckerHide is necessary. and when canvas is ready, you can call function colorpicker.canvasLoaded width args suckerCanvas and suckerArea. when you click sucker button, you can click it again or press key of esc to exit.

colorpicker.canvasLoaded(options)

Options

colorpicker.close()

when you want to close colorpicker, you can call function colorpicker.close(), it can remember current color into history.