2015-05-13 7 views
1

Я работаю над разделением изображения на доске (646px X 646px) на разделы. Во-первых, у меня есть радианная информация для каждого фрагмента на этом изображении (0.314 Радианы (360 градусов/20 секций = 18 градусов)), точные значения x и y центра изображения мишени и теперь таблица поиска, содержащая начало и конец радиан для каждого фрагмента вместе со счетом - т.е. счет 20, начало 0, конец 0.314. Есть ли у кого-нибудь какие-либо советы о том, как приступить к обнаружению событий mouseclick/key-down в отношении того, какой раздел я выбираю? то есть, как бы совет знал, выбираю ли я 20 ломтиков?разделите изображение на равные части в javascript

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]); 
       } 
      } 
+1

, что вы пытались до сих пор? Я бы рекомендовал определить ссылочный вектор и использовать [dot product] (http://en.wikipedia.org/wiki/Dot_product) (см. * Геометрическое определение *) этого вектора и вектор музлик, чтобы получить угол. – doldt

+0

Hi; Я попытался разбить плату на 4 квартала, а затем проверил значения x/y, чтобы увидеть, на какой части панели я нажал. После этого вычисляли гипотенузу и угол, используя новые позиции x и y, затем подавали их в функцию, чтобы проверить, равна ли оценка 20, проверять одиночные, двойные или тройные значения. Посмотрите на методику эталонного вектора – tba

+0

Идея эталонного вектора - действительно элегантное решение этой проблемы. У вас уже есть все части; ваш ссылочный вектор может быть произвольной точкой на доске; Затем mouseclick дает вам точки для второго вектора. Kudos @doldt. Хотелось бы, чтобы я подумал об этом :) –

ответ

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

+0

Также элегантный подход, но я достаточно уверен, что OP необходимо было определить область «клина», например, клиновидные зоны скобок дартской доски с разной степенью точности по периметру. Это определяет, какой из нескольких концентрических колец был нажат, но не какой «клин пирога». –

+0

Вот почему я дал ему ссылку на круговой диаграммы codepen («Это должно помочь вам»). – OddDev

Смежные вопросы