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
$ npm i ppath2d<script src="https://rawcdn.githack.com/KHC-ZhiHao/Ppath2D/master/dist/index.js"></script> IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Samsung |
 Opera |
|---|---|---|---|---|---|---|
| IE11 and up | Support | Support | Support | Support | Support | Support |
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()let line = new Ppath2D('m10,10 l200,200')
line.render(context)
context.stroke()let line = new Ppath2D()
line.moveTo(10,10).lineTo(200,200)
line.toPathString() // 'M10,10L210,210'let line = new Ppath2D('m10,10 l200,200')
line.addPath(new Ppath2D('m0,0 l200,200'))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()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()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 === 110let p = new Ppath2D('m10,10 l200,200')
let position = p.getLastPosition()
//position.x === position.y === 210let p = new Ppath2D('m10,10 l200,200')
let direction = p.getDirection(0.5)
//getDirection(t) t is begin to finish (0~1)
//direction === -225- 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()
Use more memory get more fast.
let line = new Ppath2D()
line.moveTo(10,10).lineTo(200,200)
line.setCache(true)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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent