javascript - 需要将圆形图像分成8个部分，并在每个部分上贴上标签。按下标签会将圆圈转到分开的部分

Question

我有一个圆形图像(像轮盘赌模板)，我需要将它分成 8 个，并在每个部分上贴上标签。当按下分开的部分时，我需要圆圈指向正确的部分。

这是我同时拥有的 jsfiddle: http://jsfiddle.net/EYALIN/x8q9nqt1/

这是 JS:

var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg = 500 + Math.round(Math.random() * 500);

    var css = '-webkit-transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

Answer 1

您需要做的是在 photoshop 中使用分隔线创建此图像，然后使用图像映射来选择这些分隔线，然后使用 jQuery 来选择它们。我会尽快发布图像和图像映射代码。

然后我们使用 image map generator

得到这个结果:

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="rect" coords="506,493,510,1017" />
    <area alt="" title="" href="#" shape="poly" coords="901,833,519,496,518,503,895,839" />
    <area alt="" title="" href="#" shape="poly" coords="499,499,139,848,132,842,495,493" />
    <area alt="" title="" href="#" shape="poly" coords="492,495,12,502,13,491,493,488" />
    <area alt="" title="" href="#" shape="poly" coords="152,174,500,478,492,484,146,183" />
    <area alt="" title="" href="#" shape="poly" coords="498,21,502,473,512,474,507,20" />
    <area alt="" title="" href="#" shape="poly" coords="853,156,515,479,522,484,859,163" />
    <area alt="" title="" href="#" shape="poly" coords="1005,484,526,487,528,496,1003,494" />
</map>

现在您可以使用 jQuery 选择不同的分隔线并将事件挂接到它们:

$('area').each(function() {
    // do something
});