0.1.6 • Published 7 years ago
circle-split v0.1.6
description
Inspired by a d3.js project ImageMap, I created a canvas version of it, which supports PC and mobile devices.
demo
Here is the online demo, select an image and move or touch screen
install
npm i circle-split
or include the source JS file directly
<script src="circle-split.min.js"></script>
usage
initiate
var cs = new CircleSplit('#mountNode', {
size: 300,
minDiameter: 4,
imageCenterType: 'cover',
eventEnabled: true
});
default options
var defaultOptions = {
size: 'auto', // will set mininum value of mountNode's width and height
minDiameter: 2, // the circle can split until the diameter reaches to 2 px
imageCenterType: 'contain', // designate the center type when put the image of the square box
eventEnabled: true // enable touchmove and mouseove event
};
public methods
// you can set image by path or an already loaded image element
cs.setImage('path/to/your/image.jpg')
cs.setImage(document.getElementById('targetImageElement'))
// set pure color
cs.setColor('rgba(255,0,0)');
// split
cs.split() // split all circles into next level
cs.split(level) // split all circles into target level
cs.split(x, y) // split hit circle into next level
cs.split(x, y, level) // split hit circle into target level, target level should be higher than circle's current level
// you can bind and unbind event any time
cs.bindEvent()
cs.unbindEvent()
// if you don't need this, please call destroy method
cs.destroy()