Rectangle avec coins arrondis

Résolu
Signaler
Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010
-
Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010
-
Bonsoir!... ou bonjour! (selon).



Voilà passer des heures a essayer de faire un prototype d'un rectangle avec coins arrondis.

Mais j'ai beau relire et relire mon code, je vois pas ou se trouve le/les erreurs...

Là ça me donne juste un trait qui part du haut gauche de la scène et
qui (apparament) s'arrête au premier point de mon premier angle...

Si quelqu'un a du courage...:



MovieClip.prototype.dRCA=function(largeur,hauteur,arrondi,rotation,x,y){

//on invoque la méthode (dRCA=dessin rectangle coins arrondis)

if(largeur<(arrondi*2)){

largeur=arrondi*2;

}

if(hauteur<(arrondi*2)){

hauteur=arrondi*2;

}

//il faut que la dimension du rectangle soit au moins aussi large que les coins...

rotation=Math.PI*rotation/180;

//on convertit la rotation de degrés en radians

var r=Math.sqrt(Math.pow(largeur/2,2)+Math.pow(hauteur/2,2));

//on calcule la distance du centre au coin réel (virtuel) du rectangle

var rx=Math.sqrt(Math.pow(largeur/2,2)+Math.pow((largeur/2)-arrondi,2));

//on calcule la distance du centre au bord extérieur du coin inférieur droit

var ry=Math.sqrt(Math.pow((largeur/2)-arrondi,2)+Math.pow(hauteur/2,2));

//on calcule la distance du centre au bord intérieur du coin inférieur droit

var r1Angle=Math.atan(((hauteur/2)-arrondi)/(largeur/2));

var r2Angle=Math.atan((hauteur/2)/(largeur/2))-r1Angle;

var r3Angle=Math.atan(((largeur/2)-arrondi)/(hauteur/2));

var r4Angle=(Math.PI/2)-r1Angle-r2Angle-r4Angle;

//r1Angle est l'angle compris entre l'axe des X qui passe par le centre et la ligne rx

//r2Angle est l'angle compris entre rx et r

//r3Angle est l'angle compris entre r et ry

//r4Angle est l'angle compris entre ry et l'axe des Y qui passe par le centre

var ctrl1Dist=Math.sqrt(2*Math.pow(arrondi,2));

//on calcule la distance du point de contrôle au centre de l'arrondi

var ctrl1X,ctrl1Y;

//déclaration des variables pour calculer le point de contrôle

rotation+=r1Angle+r2Angle+r3Angle;

var x1=x+ry*Math.cos(rotation);

var y1=y+ry*Math.sin(rotation);

//on calcule le point de départ du premier côté

this.moveTo(x1,y1);

rotation+=2*r4Angle;

x1=x+ry*Math.cos(rotation);

y1=y+ry*Math.sin(rotation);

this.lineTo(x1,y1);

//on trace le segment

rotation+=r3Angle+r2Angle;

x1=x+rx*Math.cos(rotation);

y1=y+rx*Math.sin(rotation);

//définit “rotation“ au point de départ du second segment

//on calcule les coordonnées x,y

if(arrondi>0){

ctrl1x=x+r*Math.cos(rotation-r2Angle);

ctrl1Y=y+r*Math.sin(rotation-r2Angle);

this.curveTo(ctrl1X,ctrl1Y,x1,y1);

//si les coins sont arrondis,on calcule le point de contrôle et on dessine la courbe

}

rotation+=2*r1Angle;

x1=x+rx*Math.cos(rotation);

y1=y+rx*Math.sin(rotation);

this.lineTo(x1,y1);

//point terminal du second côté

rotation+=r2Angle+r3Angle;

x1=x+ry*Math.cos(rotation);

y1=y+ry*Math.sin(rotation);

//on calcule le point de départ du troisième côté

if(arrondi>0){

ctrl1X=x+r*Math.cos(rotation-r3Angle);

ctrl1Y=y+r*Math.sin(rotation-r3Angle);

this.curveTo(ctrl1X,ctrl1Y,x1,y1);

//dessine le coin arrondi (si besoin)

}

rotation+=2*r4Angle;

x1=x+ry*Math.cos(rotation);

y1=y+ry*Math.sin(rotation);

this.lineTo(x1,y1);

//on calcule le point terminal du troisième côté

rotation+=r3Angle+r2Angle;

x1=x+rx*Math.cos(rotation);

y1=y+rx*Math.sin(rotation);

//point de départ du quatrième côté

if(arrondi>0){

ctrl1X=x+r*Math.cos(rotation-r2Angle);

ctrl1Y=y+r*Math.sin(rotation-r2Angle);

this.curveTo(ctrl1X,ctrl1Y,x1,y1);

//dessine le coin si besoin

}

rotation+=2*r1Angle;

x1=x+rx*Math.cos(rotation);

y1=y+rx*Math.sin(rotation);

this.lineTo(x1,y1);

//on calcule le point terminal du quatrième côté

rotation+=r3Angle+r2angle;

x1=x+ry*Math.cos(rotation);

y1=y+ry*Math.sin(rotation);

if(arrondi<0){

ctrl1X=x+r*Math.cos(rotation-r3Angle);

ctrl1Y=y+r*Math.sin(rotation-r3Angle);

this.curveTo(ctrl1X,ctrl1Y,x1,y1);

//on calcule le point terminal de l'arrondi et on le dessine si besoin

}

};

