How can I put custom image in wheelnav.js

问题

I'm using wheelnav.js plugin of javascript to draw some circular menu as in the image below:

The problem is that I can't put an image inside the menu parts and I don't know how to do it.

If anyone knows how to put some custom images inside each of this menu parts please help me...

Thanks!!!

回答1:

UPDATE May 3, 2016:

To insert images into the menu slices, use imgsrc:path/filename. So the code above can be changed to:

var imgWheel = new wheelnav("divId");
imgWheel.createWheel(["imgsrc:img/menu1.png","imgsrc:img/menu2.png","imgsrc:img/menu3.png"]);

回答2:

The current version (v1.5.5) doesn't support image, so you must modify the source code.

Change this line: https://github.com/softwaretailoring/wheelnav/blob/v1.5.5/js/dist/wheelnav.js#L841

to this one:

this.navTitle = this.wheelnav.raphael.image(currentTitle.title, sliceInitPath.titlePosX, sliceInitPath.titlePosY, *width*, *height*);

Raphael reference: http://raphaeljs.com/reference.html#Paper.image

After this modification you can use images:

var imgWheel = new wheelnav("divId");
imgWheel.createWheel(["img/menu1.png","img/menu2.png","img/menu3.png"]);

There is an issue about it (https://github.com/softwaretailoring/wheelnav/issues/22), so later wheelnav.js will be able to handle image.

UPDATE: wheelnav.js supports image from v1.6.0

来源：https://stackoverflow.com/questions/31364873/how-can-i-put-custom-image-in-wheelnav-js