Discussion :

[bronon]

Bonsoir à tous,
pour finir la semaine, je bute sur un problème de dessin dynamique d'un arc de cercle.
Je voudrais dessiner un de cercle de 270° sens trigonométrique de manière progressive !
Malgré de nombreuses recherches sur Internet, je n'ai rien trouvé de très utile. j'ai fini avec ce code qui affiche correctement l'arc de cercle là ou je souhaite mais sans progressivité.
Mon code : ($ pour jQuery)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
	$(function(){
 
        var svgns="http://www.w3.org/2000/svg";
 
        var svg=document.createElementNS(svgns,"svg");
        svg.setAttribute('width', '300px');
        svg.setAttribute('height', '300px');
        document.body.appendChild(svg);
 
        var cx=150;
        var cy=150;
 
        addPath(svg,"arc3","#FFF","#006699", 5,regularArcData(cx,cy,60+4,-60,280,false));
 
        function addPath(theSvg,id,fill,stroke,strokeWidth,data){
            var path=document.createElementNS(svgns,"path");
            path.setAttribute("id",id);
            path.setAttribute("fill",fill);
            path.setAttribute("stroke",stroke);
            path.setAttribute("stroke-width",strokeWidth);
            path.setAttribute("d",data);
            theSvg.appendChild(path);
 
            var pathSvg=""
            pathSvg+="\n"
                      +"<path id='"+id
                      +"' fill='"+fill
                      +"' stroke='"+stroke
                      +"' stroke-width='"+strokeWidth
                      +"' d='"+data+"'/>";
             $("#paths").text($("#paths").text()+pathSvg);
        }
 
        function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){
//			Source http://jsfiddle.net/m1erickson/VbqnW/
			for (var i = 0; i < 270; i++) {
				var offsetRadians=0;  // -Math.PI/2 for 12 o'clock
				var sweepFlag=(isCounterClockwise)?0:1;
				var startRadians=offsetRadians+startDegrees*Math.PI/180;
				var endRadians=offsetRadians+(endDegrees+i)*Math.PI/180;
				var largeArc=( (endRadians-startRadians) % (2*Math.PI) ) > Math.PI ? 1 : 0;
				var startX=parseInt(cx+radius*Math.cos(startRadians));
				var startY=parseInt(cy+radius*Math.sin(startRadians));
				var endX=  parseInt(cx+radius*Math.cos(endRadians));
				var endY=  parseInt(cy+radius*Math.sin(endRadians));
				var space=" ";
				var arcData="";
 
				arcData+="M"+space+startX+space+startY+space;
				arcData+="A"+space+radius         +space
								  +radius         +space
								  +offsetRadians  +space
								  +largeArc       +space
								  +sweepFlag      +space
								  +endX           +space
								  +endY;
				return(arcData);
			}
        }

Si qqu'un à une piste à me proposer d'avance merci.
Cordialement

[kevin254kl]

Bonsoir, il y- a la librairie Raphael qui est fait pour vous http://raphaeljs.com/vous pouvez personnaliser comme vous le souhaitez cordialement

[bronon]

Merci pour ta réponse, je n'utilise pas Raphaël.js ni d'autre frameWorks et je voudrais éviter, j'ai de très nombreux boutons que j'ai dessiné en SVG pur et qui fonctionne très bien, donc si je peux continuer comme ça ça serait mieux je pense !
j'ai essayé Raph mais leurs exemples sont d'une complexité folle.
Cordialement

[kevin254kl]

Avec un timer alors , lors de l'affichage vous ralentissez pour que cela soit visible,c'est juste une idée mais j'aurais tenté ça.

[NoSmoking]

Bonjour,

Avec un timer...

oui à mettre dans la boucle par exemple.

[bronon]

J'ai bien avancé sur le pb, j'arrive à faire ce je veux avec ce code : (bricoler à partir d'un ex Web)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="225"
   height="225"
   onload="init(evt)">
	<defs>
    </defs>	
 
   <style>
   	 .gear{
   	 	stroke: #006699;
   	 	fill:	red;
   	 }
   </style>
 
  <script type="text/ecmascript"><![CDATA[
  	var svgNS = "http://www.w3.org/2000/svg";
 
	function init(evt)
	{
		if ( window.svgDocument == null )
		{
			svgDocument = evt.target.ownerDocument;
		}
		addRotateTransform('loaderSimple', 2, 1);
	}
 
	function addRotateTransform(target_id, speed, direction) {
		var element_to_rotate = svgDocument.getElementById(target_id);
		var my_transform = svgDocument.createElementNS(svgNS, "animateTransform");
 
		var bb = element_to_rotate.getBBox();
		var cx = bb.x + bb.width/2;
		var cy = bb.y + bb.height/2;
 
		my_transform.setAttributeNS(null, "attributeName", "transform");
		my_transform.setAttributeNS(null, "attributeType", "XML");
		my_transform.setAttributeNS(null, "type", "rotate");
		my_transform.setAttributeNS(null, "dur", speed + "s");
		my_transform.setAttributeNS(null, "repeatCount", "indefinite");
		my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
		my_transform.setAttributeNS(null, "to", 360*direction+" "+cx+" "+cy);
 
		element_to_rotate.appendChild(my_transform);
		my_transform.beginElement();
	}
  ]]></script>
 
  <path id="loaderSimple" fill="none" stroke="red" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M74.592,6.486c16.437,8.369,27.695,25.448,27.695,45.157c0,27.971-22.675,50.644-50.644,50.644C23.674,102.287,1,79.614,1,51.644C1,23.674,23.674,1,51.644,1c3.004,0,5.946,0.262,8.807,0.763"/>
</svg>

maintenant je voudrais mettre le path en <defs> avec stroke & stroke-width comme variable JS et là je coince !
Si qqu'un peut me donner une piste d'avance merci !
Bon AM à tous