p5.js-svg
Version:
The main goal of p5.SVG is to provide a SVG runtime for p5.js, so that we can draw using p5's powerful API in \<svg\>, save things to svg file and manipulating existing SVG file without rasterization.
55 lines (51 loc) • 2.04 kB
text/typescript
import constants from './constants'
import { P5SVG, p5SVG } from './types'
export default function (p5: P5SVG) {
// patch p5.Graphics for SVG
const _graphics = p5.Graphics
p5.Graphics = function (w: number, h: number, renderer: any, pInst: p5SVG) {
const isSVG = renderer === constants.SVG
_graphics.apply(this, [w, h, isSVG ? pInst.P2D : renderer, pInst])
if (isSVG) {
// replace <canvas> with <svg>
let c = this._renderer.elt
this._renderer = new p5.RendererSVG(c, this, false) // replace renderer
c = this._renderer.elt
this.elt = c // replace this.elt
// do default again
this._renderer.resize(w, h)
this._renderer._applyDefaults()
}
return this
}
p5.Graphics.prototype = _graphics.prototype
/**
* Patched version of createCanvas
*
* use createCanvas(100, 100, SVG) to create SVG canvas.
*
* Creates a SVG element in the document, and sets its width and
* height in pixels. This method should be called only once at
* the start of setup.
* @function createCanvas
* @memberof p5.prototype
* @param {Number} width - Width (in px) for SVG Element
* @param {Number} height - Height (in px) for SVG Element
* @return {Graphics}
*/
const _createCanvas = p5.prototype.createCanvas
p5.prototype.createCanvas = function (w: number, h: number, renderer: any) {
const graphics = _createCanvas.apply(this, [w, h, renderer])
if (renderer === constants.SVG) {
const c = graphics.canvas
this._setProperty('_renderer', new p5.RendererSVG(c, this, true))
this._isdefaultGraphics = true
this._renderer.resize(w, h)
this._renderer._applyDefaults()
}
return this._renderer
}
p5.prototype.createGraphics = function (w: number, h: number, renderer: any) {
return new p5.Graphics(w, h, renderer, this)
}
}