StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.3 KiB
101 lines
2.3 KiB
'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
|
|
}
|
|
|