JSYG.PathDrawer

drawing interactive svg paths with JSYG framework

Demo

http://yannickbochatay.github.io/JSYG.PathDrawer

Installation

npm install jsyg-pathdrawer

Example with module bundler

import PathDrawer from "jsyg-pathdrawer"

let pencil = new PathDrawer();

document.querySelector("svg").addEventListener("mousedown",function(e) {
               
    if (pencil.inProgress) return;

    let path = document.createElementNS("http://www.w3.org/2000/svg","path");
    //with JSYG framework : path = JSYG("<path>")

    this.appendChild(path);

    pencil.draw(path,e);
});

API

Table of Contents

• PathDrawer
  • Parameters
  • area
  • segment
  • type
  • inProgress
  • simplify
  • simplify
  • strengthClosingMagnet
  • closePath
  • ondraw
  • onbeforeend
  • onend
  • onbeforenewseg
  • onnewseg
  • drawPoint2Point
    • Parameters
  • drawFreeHand
    • Parameters
  • draw
    • Parameters
  • end

PathDrawer

Tracé de chemins SVG à la souris

Parameters

• opt optionnel, objet définissant les options.

Returns PathDrawer

area

zone sur laquelle on affecte les écouteurs d'évènements (si null, prend le parent svg le plus éloigné)

segment

Type de segment utilisés pour le tracé ("L","T", etc). La valeur spéciale "autosmooth" permet un lissage automatique sans se soucier des points de controle.

type

Type de tracé "freehand" (à main levée) ou "point2point" (ou tout autre valeur) pour tracé point par point.

inProgress

Indique si un tracé est en cours ou non

simplify

Pour le tracé à main levée, indique le nombre d'évènement "mousemove" à ignorer entre chaque point (sinon on aurait trop de points)

simplify

Pour le tracé à main levée, indique la tolérance (en pixels) pour la simplification de la courbe

strengthClosingMagnet

Indique la force de l'aimantation en pixels écran des points extremes entre eux. La valeur null permet d'annuler l'aimantation

closePath

Ferme systématiquement ou non le chemin (segment Z)

ondraw

fonction(s) à éxécuter pendant le tracé

onbeforeend

fonction(s) à éxécuter avant la fin du tracé

onend

fonction(s) à éxécuter à la fin du tracé

onbeforenewseg

fonction(s) à éxécuter avant un nouveau point (type "point2point" uniquement)

onnewseg

fonction(s) à éxécuter à la création d'un nouveau point

drawPoint2Point

Commence le tracé point à point.

Parameters

• path
• e objet JSYG.Event

Returns PathDrawer

drawFreeHand

Commence le tracé à main levée.

Parameters

• path
• e objet Event (évènement mousedown).

Returns PathDrawer

draw

Commence le tracé selon le type défini ("freehand" ou "point2point")

Parameters

• path
• e objet JSYG.Event (évènement mousedown).

end

Termine le tracé.

Returns PathDrawer