mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
const toPhysicalPx = cssPx => cssPx * devicePixelRatio
|
|
|
|
function createGraph(text, easingFn, width = 180, height = 100) {
|
|
var div = document.createElement('div')
|
|
div.style.display = 'inline-block'
|
|
// +20 for padding
|
|
div.style.width = width + 20 + 'px'
|
|
div.style.height = height + 20 + 'px'
|
|
|
|
var canvas = document.createElement('canvas')
|
|
canvas.style.width = width + 'px'
|
|
canvas.style.height = height + 'px'
|
|
canvas.width = toPhysicalPx(width)
|
|
canvas.height = toPhysicalPx(height)
|
|
|
|
var context = canvas.getContext('2d')
|
|
context.fillStyle = 'rgb(250,250,250)'
|
|
context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
|
|
|
|
context.lineWidth = toPhysicalPx(1)
|
|
context.strokeStyle = 'rgb(230,230,230)'
|
|
|
|
context.beginPath()
|
|
context.moveTo(0, toPhysicalPx(20))
|
|
context.lineTo(toPhysicalPx(width), toPhysicalPx(20))
|
|
context.moveTo(0, toPhysicalPx(80))
|
|
context.lineTo(toPhysicalPx(width), toPhysicalPx(80))
|
|
context.closePath()
|
|
context.stroke()
|
|
|
|
context.lineWidth = toPhysicalPx(2)
|
|
context.strokeStyle = 'rgba(255,127,127,0.9)'
|
|
context.beginPath()
|
|
context.moveTo(toPhysicalPx(5), toPhysicalPx(80))
|
|
context.lineCap = 'round'
|
|
|
|
var position = {x: toPhysicalPx(5), y: toPhysicalPx(80)}
|
|
|
|
new TWEEN.Tween(position)
|
|
.to({x: toPhysicalPx(175)}, 2000)
|
|
.easing(TWEEN.Easing.Linear.None)
|
|
.start()
|
|
new TWEEN.Tween(position)
|
|
.to({y: toPhysicalPx(20)}, 2000)
|
|
.easing(easingFn)
|
|
.onUpdate(function () {
|
|
context.lineTo(position.x, position.y)
|
|
context.stroke()
|
|
})
|
|
.start()
|
|
|
|
div.appendChild(document.createTextNode(text))
|
|
div.appendChild(document.createElement('br'))
|
|
div.appendChild(canvas)
|
|
|
|
return div
|
|
}
|