Summary

Ppath2D is a pure math javascript path module, P represent position, This module not only render 2d path, More capable get position and directio on the path.

Flying ants under the street lights demo

Online editor

中文文檔

---

Install

webpack or nodejs

$ npm i ppath2d

html

<script src="https://rawcdn.githack.com/KHC-ZhiHao/Ppath2D/master/dist/index.js"></script>

---

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11 and up	Support	Support	Support	Support	Support	Support

---

Getting started

Draw a line

html

<canvas id="demo" width="800" height="600"></canvas>
<script src="./dist/index.js"></script>

webpack

import Ppath2D from 'ppath2d'
let line = new Ppath2D()

javascript

let canvas = document.getElementById('demo')
let context = canvas.getContext('2d')
let line = new Ppath2D()
line.moveTo(10,10).lineTo(200,200)
line.render(context)
context.stroke()

Draw a line for d

let line = new Ppath2D('m10,10 l200,200')
line.render(context)
context.stroke()

Ppath2D to d string

let line = new Ppath2D()
line.moveTo(10,10).lineTo(200,200)
line.toPathString() // 'M10,10L210,210'

Add Path

let line = new Ppath2D('m10,10 l200,200')
    line.addPath(new Ppath2D('m0,0 l200,200'))

Read polygon

let line = new Ppath2D(`
    27.729,43.169 11.256,51.829 14.402,33.486 1.075,20.495 19.492,17.819 27.729,1.13 
    35.966,17.819 54.383,20.495 41.056,33.486 44.202,51.829
`, 'polygon')
line.render(context)
context.fill()

Read Polyline

let line = new Ppath2D(`0.5,0.5 211.5,0.5 0.5,81.5 0.5,227.5`, 'polyline')
line.render(context)
context.stroke()

Get position

let p = new Ppath2D('m10,10 l200,200')
let position = p.getLinePosition(0.5)
//getLinePosition(t) t is begin to finish (0~1)
//position.x === position.y === 110

Get last position

let p = new Ppath2D('m10,10 l200,200')
let position = p.getLastPosition()
//position.x === position.y === 210

Get direction

let p = new Ppath2D('m10,10 l200,200')
let direction = p.getDirection(0.5)
//getDirection(t) t is begin to finish (0~1)
//direction === -225

---

Draw point methods

• moveTo(x, y, absolute)
• lineTo(x, y, absolute)
• horizontalLineTo(x, absolute)
• verticalLineTo(y, absolute)
• curve(x1, y1, x2, y2, x, y, absolute)
• quadraticBezierCurve(x1, y1, x, y, absolute)
• smoothCurve(x2, y2, x, y, absolute)
• smoothQuadraticBezierCurve(x, y, absolute)
• arc(rx, ry, rotation, large, sweep, x, y,absolute)
• closePath()

---

Enable cache mode

Use more memory get more fast.

let line = new Ppath2D()
line.moveTo(10,10).lineTo(200,200)
line.setCache(true)

---

About nodejs

Because it is pure math, nodejs can also run Ppath2D, which can be drawn by node-canvas:

let { createCanvas } = require('canvas')
let fs = require('fs')
let Ppath2D = require('./src/Path.js')
let canvas = createCanvas(200, 200)
let context = canvas.getContext('2d')
let line = new Ppath2D('m0,0 l200,200')
line.render(context)
context.stroke()
let buffer = canvas.toBuffer()
fs.writeFileSync('./line.png', buffer)

---

Reference

Mathematical formula