JSYG.PolylineDrawer

Draw polylines and polygon with JSYG framework

Demo

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

Installation

npm install jsyg-polylinedrawer

Example with webpack/babel

import PolylineDrawer from "jsyg-polylinedrawer"

let pencil = new PolylineDrawer()
            
document.querySelector("svg").addEventListener("mousedown",function(e) {

   if (pencil.inProgress) return;

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

   this.appendChild(poly);

   pencil.draw(poly,e);

});

API

Table of Contents

• PolylineDrawer
  • Parameters
  • area
  • inProgress
  • strengthClosingMagnet
  • ondraw
  • onbeforeend
  • onend
  • onbeforenewseg
  • onnewseg
  • draw
    • Parameters
  • end

PolylineDrawer

Tracé de polylignes et polygones SVG à la souris

Parameters

• opt optionnel, objet définissant les options.

Returns PolylineDrawer

area

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

inProgress

Indique si un tracé est en cours ou non

strengthClosingMagnet

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

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

onnewseg

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

draw

Commence le tracé point à point.

Parameters

• polyElmt
• e {JSYG.Event}
• shape {JSYG} élément SVG polyline ou polygon

Returns PolylineDrawer

end

Termine le tracé.

Returns PolylineDrawer