[CSS] Manier om 9 circels in een circel te positioneren?*

[Paultje3181]

Is er een makkelijke manier om 9 circels (fixed size) in een optisch mooie circel te plaatsen? Of moet je dan zelf gaan rekenen? Hoe kan je dat dan het makkelijkst doen zodat je de coördinaten van de jpg's hebt? Iemand die hier een tooltje voor kent?

[Cartman!]

edit: heb ik die [JS] nu gewoon over t hoofd gezien?

[ Voor 75% gewijzigd door Cartman! op 27-10-2009 10:54 ]

[HuHu]

Knip negen cirkels uit een papiertje en ga het proberen.

[Paultje3181]

Ik bedoelde het in html uiteraard... Maar ik heb wel een wiskundige manier gevonden om de x en y coördinaten te berekenen...
Straal is 50
pi = 3.1415926535897932384626433832795
x = Sin(hoek * ( pi / 180) ) * straal
y = Cos(hoek * ( pi / 180) ) * straal
Hoek is 360/n, waar n het aantal delen is. Dit werkt op zich best goed...

[McVirusS]

Haal even je oude wiskunde boek uit de kast .

Om het toch nog clientside-achtig te maken .

JavaScript:

var numItems = 9; // Number of items
var radius = 500; // Radius of circle
var centerX = radius / 2; // Center x pos
var centerY = radius / 2; // Center y pos
var positions = Array();

for(var i = 0; i < numItems; i++) {
    var angle = i * (Math.PI*2) / numItems;
    var x = Math.round(Math.cos(angle) * radius) + centerX;
    var y = Math.round(Math.sin(angle) * radius) + centerY;
    
    positions[positions.length] = i + ": " + x + "," + y;
}

alert(positions.join("\n"));

Volgens mij klopt dat zo .

[McVirusS]

Met nog beetje javascript kan je hier mooi een soort van carrousel van maken .

[Bosmonster]

En klein detail, JPG's lijkt me niet het meest geschikte formaat voor cirkels. Ik zou een format pakken met transparency support, zoals PNG.

[McVirusS]

Bosmonster schreef op dinsdag 27 oktober 2009 @ 10:39:
En klein detail, JPG's lijkt me niet het meest geschikte formaat voor cirkels. Ik zou een format pakken met transparency support, zoals PNG.

Ligt er natuurlijk aan of er een achtergrondafbeelding achter zit en/of ze elkaar overlappen. Anders heb je niet eens transparantie nodig.

/smartass

[mcDavid]

McVirusS schreef op dinsdag 27 oktober 2009 @ 10:40:
[...]


Ligt er natuurlijk aan of er een achtergrondafbeelding achter zit en/of ze elkaar overlappen. Anders heb je niet eens transparantie nodig.

/smartass

Als je 6 kleine cirkels allemaal in vierkante plaatjes staan gaat er echt wel ergens een hoekje van een andere cirkel overlapt worden hoor

[Soultaker]

Dat hangt er dus net vanaf hoe groot ze zijn, zoals McVirusS aangeeft, en zelfs als er hoekjes overlappen is dat geen probleem als de achtergrondkleur uniform is. Het gaat pas mis als het hoekje van het ene plaatje over de cirkel in een ander plaatje valt...

[Bosmonster]

Sinds wanneer zijn cirkels foto's? Geen JPG dus.

/smartass

[mcDavid]

Beste oplossing by far:

XML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">

<circle r="300" style="fill: rgb(255, 255, 0); fill-opacity: 1;"/>
<circle cy="-200" r="50" id="bld" style="fill: rgb(255, 0, 0); fill-opacity: 1;"/>
<use xlink:href="#bld" transform="rotate(40)"/>
<use xlink:href="#bld" transform="rotate(80)"/>
<use xlink:href="#bld" transform="rotate(120)"/>
<use xlink:href="#bld" transform="rotate(160)"/>
<use xlink:href="#bld" transform="rotate(200)"/>
<use xlink:href="#bld" transform="rotate(240)"/>
<use xlink:href="#bld" transform="rotate(280)"/>
<use xlink:href="#bld" transform="rotate(320)"/>
</svg>

http://duft.nl/cirkel.svg

[ Voor 11% gewijzigd door mcDavid op 27-10-2009 13:11 ]

[Bosmonster]

Heel mooi, maar werkt niet standaard in IE en valt dus als bruikbare oplossing voor een openbare website al snel af lijkt me.

[Juup]

Bosmonster schreef op dinsdag 27 oktober 2009 @ 13:51:
Heel mooi, maar werkt niet standaard in IE en valt dus als bruikbare oplossing voor een openbare website al snel af lijkt me.

Je kunt svg converteren naar vml voor IE bv met http://vectorconverter.sourceforge.net/

[McVirusS]

Daarnaast voldoet het niet aan de vraag van de topicstarter .

[Paultje3181]

Blijkbaar heeft een modje er de JS bij gezet, want van mij had dit zeker niet in JS gehoeven. Sterker nog: dit gaat om css positionering...

Maar het is dus al opgelost door met wiskunde de x en y coördinaten te berekenen.

[BtM909]

En waarom had je bovenstaande niet in een TR gezet Volgende keer dan iets beter nadenken over de titel van je topic en je topicstart, want er mistte blijkbaar genoeg om te weten waarmee je het wilde uitvoeren