this.createEmptyMovieClip("monarrondi",1);

monarrondi.lineStyle(1.5,0x000000,100);

monarrondi.dRCA(100,50,15,0,200,200);



Toutes réponses même une simple piste seraient la bien venue...

Mais peut-être qu'il y'a moyen de faire plus simple?



Un Grand Merci à tout ceux qui se pencheront là-dessus!

A++.

6 réponses

Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010

Effectivement il y'avait beaucoup plus simple... à vouloir aller trop
vite on finit par s'embrouiller! je dois avouer qu'on m'a bien aider
sur ce coup:



MovieClip.prototype.dRCA=function(x,y,angleA,angleZ,rayon){

var angleA=angleA/180*Math.PI;

var angleZ=angleZ/180*Math.PI;

var segmentAngle=((angleZ-angleA)/8);

var ctrlDist=rayon/Math.cos(segmentAngle/2);

with(this){

lineStyle(2,0x000000,100);

moveTo(x+rayon*Math.cos(angleA),y-rayon*Math.sin(angleA));

for (var e=1;e<=8;e++){

X=x+rayon*Math.cos(angleA+e*segmentAngle);

Y=y-rayon*Math.sin(angleA+e*segmentAngle);

ctrlX=x+ctrlDist*Math.cos(angleA+e*segmentAngle-segmentAngle/2);

ctrlY=y-ctrlDist*Math.sin(angleA+e*segmentAngle-segmentAngle/2);

curveTo(ctrlX,ctrlY,X,Y);

}

}

};

MovieClip.prototype.rectangle=function(l,h,r){

with(this){

lineStyle(2x000000,100);

moveTo(r,0);

lineTo(l-r,0);

moveTo(l,r);

lineTo(l,h-r);

moveTo(l-r,h);

lineTo(r,h);

moveTo(0,h-r);

lineTo(0,r);

dRCA(r,r,90,180,r);

dRCA(l-r,r,0,90,r);

dRCA(l-r,h-r,-90,0,r);

dRCA(r,h-r,-180,-90,r);

}

};

cont=createEmptyMovieClip("conteneur",1);

with(cont){

_x=100;

_y=100;

rectangle(100, 200,15);

}



Voilà dès que j'ai le temps, je commente et j'ajoute à mon tuto qui cette fois est terminé... je passe à autre chose.

Merci.

A++.

(//)
Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010

mais nooooooon!!!!!



lineStyle(2,0x000000,100);



je vais me dormir...
Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010

bon .. y'en a déjà une:





if(arrondi>0){


ctrl1x=x+r*Math.cos(rotation-r2Angle);


ctrl1Y=y+r*Math.sin(rotation-r2Angle);


this.curveTo(ctrl1X,ctrl1Y,x1,y1);


//si les coins sont arrondis,on calcule le point de contrôle et on dessine la courbe



c'est ctrl1X et non ctrl1x... mais ça change pas le
résultat. De plus je viens de tester en Flash 6 et là c'est
indescriptible ça me donne un embryon de dessin qui ne veut rien dire
du tout...

et j'ai rien dans sortie. ni en Flash 6 ni en Flash 7...
Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010

Bon c'est au début que ça joue pas... vous allez rire mais j'ai
l'impression qu'il manque quelque-chose... mais je trouves pas quoi.

Y'a certainement moyen de faire plus simple, c'est pas possible un code
pareil pour un malheureux rectangle avec ses ridicules coins arrondis!!
pffff... je planche, je planche...
Messages postés
517
Date d'inscription
mardi 23 décembre 2003
Statut
Membre
Dernière intervention
24 octobre 2006
1
ce serait pas plus facile de dessinner ton rectangle et aprés de faire un _rotation avec l'angle fournit en parametre ?

Ainsi tu n'aurait plus de cosinus et sinus...

A tchao !
Messages postés
1236
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
6 octobre 2010

oups... j'ai oublié une virgule:



MovieClip.prototype.rectangle=function(l,h,r){

with(this){

lineStyle(2,x000000,100);



sorry...

(//)