Manipulation of svg path with JSYG framework
npm install jsyg-pathManipulation of svg path with JSYG framework
``shell`
npm install jsyg-path
`javascript
import Path from "jsyg-path"
let path = new Path();
path.moveTo(0,0).lineTo(30,50).lineTo(80,80);
path.appendTo('svg#mySVGContainer');
path = new Path('#myPath');
path.normalize(); //M,L,C,Z,z segments only
`
##### Table of Contents
* Path
* Parameters
* getLength
* clone
* createSeg
* Parameters
* Examples
* cloneSeg
* Parameters
* addSeg
* Examples
* clear
* getSeg
* Parameters
* getSegList
* setSegList
* Parameters
* getLastSeg
* appendSeg
* Parameters
* Examples
* insertSeg
* Parameters
* replaceSeg
* Parameters
* removeSeg
* Parameters
* moveTo
* Parameters
* Examples
* lineTo
* Parameters
* Examples
* curveTo
* Parameters
* Examples
* close
* getCurPt
* Parameters
* Examples
* applyPath
* Parameters
* rel2abs
* hasArcs
* hasRelSeg
* isNormalized
* nbSegs
* splitSeg
* Parameters
* split
* slice
* Parameters
* reverse
* seg2Polyline
* Parameters
* toPolyline
* Parameters
* simplify
* Parameters
* isClosed
* autoSmooth
* Parameters
* insertPointAtLength
* Parameters
* isPointInside
* Parameters
* normalize
* getSegLength
* Parameters
* getLengthAtSeg
* Parameters
* getSegAtLength
* Parameters
* getPointAtLength
* Parameters
* getRotateAtLength
* Parameters
* getTangentAtLength
* Parameters
* findSeg
* Parameters
* getNearestPoint
* Parameters
* getLengthAtPoint
* Parameters
* arc2bez
* Parameters
* toCubicCurve
* rel2absSeg
* Parameters
* getSegDist
* Parameters
* clonePath
* Parameters
* isShapeInside
* Parameters
* kappa
* getLayoutAttrs
* Parameters
#### Path
Chemins SVG
##### Parameters
* arg optionnel, argument JSYG faisant référence à un chemin svg (balise \
Returns Path
##### getLength
Renvoie la longueur totale du chemin
Returns Number
##### clone
Clone le chemin
Returns Path
##### createSeg
Crée un objet segment.
Le premier argument est la lettre correspondant au segment, les arguments suivants sont les mêmes que les méthodes natives décrites dans la norme SVG
###### Parameters
* type {String} lettre correspondant au segment ('M','L','C','Z', etc)
###### Examples
`javascript`var path = new Path();
var seg = path.createSeg('M',0,0);
var seg2 = path.createSeg('L',50,50);
var seg3 = path.createSeg('C',50,50,30,10,10,30);
Returns SVGPathSeg
##### cloneSeg
Clone un segment
###### Parameters
* seg segment ou indice du segment à cloner.
Returns SVGPathSeg
##### addSeg
Ajoute un segment à la liste
###### Examples
`javascriptvar path = new Path();
path.addSeg('M',0,0);
path.addSeg('C',50,50,10,30,30,10);
// éuivalent à
var seg = path.createSeg('M',0,0);
path.appendSeg(seg);
seg = path.createSeg('C',50,50,10,30,30,10);
path.appendSeg(seg);
`
Returns Path
##### clear
Réinitialise la liste des segments
Returns Path
##### getSeg
récupère un segment
###### Parameters
* i indice du segment
Returns SVGPathSeg
##### getSegList
récupère la liste des segments sous forme de tableau
Returns Array
##### setSegList
Trace le chemin à partir d'une liste de segments
###### Parameters
* segList tableau de segments
Returns Path
##### getLastSeg
récupère le dernier segment
Returns SVGPathSeg
##### appendSeg
Ajoute un objet segment à la liste
###### Parameters
* seg objet segment
###### Examples
`javascriptvar path = new Path();
var seg = path.createSeg('M',0,0);
path.appendSeg(seg);
//equivalent à
path.addSeg('M',0,0);
`
Returns Path
##### insertSeg
Insert un segment à l'indice donné
###### Parameters
* seg objet segmenti
* indice ou insérer le segment
Returns Path
##### replaceSeg
Remplace un segment
###### Parameters
* i indice du segment à remplacerseg
* nouveau segment
Returns Path
##### removeSeg
Supprime un segment
###### Parameters
* i indice du segment à supprimer
Returns Path
##### moveTo
Ajoute un segment de déplacement
###### Parameters
* x abcissey
* ordonnée
###### Examples
`javascriptvar path = new Path();
path.moveTo(40,40);
//équivalent à
path.addSeg('M',40,40);
//ou encore à
var seg = path.createSeg('M',40,40);
path.appendSeg(seg);
`
Returns Path
##### lineTo
Ajout un segment de droite
###### Parameters
* x abcissey
* ordonnée
###### Examples
`javascriptvar path = new Path();
path.lineTo(40,40);
//équivalent à
path.addSeg('L',40,40);
//ou encore à
var seg = path.createSeg('L',40,40);
path.appendSeg(seg);
`
Returns Path
##### curveTo
Ajoute un segment de Bézier (cubique)
###### Parameters
* x1 abcisse du 1er point de contrôley1
* ordonnée du 1er point de contrôlex2
* abcisse du 2ème point de contrôley2
* ordonnée du 2ème point de contrôlex
* abcisse du point d'arrivéey
* ordonnée du point d'arrivée
###### Examples
`javascriptvar path = new Path();
path.curveTo(40,40,10,30,30,10);
//équivalent à
path.addSeg('C',40,40,10,30,30,10);
//ou encore à
var seg = path.createSeg('C',40,40,10,30,30,10);
path.appendSeg(seg);
`
Returns Path
##### close
Ferme le chemin (ajout d'un segment "Z")
Returns Path
var path = new Path();
path.curveTo(40,40,10,30,30,10);
path.close();//équivalent à
path.addSeg('Z');//ou encore à
var seg = path.createSeg('Z');
path.appendSeg(seg);##### getCurPt
* See: Path.prototype.rel2abs
Récupère le point courant.
Un segment donné ne renseigne que du point d'arrivée et non du point de départ dont on a souvent besoin.
Attention, cela ne marche qu'avec des segments définis en absolu et non en relatif. Utilisez
si besoin la méthode rel2abs.###### Parameters
* i
indice du segment###### Examples
`
javascriptvar path = new Path();
path.attr('d','M0,0 h50path.getCurPt(0); // {x:20,y:20}
path.getCurPt(1); // {x:20,y:20}
path.getCurPt(2); // {x:20,y:20}
`Returns Vect
##### applyPath
Applique le tracé d'un autre chemin
###### Parameters
* path
argument JSYG faisant référence à un cheminReturns Path
##### rel2abs
Remplace les segments relatifs en segments absolus
Returns Path
##### hasArcs
Teste si le chemin contient des arcs ou non (segments a ou A)
Returns Boolean
##### hasRelSeg
Teste si le chemin contient des segments relatifs ou non
##### isNormalized
Teste si le chemin est normalisé ou non. Normalisé signifie que tous ces segments sont absolus et uniquement de type M, L, C ou Z (z).
Returns Boolean
##### nbSegs
Renvoie le nombre de segments
##### splitSeg
Scinde le segment en deux et renvoie un objet Path contenant les deux nouveaux segments.
###### Parameters
* ind
indice du segment à diviser en 2.Returns Path
##### split
Scinde chaque segment du chemin en 2.
Returns Path
##### slice
Extrait une portion du chemin et renvoie un objet Path contenant les segments de cette portion.
###### Parameters
* begin
indice du premier segment. Si négatif, on part de la fin.end
*indice du dernier segment. Si négatif, on part de la fin. Si non précisé, dernier segment.Returns Path
##### reverse
Inverse l'ordre des points. Pas de différence visuelle.
Returns Path
##### seg2Polyline
Transforme un segment quelconque en une série de segments de droites.
nécessite un segment normalisé (M,L,C,Z,z).###### Parameters
* ind
indice du segmentnbsegs
*nombre de segments de droite pour approximer le segment initial (dans le cas d'un segment C).Returns Path
##### toPolyline
Transforme le chemin en une série de segments de droite.
Le chemin doit être normalisé.###### Parameters
* nbsegs
nombre de segments pour approximer les courbes.Returns Path
##### simplify
Simplification du chemin par l'algorithme de Douglas-Peucker
###### Parameters
* tolerance
screen
*Returns Path
##### isClosed
Teste si le chemin est fermé ou non
Returns Boolean
##### autoSmooth
Lisse le chemin de manière automatique, sans avoir à définir de points de contrôles.
###### Parameters
* ind
optionnel, indice du segment. Si précisé, le chemin ne sera lissé qu'autour de ce point.Returns Path
##### insertPointAtLength
Insert un point à la distance précisée. Pas de changement visuel.
###### Parameters
* length
NumberReturns Path
##### isPointInside
Teste si le point passé en paramètre est à l'intérieur du polygone défini par le chemin ou non.
Le chemin doit donc être fermé pour éventuellement renvoyer true.###### Parameters
* pt
objet Vect ou objet quelconque ayant les propriétés x et y.Returns Boolean
##### normalize
Normalise le chemin (segments M,L,C,Z,z uniquement).
Returns Path
##### getSegLength
Renvoie la longueur d'un segment
###### Parameters
* i
indice du segmentReturns Number
##### getLengthAtSeg
Renvoie la longueur du chemin au niveau du segment précisé
###### Parameters
* i
indice du segment##### getSegAtLength
Renvoie l'indice du segment situé à la distance précisée
###### Parameters
* distance
Returns Number
##### getPointAtLength
Renvoie le point du chemin à la distance précisée
###### Parameters
* distance
Returns Vect
##### getRotateAtLength
Renvoie l'angle du chemin à la distance précisée
###### Parameters
* distance
Returns Number
##### getTangentAtLength
Renvoie la tangente du chemin à la distance précisée
###### Parameters
* distance
Returns Vect
##### findSeg
Trouve le segment le plus proche du point donné en paramètre
###### Parameters
* point
objet avec les propriétés x et y.precision
*nombre de pixels maximal s�parant le point du cheminReturns Number indice du segment trouv�, ou -1
##### getNearestPoint
Trouve le point de la courbe le plus proche du point passé en paramètre
###### Parameters
* point
objet avec les propriétés x et yReturns Vect
##### getLengthAtPoint
Trouve la longueur de la courbe au point le plus proche du point passé en paramètre
###### Parameters
* point
##### arc2bez
Convertit un arc en courbe de bézier
###### Parameters
* ind
indice du segment arc ("A")bezierDegree
*optionnel, degré de la courbe de bézier à utiliser (3 par défaut)defaultFlatness
*optionnel, 0.5 (valeur par défaut) semble être la valeur adaptée.Returns Path
##### toCubicCurve
Transforme une courbe quelconque en segments de type C
Returns Path
#### rel2absSeg
Remplace un segment relatif par son équivalent en absolu.
##### Parameters
* jPath
ind
*#### getSegDist
réduit le nombre de points du chemin en précisant une distance minimale entre 2 points.
##### Parameters
* p
p1
*p2
*minDistance
*distance minimale en pixels entre 2 points en dessous de laquelle l'un des 2 sera supprimé.screen
*si true, cette distance est la distance en pixels visible à l'écran (donc plus faible si le chemin est zoomé), sinon
c'est la distance absolue entre 2 points du chemin.Returns Path Path.prototype.slim = function(minDistance,screen) {var i = 0,
ctm = screen ? this.parent().getMtx('screen') : new JSYG.Matrix(),
seg,next;while (i < this.nbSegs()-2) { //pas le dernier pointseg = new JSYG.Point(this.getSeg(i)).mtx(ctm);
next = new JSYG.Point(this.getSeg(i+1)).mtx(ctm);if (distance(seg,next) < minDistance) {if (i < this.nbSegs()-2) this.removeSeg(i+1);
else this.removeSeg(i);
}
else i++;
}return this;
};#### clonePath
Convertit une forme svg en chemin
##### Parameters
* opt
optionnel, objet pouvant avoir les propriétés suivantes :
- normalize : booleen, normalise ou non le chemin
- style : booleen, clone ou non les attributs de style de la forme au chemin
- transform : booleen, clone ou non l'attribut de trasnformation de la forme au chemin
Returns Path
#### isShapeInside
Teste si la forme passée en paramètre est à l'intérieur de l'élément.
méthode de calcul un peu bourrin, gagnerait à être amélioriée.##### Parameters
* shape
argument JSYG faisant référence à une forme SVGReturns Boolean
#### kappa
Constante pour approximer les arcs
#### getLayoutAttrs
récupère les propriétés de mise en page
##### Parameters
* elmt`