JSYG.Path

Manipulation of svg path with JSYG framework

Installation

npm install jsyg-path

Example with es6

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

API

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 <path>). Si non défini, un nouvel élément sera créé.

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

<pre>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

<pre>var 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

<pre>var 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 segment
• i indice ou insérer le segment

Returns Path

replaceSeg

Remplace un segment

Parameters

• i indice du segment à remplacer
• seg 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 abcisse
• y ordonnée

Examples

<pre>var 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 abcisse
• y ordonnée

Examples

<pre>var 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ôle
• y1 ordonnée du 1er point de contrôle
• x2 abcisse du 2ème point de contrôle
• y2 ordonnée du 2ème point de contrôle
• x abcisse du point d'arrivée
• y ordonnée du point d'arrivée

Examples

<pre>var 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

<pre>var path = new Path();
path.attr('d','M0,0 h50

path.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 chemin

Returns 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 segment
• nbsegs 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 Number

Returns 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 segment

Returns 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 chemin

Returns 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 y

Returns 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

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 SVG

Returns Boolean

kappa

Constante pour approximer les arcs

getLayoutAttrs

récupère les propriétés de mise en page

Parameters

• elmt