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