Discussion :

[feelwatt]

Bonjour,

Après quelques semaines sur le truc, j'ai réussi à:

• Dessiner des formes (lignes, rect. et circle) avec la souris (onmousemove) sur canvas

• De choisir la couleur (stroke)

• Des les remplir avec une couleur au choix

• Des les sortir en svg

Et je me demande comment modifier ces formes, en cliquant sur un des points et en le déplaçant.
Mais il y a des chances que je réinvente une roue déjà existante, non ?

De plus, je cherche à calculer la longueur des lignes (et la surface des rect et circ.), et là c'est papa Pythagore qui s'invite dans sublimText...

Il y aurait-il un script qui permettrait de faire cela ?

Merci

[psychadelic]

Oui, il existe plus de 6000 librairies JavaScript dédiées aux problemes mathématiques => https://github.com/search?l=JavaScri...e=Repositories

[feelwatt]

Merci Psychadelic,
6000 librairies... belle aventure.

Peut être quelqu'un aurait une idée sur ce calcul de longueur de ligne et de surface de polygones ?
Dessinées à la souris.

[SpaceFrog]

Regarde du coté de raphael js ... ?

[Invité]

salut,

calculer une longueur de ligne est trivial et même si ca relève plus des maths ca un developpeur devrait connaitre?
pour tes deux points A(x1,y1), B(x2,y2)
la longueur de ton segment [AB] est donnée par d=sqrt((y2-y1)^2+(x2-x1)^2) idem en js Math.sqrt(Math.pow(x2-x1, 2)+ Math.pow(y2-y1,2)

un triplet pythagoricien classique est <3,4,5> (5 hypothénuse) et tu peux vérifier si ton calcule est valide avec les points A(0,0), B(3,0), C(0,4) et tu t'attends à trouver pour BC la longueur...5.

Calculer la surface d'un polygone pas si trivial.
Dans le cas d'un polygone convexe, facile.
Dans le cas d'un polygone concave, facile.
Dans le cas d'un polygone avec des trous...plus dur
Dans le cas d'un polygone croisé...tricky

Une bonne approche est de triangulariser ton triangle (earcut, seidel, kirchpatrick...) et je te conseille d'utiliser une librairie si tu veux un truc fiable.
Mais si tu t'en tapes et veux juste t'amuser un peu, je te conseille d'implémenter earcut qui est relativement facile à comprendre (mais pas top d'un point de vu complexité temporelle)

voici un exemple d'implem qui s'arrête à concave et lèvera (au mieux) une exception si ton polygone a des sommets confondus... est croisé, etc et aupire ne dira rien et te filera des triangles pas bons

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
 
 
function triangulate(v){
    function vec(x,y){return [y[0]-x[0], y[1]-x[1]]}
    function isIn(p, p0, p1, p2) {//http://jsfiddle.net/PerroAZUL/zdaY8/1/
        var A = 1/2 * (-p1[1] * p2[0] + p0[1] * (-p1[0] + p2[0]) + p0[0] * (p1[1] - p2[1]) + p1[0] * p2[1]);
        var sign = A < 0 ? -1 : 1;
        var s = (p0[1] * p2[0] - p0[0] * p2[1] + (p2[1] - p0[1]) * p[0] + (p0[0] - p2[0]) * p[1]) * sign;
        var t = (p0[0] * p1[1] - p0[1] * p1[0] + (p0[1] - p1[1]) * p[0] + (p1[0] - p0[0]) * p[1]) * sign;
        return s > 0 && t > 0 && (s + t) < 2 * A * sign;
    }
    var triangles = [];
    while(v.length >=3){
        var n = v.length;
        for(var i=0;i<n; ++i){
            var [A,B,C] = [v[(i-1+n)%n], v[i], v[(i+1)%n]];
            if(Math.atan2(...vec(B,A).reverse())-Math.atan2(...vec(B,C).reverse())>Math.PI){
                continue
            }
            var ok = true;
            for(var j = i+2; j<i+n;++j){
                var q = v[(j+n)%n]
                if(isIn(q, A,B,C)){
                    ok = false;
                    break;
                }
            }
            if(!ok)continue;
            triangles.push( [A,B,C] )
            v.splice(i,1)
            n = v.length;
            break;
        }
    }
    return triangles;
}
//usage
var v = [[0,0],[4,0],[4,1],[1,1],[1,2],[2,2],[2,3],[3,3],[3,2],[4,2],[4,4],[0,4]]
var triangles = triangulate(v)
/*
[ [ [ 0, 0 ], [ 4, 0 ], [ 4, 1 ] ],
[ [ 0, 0 ], [ 4, 1 ], [ 1, 1 ] ],
[ [ 0, 4 ], [ 0, 0 ], [ 1, 1 ] ],
[ [ 0, 4 ], [ 1, 1 ], [ 1, 2 ] ],
[ [ 0, 4 ], [ 1, 2 ], [ 2, 2 ] ],
[ [ 0, 4 ], [ 2, 2 ], [ 2, 3 ] ],
[ [ 0, 4 ], [ 2, 3 ], [ 3, 3 ] ],
[ [ 3, 3 ], [ 3, 2 ], [ 4, 2 ] ],
[ [ 3, 3 ], [ 4, 2 ], [ 4, 4 ] ],
[ [ 0, 4 ], [ 3, 3 ], [ 4, 4 ] ] ];
*/

Une fois ton polygone décomposé en triangles tu peux sommer les aires de tes triangles (et calculer l'aire d'un triangle c'est pas très dur)

Si en fait t'en as rien à carrer de te farcir la triangularisation, pe devrais tu regarder du coté de libtess ou earcut.js

Pour raphel.js et autre je ne connais pas, je ne me prononce pas!

[feelwatt]

Je suis d'accord,
un développeur devrait connaitre. Je me suis penché sur la question,
merci galerien69 de la piste, pas très trivial mais ca évite de faire des Sudoku .

Je m'y penche et donnerai des news.

Merci.

[melka one]

bonjour

le plus simple serait a la creation d'une forme d'enregistrer les valeur utilisé pour créer la forme dans un objet sa limitera les calcules par la suite

[feelwatt]

Oui,
pour 'instant je stocke les coordonnées des points dans un textarea, pour les enregistrer dans la bd.
Car j'aimerais retrouver les formes par la suite
et pouvoir les modifier mais là... Y a du taf !
Je crois qu'il y a un truc dans les canvas pour selectionner et déplacer.

Ca va être chaud.