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 t
Solution 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"]);
Solution 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
Post a Comment for "How Can I Put Custom Image In Wheelnav.js"