62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
function Layer (name) {
|
|
this.name = name
|
|
this.el = document.createElement('canvas')
|
|
this.el.id = name
|
|
this.el.className = 'layer'
|
|
|
|
this.install = function () {
|
|
ronin.frame.el.appendChild(this.el)
|
|
}
|
|
|
|
this.update = function (zoom = { scale: 1, offset: { x: 0, y: 0 } }) {
|
|
}
|
|
|
|
this.context = function () {
|
|
return this.el.getContext('2d')
|
|
}
|
|
|
|
this.resize_to = function (size) {
|
|
console.log(`Resized ${this.name}`)
|
|
this.el.width = ronin.frame.width * 2
|
|
this.el.height = ronin.frame.height * 2
|
|
this.update()
|
|
}
|
|
|
|
this.select = function (x = 0, y = 0, width = ronin.frame.width, height = ronin.frame.width) {
|
|
return this.context().getImageData(x, y, width * 2, height * 2)
|
|
}
|
|
|
|
this.to_base64 = function (format = 'png', quality = 0.9) {
|
|
return format == 'png' ? this.el.toDataURL('image/png') : this.el.toDataURL('image/jpeg', 0.9)
|
|
}
|
|
|
|
this.to_img = function () {
|
|
var img = new Image()
|
|
img.src = this.to_base64()
|
|
return img
|
|
}
|
|
|
|
this.clear = function () {
|
|
this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2)
|
|
}
|
|
|
|
this.fill = function (color = 'red') {
|
|
var ctx = this.context()
|
|
|
|
ctx.beginPath()
|
|
ctx.globalCompositeOperation = 'source-over'
|
|
ctx.moveTo(0, 0)
|
|
ctx.lineTo(this.el.width, 0)
|
|
ctx.lineTo(this.el.width, this.el.height)
|
|
ctx.lineTo(0, this.el.height)
|
|
ctx.lineTo(0, 0)
|
|
ctx.fillStyle = color
|
|
ctx.fill()
|
|
ctx.closePath()
|
|
}
|
|
|
|
this.zoom = function (zoom = { scale: 1, offset: { x: 0, y: 0 } }) {
|
|
this.update(zoom)
|
|
}
|
|
}
|