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()