package.index.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of svg-path-sdf Show documentation
Get signed distance field for a svg path
The newest version!
'use strict'

var pathBounds = require('svg-path-bounds')
var parsePath = require('parse-svg-path')
var drawPath = require('draw-svg-path')
var isSvgPath = require('is-svg-path')
var bitmapSdf = require('bitmap-sdf')

var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')


module.exports = pathSdf


function pathSdf (path, options) {
	if (!isSvgPath(path)) throw Error('Argument should be valid svg path string')

	if (!options) options = {}

	var w, h
	if (options.shape) {
		w = options.shape[0]
		h = options.shape[1]
	}
	else {
		w = canvas.width = options.w || options.width || 200
		h = canvas.height = options.h || options.height || 200
	}
	var size = Math.min(w, h)

	var stroke = options.stroke || 0

	var viewbox = options.viewbox || options.viewBox || pathBounds(path)
	var scale = [w / (viewbox[2] - viewbox[0]), h / (viewbox[3] - viewbox[1])]
	var maxScale = Math.min(scale[0] || 0, scale[1] || 0) / 2

	//clear ctx
	ctx.fillStyle = 'black'
	ctx.fillRect(0, 0, w, h)

	ctx.fillStyle = 'white'

	if (stroke)	{
		if (typeof stroke != 'number') stroke = 1
		if (stroke > 0) {
			ctx.strokeStyle = 'white'
		}
		else {
			ctx.strokeStyle = 'black'
		}

		ctx.lineWidth = Math.abs(stroke)
	}

	ctx.translate(w * .5, h * .5)
	ctx.scale(maxScale, maxScale)

	//if canvas svg paths api is available
	if (isPath2DSupported()) {
		var path2d = new Path2D(path)
		ctx.fill(path2d)
		stroke && ctx.stroke(path2d)
	}
	//fallback to bezier-curves
	else {
		var segments = parsePath(path)
		drawPath(ctx, segments)
		ctx.fill()
		stroke && ctx.stroke()
	}

	ctx.setTransform(1, 0, 0, 1, 0, 0);

	var data = bitmapSdf(ctx, {
		cutoff: options.cutoff != null ? options.cutoff : .5,
		radius: options.radius != null ? options.radius : size * .5
	})

	return data
}

var path2DSupported

function isPath2DSupported () {
	if (path2DSupported != null) return path2DSupported

	var ctx = document.createElement('canvas').getContext('2d')
	ctx.canvas.width = ctx.canvas.height = 1

	if (!window.Path2D) return path2DSupported = false

	var path = new Path2D('M0,0h1v1h-1v-1Z')

	ctx.fillStyle = 'black'
	ctx.fill(path)

	var idata = ctx.getImageData(0,0,1,1)

	return path2DSupported = idata && idata.data && idata.data[3] === 255
}