如何在wheelnav.js中放置自定义图像

Question

我使用javascript的wheelnav.js插件绘制一些圆形菜单，如下图所示：

问题在于我无法在菜单部分放置图像，我也不知道该怎么做。

如果有人知道如何在每个菜单部分中放置一些自定义图像，请帮助我......

感谢!!!

Answer 1

2016年5月3日更新：

要将图像插入菜单切片，请使用<ul id="pagination" class="pager"> <li class="next"> <a href="2.html">1</a> <a class="next" href="2.html">Older Posts &rarr;</a> <a href="2.html">3</a> </li> </ul> 。所以上面的代码可以改为：

imgsrc:path/filename

Answer 2

当前版本（v1.5.5）不支持图像，因此您必须修改源代码。

更改此行：https://github.com/softwaretailoring/wheelnav/blob/v1.5.5/js/dist/wheelnav.js#L841

到这一个：

<div data-sly-list.item="${jsonHelper.parsedJSON}" data-sly-unwrap>
<h3 class="panel-title">${jsonHelper.parsedJSON[item].name @ context='html'}</h3>
<div class="panel-body" data-sly-list.subitem="${jsonHelper.parsedJSON[item].commodityList}">
${jsonHelper.parsedJSON[item].commodityList[subitem].name @ context='html'}
</div>
</div>

拉斐尔参考：http://raphaeljs.com/reference.html#Paper.image

修改完成后，您可以使用图片：

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

有一个问题（https://github.com/softwaretailoring/wheelnav/issues/22），所以稍后wheelnav.js将能够处理图像。

更新：wheelnav.js支持v1.6.0中的图片