9

Estou a utilizar um círculo SVG e quero dividir com um line criado dinamicamente em 12 partes. Só consigo dividir em 4 partes, através do seu raio. Sei que é possível através do sin e cos.

Exemplo jsfiddle: https://jsfiddle.net/k3epungk/

Código-fonte:

//raio circulo
r=50;

var circle = document.getElementById("circle");
circle.setAttribute("cx",100);
circle.setAttribute("cy",100);
circle.setAttribute("r",r);

//posiçao
x=100;
y=100;

var array_y1=[(y - r)+10,y,(y + r)+10,y]; 
var array_y2=[(y - r)-10,y,(y + r)-10,y]; 

var array_x1=[x,(x + r)+10,x,(x - r)+10]; 
var array_x2=[x,(x + r)-10,x,(x - r)-10]; 

var svg = document.getElementById('svg');
		
for(var i=0;i<=3;i++){
    
    var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
    newLine.setAttributeNS(null,'id','line'+i);
    newLine.setAttributeNS(null,'x1',array_x1[i]);
    newLine.setAttributeNS(null,'y1',array_y1[i]);
    newLine.setAttributeNS(null,'x2',array_x2[i]);
    newLine.setAttributeNS(null,'y2',array_y2[i]);
    newLine.setAttributeNS(null,"stroke","black");
    newLine.setAttributeNS(null,"stroke-width","1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

1 Resposta 1

13

Consegui. Eis o fiddle: https://jsfiddle.net/m5ojvsbe/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão azul ► Executar que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

3
  • Obrigado, funciona perfeitamente. Queria que so os 4 traços centrais fossem um pouco maiores que os outros.
    – akm
    Commented 16/04/2015 às 10:54
  • @akm Editado. É assim que você quer? Ou seria maiores em questão de comprimento ao invés de espessura? Commented 16/04/2015 às 11:02
  • Isso mesmo, obrigado
    – akm
    Commented 16/04/2015 às 11:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .