Czy macie pomysł jak narysować na stronce różę wiatrów?
Powinna wyglądać podobnie do zegarka tzn. kółko w kółku jakaś kreska pokazująca kierunek. To jest jeszcze do ogarnięcia ale najważniejszy problem to rozrzut wiatru. Po podaniu wartość powinna się zakolorować część okręgu.
Proszę o jakieś naprowadzenia na rozwiązanie html/css lub cos podobnego lub w JavaFx?
załączam przykładowy wygląd (efekto może się różnić)
pozdrawiam
0
2
HTML5 - canvas
<!DOCTYPE html>
<head>
<title>Róża Wiatrów</title>
<meta charset="utf-8">
</head>
<body>
<canvas width="243" height="243" id="rozawiatrowcanvas"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById("rozawiatrowcanvas"),
ctx = canvas.getContext("2d");
var srodek_kola_x = 144;
var srodek_kola_y = 144;
rysujRoze(canvas,200,170,230);
function radianAngle(angle) {
return radians = (Math.PI/180)*angle;
}
function rysujRoze(canvas, kierunek, wiatr_r1, wiatr_r2) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
//kolo zewewnetrzne
ctx.fillStyle = "silver";
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,75,0,Math.PI * 2, true);
ctx.fill();
//kolo wewnetrzne
ctx.fillStyle = "grey";
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,65,0,Math.PI * 2, true);
ctx.fill();
//rozrzut wiatru
ctx.fillStyle = "yellow";
ctx.strokeStyle = "yellow";
ctx.lineWidth=13;
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,70, radianAngle(wiatr_r1), radianAngle(wiatr_r2),false);
ctx.stroke();
//kierunek wiatru
ctx.fillStyle = "red";
ctx.strokeStyle = "red";
ctx.lineWidth=34;
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,65, radianAngle(kierunek-1), radianAngle(kierunek+1),false);
ctx.stroke();
}
</script>
0
Dzięki, dzięki :) o to mi chodziło. Teraz muszę przekazać argumenty do rysowania tej róży z php. Mam zamiar napisać skrypt php który będzie generował skrypt canvas. Dobry to pomysł?, czy da się może prościej przekazać argumenty z bazy MySql?
pozdrawiam
0
Jeszcze dorobiłem trochę do tej róży wiatrów, może się przyda... Wydaje mi się że php będzie najlepsze do Twojego projektu.
<!DOCTYPE html>
<head>
<title>Róża Wiatrów</title>
<meta charset="utf-8">
</head>
<body>
<canvas width="243" height="243" id="roza_wiatrow_canvas"></canvas>
<button onclick='zmienOznaczenia("stopnie")'>Stopnie</button><button onclick='zmienOznaczenia("kierunki")'>Kierunki</button>
</body>
</html>
<script>
/*
*Pomysł na skrypt z:
*https://4programmers.net/Forum/Webmastering/287521-roza_wiatrow
*/
var canvas = document.getElementById("roza_wiatrow_canvas");
var srodek_kola_x = 144;
var srodek_kola_y = 144;
var tablica_stopni = [];
//tablica stopni, tak zeby 90 zamienic na 0
//90=0
for(var i=0;i<=360;i++)
{
if((i+270)>360)
{
tablica_stopni[i]=i-90;
}
else if(i>90)
{
tablica_stopni[i]=i;
}
else
{
tablica_stopni[i]=i+270;
}
}
//zamienia kąty na stopnie
function radianAngle(angle) {
return radians = (Math.PI/180)*angle;
}
//zmienia oznaczenia na stopnie lub kierunki
function zmienOznaczenia(ozn)
{
if(ozn=="stopnie")
{
rysujRoze(canvas,tablica_stopni[295],170,230,"stopnie");
}
else{
rysujRoze(canvas,tablica_stopni[295],170,230,"kierunki");
}
}
rysujRoze(canvas,tablica_stopni[295],170,230,"stopnie");
/*
* funkcja rysujaca:
*/
function rysujRoze(canvas, kierunek, wiatr_r1, wiatr_r2,podzialka) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
//kolo zewewnetrzne
ctx.fillStyle = "silver";
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,75,0,Math.PI * 2, true);
ctx.fill();
//kolo wewnetrzne
ctx.fillStyle = "grey";
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,65,0,Math.PI * 2, true);
ctx.fill();
//podzilka
//numerki
if(podzialka=="stopnie")
{
ctx.fillStyle = "black";
ctx.lineWidth=2;
ctx.font="8px Verdana";
ctx.fillText("30°",srodek_kola_x+40,srodek_kola_y-70);
ctx.fillText("60°",srodek_kola_x+70,srodek_kola_y-40);
ctx.fillText("90°",srodek_kola_x+80,srodek_kola_y);
ctx.fillText("120°",srodek_kola_x+70,srodek_kola_y+45);
ctx.fillText("150°",srodek_kola_x+40,srodek_kola_y+75);
ctx.fillText("180°",srodek_kola_x-10,srodek_kola_y+90);
ctx.fillText("210°",srodek_kola_x-50,srodek_kola_y+80);
ctx.fillText("240°",srodek_kola_x-85,srodek_kola_y+50);
ctx.fillText("270°",srodek_kola_x-100,srodek_kola_y+5);
ctx.fillText("300°",srodek_kola_x-85,srodek_kola_y-40);
ctx.fillText("330°",srodek_kola_x-50,srodek_kola_y-70);
ctx.fillText("360°",srodek_kola_x-10,srodek_kola_y-85);
}
else if(podzialka=="kierunki")
{
ctx.fillStyle = "black";
ctx.lineWidth=2;
ctx.font="13px Verdana";
ctx.fillText("E",srodek_kola_x+75,srodek_kola_y+5);
ctx.fillText("SE",srodek_kola_x+50,srodek_kola_y+60);
ctx.fillText("SW",srodek_kola_x-70,srodek_kola_y+60);
ctx.fillText("S",srodek_kola_x-5,srodek_kola_y+85);
ctx.fillText("W",srodek_kola_x-90,srodek_kola_y+5);
ctx.fillText("N",srodek_kola_x-5,srodek_kola_y-85);
ctx.fillText("NE",srodek_kola_x+50,srodek_kola_y-55);
ctx.fillText("NW",srodek_kola_x-70,srodek_kola_y-55);
}
//rozrzut wiatru
ctx.fillStyle = "yellow";
ctx.strokeStyle = "yellow";
ctx.lineWidth=13;
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,70, radianAngle(wiatr_r1), radianAngle(wiatr_r2),false);
ctx.stroke();
//podziałka
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.lineWidth=8;
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,68, radianAngle(tablica_stopni[359]), radianAngle(tablica_stopni[1]),false);
ctx.stroke();
for(var i=1;i<=36;i++)
{
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,68, radianAngle(tablica_stopni[(i*10)-1]), radianAngle(tablica_stopni[(i*10)+1]),false);
ctx.stroke();
}
//kierunek wiatru
ctx.fillStyle = "red";
ctx.strokeStyle = "red";
ctx.lineWidth=34;
ctx.beginPath();
ctx.arc(srodek_kola_x,srodek_kola_y,65, radianAngle(kierunek-1), radianAngle(kierunek+1),false);
ctx.stroke();
}
</script>
1
Wg mnie w złą stronę idziecie. Po co robić to na canvas?
Lepiej zrobić to na SVG, ponieważ będzie to skalowalne (ponieważ SVG jest wektorowe), więc można będzie zrobić responsywną różę wiatrów, która dostosowuje swój rozmiar. SVG można też stylować(!). To nie jest grafika Canvas, która sobie siedzi, ale można je stylować, animować poszczególne elementy za pomocą CSS:
https://codepen.io/anon/pen/LyGpRm
można też za pomocą JavaScriptu zmieniać poszczególne elementy w SVG, czyli może być to równie dynamiczne co canvas.
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
Oczywiście, są sytuacje, kiedy to canvas jest lepszy, ale do takich rzeczy jak dla mnie lepiej użyć SVG.
0
Tutaj znalazłem porównanie canvas i svg:
https://msdn.microsoft.com/pl-pl/library/kurs-html5--svg--porownanie-z-canvas.aspx
Canvas wybrałem bo w rysowaniu łuku jest łatwiejszy w SVG rozbolała mnie głowa jak miałem narysować łuk...