Верстка часовая спирали
Вложений: 1
Добрый день, уважаемые эксперты.
Помогите пожалуйста с разъяснением, каким образом можно сверстать диаграмму в виде часовой спирали (представленой на рис.). При верстке такой спирали следует учитывать, что при создания такой спирали в последующем с помощью JS при передаче из БД будет производится смена цвета с зеленого на красный с интервалом 30 минут. Примечание: 24 часа * 2 = 48 часов (а именно интервалов). Если с БД мы получаем информацию о том, что начиная с 10 интервала и заканчивая 15 включительно (2.5 часа, 5 интервалов) то , если у нас первые пол часа это 10 интервал, а последние это 15ый, мы передаем по id, например, что мы меняем background-color :red |
а) svg
b) canvas |
В данном случа svg нужно реализовывать цельный. Или же каждый path это промежуток 30минут?
|
Что за вопросы?) Делай так чтобы тебе с этим удобно было работать.
|
В такой задаче CSS transform более чем достаточно
Ну что бы не писать сотни стилей ручками лучше воспользоваться JS скриптом. |
MallSerg, наркоман штоле? На svg - просто нарисовать в векторном редакторе и покрасить. На канвас - воспользоваться инструментами предназначенными для рисования и математикой. На трансформах? Сломать себе мозги и сделать в итоге через задницу.
Не спорю, что если бы не было доступно первых двух вариантов, я бы смог и наговнять, но везде где есть трансформы - сработает и нормальный способ. А если надо вдруг поддержать древний паравоз - пришлось бы вообще на простых на картинках делать.:) |
По моему без разницы где математику пользовать. Счас дома разгребу может ченить изображу =).
|
Я сделал это все кофе животворящий по утрам!!!
Естественно не доделанно но хоть направление надо же научить плохому =) Ползунки проще двигать с клавиатуры и нет проверок на недопустимые значения
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>
div#place { position:relative;width: 500px;height:500px;border: 4px solid black;background: rgb(169 197 169);}
div#doker { position: absolute;top:50%;left:50%;border: 2px solid rgb(255,0,0);perspective:800px;}
ul#diagramm{margin: 0;padding: 0;transform-style: preserve-3d;}
ul#diagramm > li{ display: block;border: 1px solid rgba(0,0,50,1);height: 50px;width: 50px;position: absolute;
background: linear-gradient(345deg, rgb(161 30 1) 0%, rgb(209 142 19) 35%, rgb(210 230 255) 100%);}
</style><script>
"use strict";
function KungFU (p){
const j = {};
j.k1 = 16;j.k2 = 12;j.k3 = 3;j.k4 = 8;j.k5 = -20;j.k6 = -20;j.k7 = 48;j.k8 = 0;j.k9 = 0;
j.start =(elementID)=> {
j.mainElementHTML = document.getElementById(elementID);
j.ElementNullXYZ = j.mainElementHTML.firstElementChild;
j.ElementScene = j.ElementNullXYZ.firstElementChild;
j.arr = j.ElementScene.children;
j.ElementSetPosition();
return j;
}
j.Rotate = () => {
j.ElementScene.style.transform = "rotateX("+j.k8+"deg) rotateY("+j.k9+"deg)";
}
j.SetParam = (e) => {
}
j.ElementSetPosition = ()=> {
let radiusSpiral = j.mainElementHTML.clientHeight / j.k1; let segmentCircle = j.k2;let addStep = radiusSpiral / segmentCircle ;
let step = radiusSpiral * j.k3;let x,y,z;
let f = Math.PI * 2 / segmentCircle; let d = f*j.k4;
for ( let i=0 ; i < j.k7 ; i++ ){
d += f;
x = step * Math.cos(d) + j.k5;
y = step * Math.sin(d) + j.k6;
step += addStep;
j.arr[i].style = 'transform: translate3d('+x+'px, '+y+'px, '+(i)+'px) rotateX(-0deg) rotateY(-0deg) rotateZ('+(i%segmentCircle)/segmentCircle * 360+'deg);';
}
}
window.j = j;
return j.start(p);
}
document.addEventListener("DOMContentLoaded", ()=> KungFU("place") );
</script></head><body>
<div id="place"><div id="doker"><ul id="diagramm">
<li>1<img src="https://javascript.ru/forum/image.php?u=12207&dateline=1432960730"/></li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li>
<li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
</ul></div></div>
<p >
<input type="range" min="-100" max="100" value="16" onchange="j?j.ElementSetPosition(j.k1=value):0"/>
<input type="range" min="-100" max="100" value="12" onchange="j?j.ElementSetPosition(j.k2=value):0"/>
<input type="range" min="-100" max="100" value="3" onchange="j?j.ElementSetPosition(j.k3=value):0"/>
<input type="range" min="-100" max="100" value="8" onchange="j?j.ElementSetPosition(j.k4=value):0"/>
<input type="range" min="-100" max="100" value="-20" onchange="j?j.ElementSetPosition(j.k5=value):0"/>
<input type="range" min="-100" max="100" value="-20" onchange="j?j.ElementSetPosition(j.k6=value):0"/>
<input type="range" min="-100" max="100" value="48" onchange="j?j.ElementSetPosition(j.k7=value):0"/>
<input type="range" min="-360" max="360" value="48" onchange="j?j.Rotate(j.k8=value):0"/>
<input type="range" min="-360" max="360" value="48" onchange="j?j.Rotate(j.k9=value):0"/>
</p>
</body></html>
|
| Часовой пояс GMT +3, время: 06:25. |