mirror of
https://github.com/rsms/inter.git
synced 2024-12-12 05:35:49 +03:00
240 lines
5.2 KiB
JavaScript
240 lines
5.2 KiB
JavaScript
|
|
function GraphPlot(canvas) {
|
|
this.canvas = canvas
|
|
const g = canvas.getContext('2d')
|
|
if (g == null) {
|
|
throw new Error('failed to acquire 2d context')
|
|
}
|
|
|
|
this.width = 0 // dp
|
|
this.height = 0 // dp
|
|
this.widthPx = 0 // px
|
|
this.heightPx = 0 // px
|
|
this.pixelRatio = 1
|
|
this.g = g
|
|
this.dataSegments = []
|
|
this.axes = {
|
|
x0: .5, // % from left to x=0
|
|
y0: .5, // % from top to y=0
|
|
scalex: 40, // pixels from x=0 to x=1
|
|
scaley: 40, // pixels from y=0 to y=1
|
|
negativeX: true,
|
|
}
|
|
|
|
if (!this.autosize()) {
|
|
this.setSize(256, 256)
|
|
}
|
|
}
|
|
|
|
GraphPlot.prototype.autosize = function() {
|
|
try {
|
|
this.canvas.width = null
|
|
this.canvas.height = null
|
|
this.canvas.style.width = null
|
|
this.canvas.style.height = null
|
|
var cs = window.getComputedStyle(this.canvas)
|
|
var width = parseFloat(cs.width)
|
|
var height = parseFloat(cs.height)
|
|
this.setSize(width, height)
|
|
return true
|
|
} catch (err) {
|
|
if (typeof console != 'undefined' && console.warn) {
|
|
console.warn('GraphPlot.autosize failed: ' + err)
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
// setOrigin sets the origin of axis x and y
|
|
// The values should be in the range [0-1] and maps to the extremes
|
|
// of the canvas.
|
|
//
|
|
GraphPlot.prototype.setOrigin = function(x, y) {
|
|
var p = this
|
|
p.axes.x0 = x
|
|
p.axes.y0 = y
|
|
}
|
|
|
|
// setScale sets the value scale for x and y axis.
|
|
// The values should be provided as display points.
|
|
//
|
|
GraphPlot.prototype.setScale = function(x, y) {
|
|
var p = this
|
|
if (y === undefined) {
|
|
y = x
|
|
}
|
|
p.axes.scalex = x
|
|
p.axes.scaley = y
|
|
}
|
|
|
|
// setSize sets the size of canvas in display points
|
|
//
|
|
GraphPlot.prototype.setSize = function(width, height) {
|
|
var p = this
|
|
p.width = width
|
|
p.height = height
|
|
const el = p.canvas, g = p.g
|
|
p.pixelRatio = window.devicePixelRatio || 1
|
|
if (p.pixelRatio != 1) {
|
|
el.width = p.widthPx = width * p.pixelRatio
|
|
el.height = p.heightPx = height * p.pixelRatio
|
|
g.scale(p.pixelRatio, p.pixelRatio)
|
|
} else {
|
|
el.width = p.widthPx = width
|
|
el.height = p.heightPx = height
|
|
g.scale(1, 1)
|
|
}
|
|
el.style.width = `${width}px`
|
|
el.style.height = `${height}px`
|
|
}
|
|
|
|
|
|
GraphPlot.prototype.renderAxes = function() {
|
|
var p = this
|
|
, g = p.g
|
|
, x0 = Math.round(p.axes.x0 * p.widthPx) / p.pixelRatio
|
|
, y0 = Math.round(p.axes.y0 * p.heightPx) / p.pixelRatio
|
|
|
|
g.beginPath()
|
|
g.strokeStyle = "rgb(0, 0, 0, 0.2)"
|
|
if (y0 > 0 && y0 < p.width) {
|
|
g.moveTo(0, y0); g.lineTo(p.width, y0) // X axis
|
|
}
|
|
if (x0 > 0 && x0 < p.height) {
|
|
g.moveTo(x0, 0); g.lineTo(x0, p.height) // Y axis
|
|
}
|
|
g.stroke()
|
|
}
|
|
|
|
|
|
// plotf plots an arbitrary function on the graph
|
|
//
|
|
GraphPlot.prototype.plotf = function(f, color) {
|
|
var p = this
|
|
, g = p.g
|
|
, w = p.width
|
|
, h = p.height
|
|
, x0 = p.axes.x0 * p.width
|
|
, y0 = p.axes.y0 * p.height
|
|
, x = 0
|
|
, y = 0
|
|
, dx = 4 / p.pixelRatio // smaller means finer curves and more CPU
|
|
, scalex = p.axes.scalex * w
|
|
, scaley = p.axes.scaley * h
|
|
, iMax = Math.round((w - x0) / dx)
|
|
, iMin = p.axes.negativeX ? Math.round(-x0 / dx) : 0
|
|
|
|
g.beginPath()
|
|
g.lineWidth = 1
|
|
g.strokeStyle = color || "rgb(0, 0, 0, 0.8)"
|
|
|
|
for (var i = iMin; i <= iMax; i++) {
|
|
x = dx * i
|
|
y = f(x / scalex) * scaley
|
|
if (i == iMin) {
|
|
g.moveTo(x0 + x, y0 - y)
|
|
} else {
|
|
g.lineTo(x0 + x, y0 - y)
|
|
}
|
|
}
|
|
|
|
g.stroke()
|
|
}
|
|
|
|
|
|
// plotLines draws straight lines between a collection of points
|
|
//
|
|
GraphPlot.prototype.plotLine = function(points, color) {
|
|
var p = this
|
|
, g = p.g
|
|
, x0 = p.axes.x0 * p.width
|
|
, y0 = p.axes.y0 * p.height
|
|
, x = 0
|
|
, y = 0
|
|
, scalex = p.axes.scalex * p.width
|
|
, scaley = p.axes.scaley * p.height
|
|
, pt
|
|
|
|
g.beginPath()
|
|
g.lineWidth = 1
|
|
g.strokeStyle = color || "rgb(0, 0, 0, 0.8)"
|
|
|
|
var i = 0
|
|
for (; i < points.length; i++) {
|
|
pt = points[i]
|
|
x = pt[0] * scalex
|
|
y = pt[1] * scaley
|
|
if (i == 0) {
|
|
g.moveTo(x0 + x, y0 - y)
|
|
} else {
|
|
g.lineTo(x0 + x, y0 - y)
|
|
}
|
|
}
|
|
|
|
g.stroke()
|
|
}
|
|
|
|
|
|
// plotPoints draws points
|
|
//
|
|
GraphPlot.prototype.plotPoints = function(points, color) {
|
|
var p = this
|
|
, g = p.g
|
|
, x0 = p.axes.x0 * p.width
|
|
, y0 = p.axes.y0 * p.height
|
|
, x = 0
|
|
, y = 0
|
|
, scalex = p.axes.scalex * p.width
|
|
, scaley = p.axes.scaley * p.height
|
|
, pt
|
|
, i = 0
|
|
|
|
g.fillStyle = color || "rgb(0, 0, 0, 0.8)"
|
|
|
|
for (; i < points.length; i++) {
|
|
pt = points[i]
|
|
x = x0 + pt[0] * scalex
|
|
y = y0 - pt[1] * scaley
|
|
g.beginPath()
|
|
g.arc(x, y, 3, 0, Math.PI + (Math.PI * 2) / 2, false)
|
|
g.fill()
|
|
}
|
|
}
|
|
|
|
|
|
GraphPlot.prototype.clear = function() {
|
|
var p = this
|
|
p.g.clearRect(0, 0, p.width, p.height)
|
|
p.renderAxes()
|
|
}
|
|
|
|
|
|
GraphPlot.prototype.renderDemo = function() {
|
|
var p = this
|
|
, g = p.g
|
|
, dpscale = p.pixelRatio
|
|
, w = p.widthPx
|
|
, h = p.heightPx
|
|
|
|
p.clear()
|
|
|
|
p.plotf(
|
|
function(x) { return Math.sin(x) },
|
|
'blue'
|
|
)
|
|
|
|
p.plotf(
|
|
function(x) { return Math.cos(3*x) },
|
|
'hotpink'
|
|
)
|
|
|
|
// var scale = p.height / 4
|
|
// g.moveTo(0, scale)
|
|
// var i, sine, lines = 200, frag = p.width / lines
|
|
// for (i = 0; i < lines; i++) {
|
|
// sine = Math.sin(i / scale * 2) * scale
|
|
// g.lineTo(i * frag, -sine + scale)
|
|
// }
|
|
// g.stroke()
|
|
}
|