https://github.com/repcomm/colorwheel
esmodule color wheel renderer
https://github.com/repcomm/colorwheel
canvas-renderer color-wheel es-module js renderer
Last synced: 6 months ago
JSON representation
esmodule color wheel renderer
- Host: GitHub
- URL: https://github.com/repcomm/colorwheel
- Owner: RepComm
- Created: 2019-01-22T00:07:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-24T04:10:40.000Z (over 5 years ago)
- Last Synced: 2025-01-28T08:51:19.658Z (12 months ago)
- Topics: canvas-renderer, color-wheel, es-module, js, renderer
- Language: JavaScript
- Homepage: https://repcomm.github.io/colorwheel
- Size: 511 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# ColorWheel
ESModule for rendering color wheels
Basically, I hate that browsers have different color pickers on different OSes.
Take a look at the demo code:
[demo 0](./index.js)
Take a look at the output:
[demo 0 - visual](https://repcomm.github.io/colorwheel)
[demo 1 - visual](https://repcomm.github.io/colorwheel/examples/example-chaining.html)
Usage is fairly simple:
Creating the wheel
```javascript
let myWheel = new ColorWheel()
```
Adding & removing colors
```javascript
let red = WheelColor.fromRGB(255, 0, 0);
myWheel.addColor(red);
myWheel.removeColor(red);
```
Appending it to the dom
```javascript
myWheel.mount( myDiv );
//mount accepts an html or Component class (see component.js)
//Similar to
div.appendChild ( myWheel.element )
```
Helper functions that make life easy
```javascript
//Handle window resizing
.handleResize()
//Auto render when state changes
.handleRedrawLoop()
//Applies 100% to width and height of canvas element
.fillParentSize();
```
Color picking
```javascript
.handleColorPicking()
.on("color-pick", (color)=>{
container.style["border-color"] = `rgb(${color.toString()})`;
})
```