用 EasyLogic 绘制颜色

这个项目的创建是为了实施取色器. 它实施了色彩的基本功能并实施了图像过滤.

文档站点 : https://colorpicker.easylogic.studio/#colorpicker-for-独立

安装

无

npm install @easylogic/colorpicker

如何使用( 用于浏览器)

<link href="https://cdn.jsdelivr.net/npm/@easylogic/[email protected]/dist/colorpicker.css" />
<script src="https://cdn.jsdelivr.net/npm/@easylogic/[email protected]/dist/colorpicker.min.js"></script>

如何使用

import '@easylogic/colorpicker/dist/colorpicker.css'
import ColorPickerUI from '@easylogic/colorpicker' 

使用颜色选择器

import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'

 this.colorPicker = ColorPickerUI.create({
   type: "sketch",
   position: "inline",
   container: document.getElementById('app'),
   color: this.props.value || defaultColor,
   onChange: c => {
     this.changeColor(c);
   }
 });

使用渐变选择器

import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'


 this.gradientPicker = ColorPickerUI.createGradientPicker({
   position: "inline",
   container: this.refs.$color.el,
   gradient: 'linear-gradient(to right, white 0%, black 100%)',
   onChange: (gradientString) => {
     console.log(gradientString);
   }
 });


 // set value 
 this.gradientPicker.setValue('radial-gradient(circle, white 0%, black 100%'));

 // get value
 var gradientString = this.gradientPicker.getValue()

事态发展

本地 dev

git clone https://github.com/easylogic/easylogic-colorpicker
cd easylogic-colorpicker
npm install 
npm run dev 
open localhost:10001 

构建

npm run build 

许可证:麻省理工学院