1

salut,

je suis en train de saturer, j'ai besoin d'aide :- )

je me suis fait un "gradient picker", il me sort un angle, le css3 prend aussi un angle, mais les canvas html5 ne prennent que des coordonnés

j'essais donc de convertir, dans les deux sens, un angle vers une position sur le perimetre,
pour les cercles pas de soucis mais pour les rectangles je me rend fou,

mon problème actuel est de convertir la position sur le rectangle vers l'angle d'origine,

j'aurais pensé que la même fonction que pour les cercles (utiliser atan) fonctionnerais, mais non :/
je n'arrive pas à contrebalancer "les coins"

en fait je pense que mon vrai problème est l'inverse, convertir l'angle vers le perimetre,
actuellement je fout le perimetre à plat puis fait le ratio entre celui ci et 360 pour transposer l'angle en une position sur le perimetre, ensuite suivant la portion ou je me trouve j'ajoute un angle arbitraire
cela fait que l'avancement sur le perimetre est "linéaire" ce qui doit induire la différence avec ma fonction inverse

j'ai une demo la http://jsfiddle.net/r043v/Z7Zg7/86/

alpha est l'angle actuel, alpha' l'angle de retour calculé depuis les coordonnés, dalpha est la différence entre les deux

j'ai toujours été nul avec les cosinus, help me ^^

2

avatar

3

putain on fait de belles merdouilles en js de nos jours grin

4

awesome \o/

merci beaucoup ! tu as l'air d'en manger au p'tit dej :- D

autorise tu l'intégration éventuelle de ton code dans fabric.js ?

squalyl > oui c'est vraiment puissant, et aussi utilisable coté serveur avec nodejs

5

C'est de la géométrie de base ^^
Tu en fais ce que tu veux smile
avatar

6

merci :- )

existe t'il des soft permettant de m'aider dans des cas du genre ?

géométrie de base mais ca doit bien faire 10 ans que je n'y avais pas touché ^^
j'en suis pas la mais presque :
05ZQ

7

hey :- )

j'aimerais améliorer le drag&drop de mon gradient picker,
mon approche naïve fonctionne mais c'est loin d'être top j'ai du rater un truc

radass.jpg => radass2.jpg

le fiddle : http://jsfiddle.net/r043v/5XMNN/

le code en relation (ligne 105) :
function mouse2left(ev,min,max){ var bx = ev.pageX; var by = ev.pageY; var ax = pradius + c.pos.left; var ay = pradius + c.pos.top; var ab = Math.sqrt( Math.pow( bx - ax, 2 ) + Math.pow( by - ay, 2 ) ); var ang = legalAngle(c.angle); var ac, left; if(ang > 315 || ang < 45 || (ang > 135 && ang < 225 ) ){ // horizontal, +- 45° ac = Math.cos( deg2rad * ang ) * ab; if(bx < ax) ac = -ac; } else { ac = Math.sin( deg2rad * ang ) * ab; // vertical +- 45° if(by < ay) ac = -ac; } left = (ac + (barw/2)) - aradius; left = Math.max(Math.min(left,max),min); return parseInt(left,10); }