javascript - 在javascript中将图像分成相等的部分

Question

我一直致力于将飞镖图像 (646px X 646px) 分成多个部分。首先，我有此图像上每个切片的弧度信息(0.314 弧度(360 度/20 切片 = 18 度))、飞镖图像中心的确切 x 和 y 值以及现在包含开始和结束的查找表每个切片的弧度以及分数 - 即分数 20，开始 0，结束 0.314。有没有人有任何关于如何继续检测关于我选择的部分的鼠标点击/按键事件的提示？即董事会如何知道我是否选择了 20 片？

boardScores = [20, 1, 18, 4, 13, 6, 10, 15, 2, 17, 3, 19, 7, 16, 8, 11, 14, 9, 12, 5];

    for(var i = 0; i < boardScores.length; i++)
            {
                var id="SCORE: "+boardScores[i];
                LOOKUP[id] = { 'START': (i*divideBoardIntoRadians).toFixed(3), 'END': ((i+1)*divideBoardIntoRadians).toFixed(3), 'VALUE': boardScores[i] };
            }

            for (var name in LOOKUP)
            {
                for (value in LOOKUP[name])
                {
                    console.log( name+":"+value+"="+LOOKUP[name][value] );
                }
            }

Answer 1

我觉得你走错了路。通过 CSS 定义飞镖板并将图像作为背景放在它下面。

这是一个例子:

$(".circle0").click(function(eve){
  alert(0);
});

$(".circle1").click(function(eve){
  eve.stopPropagation();
  alert("Double something");
});

