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