Javascript HTML5 és némi matematika.
Sziasztok, a következő problémával ügyködöm. A technológia javascript és HTML5.
A célom az lenne, hogy egy adott pont köré rajzolt kör ívén egyenlő távolságra kis ellipsziseket rajzoljak. A megoldásom a következő;
-----------------------------------------------------------------------
centerX = 400;
centerY = 400;
distance = 420;
pieces = 7;
for (var i = 0; i < pieces; i++) {
var ellipse = makeSVG('ellipse', { style: 'fill:yellow', cx: centerX + distance * Math.cos(i * (360 / pieces)), cy: centerY + distance * Math.sin(i * (360 / pieces)), rx: "30", ry: "50" });
$container[0].appendChild(ellipse);
}
-----------------------------------------------------------------------
A MakeSVG második paramétere az attribútumokat várja. Bár ez most nemfontos, de azért leírom ezt is:
-----------------------------------------------------------------------
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
-----------------------------------------------------------------------
A problémám az, hogy ez a kód bár egyenlő távolságra igyekszik kitenni az ellipsziseket, de szembe egymással. Tehát ha a pieces = 6 akkor hármat kitesz az egyik oldalra egyenlő távolságra, meg hármat velük szembe. Én azonban azt szeretném, hogy abszolúte egyenlően legyenek elosztva a kör kerülete mentén, tehát ha a pieces = 6, akkor az ellipszisek középpontjai, és az egész kör középpontja által bezárt szög 60 fok.
Remélem érthető voltam, ha nem, akkor kérdezzetek.
■ A célom az lenne, hogy egy adott pont köré rajzolt kör ívén egyenlő távolságra kis ellipsziseket rajzoljak. A megoldásom a következő;
-----------------------------------------------------------------------
centerX = 400;
centerY = 400;
distance = 420;
pieces = 7;
for (var i = 0; i < pieces; i++) {
var ellipse = makeSVG('ellipse', { style: 'fill:yellow', cx: centerX + distance * Math.cos(i * (360 / pieces)), cy: centerY + distance * Math.sin(i * (360 / pieces)), rx: "30", ry: "50" });
$container[0].appendChild(ellipse);
}
-----------------------------------------------------------------------
A MakeSVG második paramétere az attribútumokat várja. Bár ez most nemfontos, de azért leírom ezt is:
-----------------------------------------------------------------------
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
-----------------------------------------------------------------------
A problémám az, hogy ez a kód bár egyenlő távolságra igyekszik kitenni az ellipsziseket, de szembe egymással. Tehát ha a pieces = 6 akkor hármat kitesz az egyik oldalra egyenlő távolságra, meg hármat velük szembe. Én azonban azt szeretném, hogy abszolúte egyenlően legyenek elosztva a kör kerülete mentén, tehát ha a pieces = 6, akkor az ellipszisek középpontjai, és az egész kör középpontja által bezárt szög 60 fok.
Remélem érthető voltam, ha nem, akkor kérdezzetek.
http://jsfiddle.net/nfuzydgu/
Hogy mi hiányzott legyen házi feladat. :)