div{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.circle0{
  background-color: black;
  width: 500px;
  height: 500px;
}

.circle1{
  background-color: green;
  width: 450px;
  height: 450px;
  margin-top: 25px;
  margin-left: 25px;
  display: inline-block;
}

.circle2{
  background-color: beige;
  width: 430px;
  height: 430px;
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
}

.circle3{
  background-color: red;
  width: 300px;
  height: 300px;
  margin-top: 65px;
  margin-left: 65px;
  display: inline-block;
}

.circle4{
  background-color: beige;
  width: 280px;
  height: 280px;
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
}

.circle5{
  background-color: green;
  width: 100px;
  height: 100px;
  margin-top: 90px;
  margin-left: 90px;
  display: inline-block;
}

.circle6{
  background-color: red;
  width: 60px;
  height: 60px;
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dartboard">
  <div class="circle0">
    <div class="circle1">
      <div class="circle2">
        <div class="circle3">
          <div class="circle4">
            <div class="circle5">
              <div class="circle6">
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

当然，您必须像我的简单示例一样制作更多的部分。每个“数字”的每个部分。 This应该帮助你。

你也应该阅读这个:http://www.cssplay.co.uk/menu/cssplay-dartboard.html

.dartboard {
    background: none repeat scroll 0 0 #333;
    border-radius: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    height: 600px;
    margin: 50px auto;
    position: relative;
    width: 600px;
}
.dartboard .outerRing {
    border: 2px solid #ddd;
    border-radius: 580px;
    height: 578px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 578px;
}
.dartboard .numbersTop {
    color: #ddd;
    font: 50px/50px arial,sans-serif;
    height: 50px;
    left: 270px;
    position: absolute;
    text-align: center;
    text-shadow: -1px 0 1px #eee, 1px 0 1px #000;
    top: 3px;
    transform-origin: 30px 297px 0;
    width: 60px;
}
.dartboard .p11 {
    transform: rotate(-90deg);
}
.dartboard .p14 {
    transform: rotate(-72deg);
}
.dartboard .p9 {
    transform: rotate(-54deg);
}
.dartboard .p12 {
    transform: rotate(-36deg);
}
.dartboard .p5 {
    transform: rotate(-18deg);
}
.dartboard .p20 {
    transform: rotate(0deg);
}
.dartboard .p1 {
    transform: rotate(18deg);
}
.dartboard .p18 {
    transform: rotate(36deg);
}
.dartboard .p4 {
    transform: rotate(54deg);
}
.dartboard .p13 {
    transform: rotate(72deg);
}
.dartboard .p6 {
    transform: rotate(90deg);
}
.dartboard .numbersBottom {
    bottom: 1px;
    color: #ddd;
    font: 50px/50px arial,sans-serif;
    height: 50px;
    left: 270px;
    position: absolute;
    text-align: center;
    text-shadow: -1px 0 1px #eee, 1px 0 1px #000;
    transform-origin: 30px -246px 0;
    width: 60px;
}
.dartboard .p8 {
    transform: rotate(72deg);
}
.dartboard .p16 {
    transform: rotate(54deg);
}
.dartboard .p7 {
    transform: rotate(36deg);
}
.dartboard .p19 {
    transform: rotate(18deg);
}
.dartboard .p3 {
    transform: rotate(0deg);
}
.dartboard .p17 {
    transform: rotate(-18deg);
}
.dartboard .p2 {
    transform: rotate(-36deg);
}
.dartboard .p15 {
    transform: rotate(-54deg);
}
.dartboard .p10 {
    transform: rotate(-72deg);
}
.ringOne {
    background: none repeat scroll 0 0 #363;
    border: 2px solid #ddd;
    border-radius: 450px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    height: 446px;
    left: 75px;
    position: absolute;
    top: 75px;
    width: 446px;
}
.ringOne b {
    height: 223px;
    left: 223px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 0 223px 0;
    width: 223px;
}
.ringOne b span {
    background: none repeat scroll 0 0 #a33;
    border-radius: 0 223px 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    display: block;
    height: 223px;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(72deg);
    transform-origin: 0 223px 0;
    width: 223px;
}
.dartboard b.b1 {
    transform: rotate(-81deg) skewX(-72deg);
}
.dartboard b.b2 {
    transform: rotate(-45deg) skewX(-72deg);
}
.dartboard b.b3 {
    transform: rotate(-9deg) skewX(-72deg);
}
.dartboard b.b4 {
    transform: rotate(27deg) skewX(-72deg);
}
.dartboard b.b5 {
    transform: rotate(63deg) skewX(-72deg);
}
.dartboard b.b6 {
    transform: rotate(99deg) skewX(-72deg);
}
.dartboard b.b7 {
    transform: rotate(135deg) skewX(-72deg);
}
.dartboard b.b8 {
    transform: rotate(171deg) skewX(-72deg);
}
.dartboard b.b9 {
    transform: rotate(207deg) skewX(-72deg);
}
.dartboard b.b10 {
    transform: rotate(243deg) skewX(-72deg);
}
.ringTwo {
    background: none repeat scroll 0 0 #eec;
    border: 2px solid #ddd;
    border-radius: 420px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    height: 416px;
    left: 90px;
    position: absolute;
    top: 90px;
    width: 416px;
}
.ringTwo b {
    height: 208px;
    left: 208px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 0 208px 0;
    width: 208px;
}
.ringTwo b span {
    background: none repeat scroll 0 0 #333;
    border-radius: 0 208px 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    display: block;
    height: 208px;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(72deg);
    transform-origin: 0 208px 0;
    width: 208px;
}
.ringThree {
    background: none repeat scroll 0 0 #363;
    border: 2px solid #ddd;
    border-radius: 300px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    height: 300px;
    left: 148px;
    position: absolute;
    top: 148px;
    width: 300px;
}
.ringThree b {
    height: 150px;
    left: 150px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 0 150px 0;
    width: 150px;
}
.ringThree b span {
    background: none repeat scroll 0 0 #a33;
    border-radius: 0 150px 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    display: block;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(72deg);
    transform-origin: 0 150px 0;
    width: 150px;
}
.ringFour {
    background: none repeat scroll 0 0 #eec;
    border: 2px solid #ddd;
    border-radius: 270px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    height: 270px;
    left: 163px;
    position: absolute;
    top: 163px;
    width: 270px;
}
.ringFour b {
    height: 135px;
    left: 135px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 0 135px 0;
    width: 135px;
}
.ringFour b span {
    background: none repeat scroll 0 0 #333;
    border-radius: 0 135px 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    display: block;
    height: 135px;
    left: 0;
    position: absolute;
    top: 0;
    transform: skewX(72deg);
    transform-origin: 0 135px 0;
    width: 135px;
}
.ringFive {
    background: none repeat scroll 0 0 #363;
    border: 2px solid #ddd;
    border-radius: 48px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    height: 48px;
    left: 274px;
    position: absolute;
    top: 274px;
    width: 48px;
}
.ringSix {
    background: none repeat scroll 0 0 #a33;
    border: 2px solid #ddd;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
    height: 20px;
    left: 288px;
    position: absolute;
    top: 288px;
    width: 20px;
}
.ringSeven {
    height: 480px;
    left: 60px;
    position: absolute;
    top: 60px;
    width: 480px;
}
.ringSeven b {
    background: none repeat scroll 0 0 #ddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    display: block;
    height: 216px;
    left: 239px;
    position: absolute;
    top: 0;
    transform-origin: 1px 241px 0;
    width: 2px;
}
.ringSeven b.x1 {
    transform: rotate(9deg);
}
.ringSeven b.x2 {
    transform: rotate(27deg);
}
.ringSeven b.x3 {
    transform: rotate(45deg);
}
.ringSeven b.x4 {
    transform: rotate(63deg);
}
.ringSeven b.x5 {
    transform: rotate(81deg);
}
.ringSeven b.x6 {
    transform: rotate(99deg);
}
.ringSeven b.x7 {
    transform: rotate(117deg);
}
.ringSeven b.x8 {
    transform: rotate(135deg);
}
.ringSeven b.x9 {
    transform: rotate(153deg);
}
.ringSeven b.x10 {
    transform: rotate(171deg);
}
.ringSeven b.x11 {
    transform: rotate(189deg);
}
.ringSeven b.x12 {
    transform: rotate(207deg);
}
.ringSeven b.x13 {
    transform: rotate(225deg);
}
.ringSeven b.x14 {
    transform: rotate(243deg);
}
.ringSeven b.x15 {
    transform: rotate(261deg);
}
.ringSeven b.x16 {
    transform: rotate(279deg);
}
.ringSeven b.x17 {
    transform: rotate(297deg);
}
.ringSeven b.x18 {
    transform: rotate(315deg);
}
.ringSeven b.x19 {
    transform: rotate(333deg);
}
.ringSeven b.x20 {
    transform: rotate(351deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dartboard">
	<div class="outerRing"></div>
	<div class="numbersTop p11">11</div>
	<div class="numbersTop p14">14</div>
	<div class="numbersTop p9">9</div>
	<div class="numbersTop p12">12</div>
	<div class="numbersTop p5">5</div>
	<div class="numbersTop p20">20</div>
	<div class="numbersTop p1">1</div>
	<div class="numbersTop p18">18</div>
	<div class="numbersTop p4">4</div>
	<div class="numbersTop p13">13</div>
	<div class="numbersTop p6">6</div>
	<div class="numbersBottom p8">8</div>
	<div class="numbersBottom p16">16</div>
	<div class="numbersBottom p7">7</div>
	<div class="numbersBottom p19">19</div>
	<div class="numbersBottom p3">3</div>
	<div class="numbersBottom p17">17</div>
	<div class="numbersBottom p2">2</div>
	<div class="numbersBottom p15">15</div>
	<div class="numbersBottom p10">10</div>
	<div class="ringOne">
		<b class="b1"><span></span></b>
		<b class="b2"><span></span></b>
		<b class="b3"><span></span></b>
		<b class="b4"><span></span></b>
		<b class="b5"><span></span></b>
		<b class="b6"><span></span></b>
		<b class="b7"><span></span></b>
		<b class="b8"><span></span></b>
		<b class="b9"><span></span></b>
		<b class="b10"><span></span></b>
	</div>
	<div class="ringTwo">
		<b class="b1"><span></span></b>
		<b class="b2"><span></span></b>
		<b class="b3"><span></span></b>
		<b class="b4"><span></span></b>
		<b class="b5"><span></span></b>
		<b class="b6"><span></span></b>
		<b class="b7"><span></span></b>
		<b class="b8"><span></span></b>
		<b class="b9"><span></span></b>
		<b class="b10"><span></span></b>
	</div>
	<div class="ringThree">
		<b class="b1"><span></span></b>
		<b class="b2"><span></span></b>
		<b class="b3"><span></span></b>
		<b class="b4"><span></span></b>
		<b class="b5"><span></span></b>
		<b class="b6"><span></span></b>
		<b class="b7"><span></span></b>
		<b class="b8"><span></span></b>
		<b class="b9"><span></span></b>
		<b class="b10"><span></span></b>
	</div>
	<div class="ringFour">
		<b class="b1"><span></span></b>
		<b class="b2"><span></span></b>
		<b class="b3"><span></span></b>
		<b class="b4"><span></span></b>
		<b class="b5"><span></span></b>
		<b class="b6"><span></span></b>
		<b class="b7"><span></span></b>
		<b class="b8"><span></span></b>
		<b class="b9"><span></span></b>
		<b class="b10"><span></span></b>
	</div>
	<div class="ringFive"></div>
	<div class="ringSix"></div>
	<div class="ringSeven">
		<b class="x1"></b>
		<b class="x2"></b>
		<b class="x3"></b>
		<b class="x4"></b>
		<b class="x5"></b>
		<b class="x6"></b>
		<b class="x7"></b>
		<b class="x8"></b>
		<b class="x9"></b>
		<b class="x10"></b>
		<b class="x11"></b>
		<b class="x12"></b>
		<b class="x13"></b>
		<b class="x14"></b>
		<b class="x15"></b>
		<b class="x16"></b>
		<b class="x17"></b>
		<b class="x18"></b>
		<b class="x19"></b>
		<b class="x20"></b>
	</div>
</div>