Fixed async issue with mirror/orient

This commit is contained in:
Devine Lu Linvega 2019-08-04 07:00:14 +09:00
parent 85ba8260b9
commit 6a78757139

View File

@ -145,38 +145,36 @@ function Library (ronin) {
} }
this.orient = async (deg = 0) => { // Orient canvas with angle in degrees. this.orient = async (deg = 0) => { // Orient canvas with angle in degrees.
const copy = await this.copy()
const frame = this['get-frame']()
const mode = Math.floor(deg / 90) % 4 const mode = Math.floor(deg / 90) % 4
const img = document.createElement('img') const offset = { x: [0, 0, -frame.w, -frame.w], y: [0, -frame.h, -frame.h, 0] }
img.onload = () => { const rect = { x: 0, y: 0, w: (mode === 1 || mode === 3 ? frame.h : frame.w), h: (mode === 1 || mode === 3 ? frame.w : frame.h) }
const offset = { x: [0, 0, -img.width, -img.width], y: [0, -img.height, -img.height, 0] } ronin.surface.resize(rect, false)
const rect = { x: 0, y: 0, w: (mode === 1 || mode === 3 ? img.height : img.width), h: (mode === 1 || mode === 3 ? img.width : img.height) } ronin.surface.context.save()
ronin.surface.resize(rect, false) ronin.surface.context.rotate(this.rad(mode * 90))
ronin.surface.context.save() ronin.surface.context.translate(offset.x[mode], offset.y[mode])
ronin.surface.context.rotate(this.rad(mode * 90)) ronin.surface.context.drawImage(copy, 0, 0)
ronin.surface.context.translate(offset.x[mode], offset.y[mode]) ronin.surface.context.restore()
ronin.surface.context.drawImage(img, 0, 0)
ronin.surface.context.restore()
}
img.src = ronin.surface.el.toDataURL()
} }
this.mirror = { // Mirror canvas, methods: `x`, `y`. this.mirror = { // Mirror canvas, methods: `x`, `y`.
x: async (j = 0) => { x: async (j = 0) => {
const img = document.createElement('img') const copy = await this.copy()
img.src = ronin.surface.el.toDataURL() const frame = this['get-frame']()
ronin.surface.context.save() ronin.surface.context.save()
ronin.surface.context.translate(img.width, 0) ronin.surface.context.translate(frame.w, 0)
ronin.surface.context.scale(-1, 1) ronin.surface.context.scale(-1, 1)
ronin.surface.context.drawImage(img, 0, 0) ronin.surface.context.drawImage(copy, 0, 0)
ronin.surface.context.restore() ronin.surface.context.restore()
}, },
y: async (j = 0) => { y: async (j = 0) => {
const img = document.createElement('img') const copy = await this.copy()
img.src = ronin.surface.el.toDataURL() const frame = this['get-frame']()
ronin.surface.context.save() ronin.surface.context.save()
ronin.surface.context.translate(0, img.height) ronin.surface.context.translate(0, frame.h)
ronin.surface.context.scale(1, -1) ronin.surface.context.scale(1, -1)
ronin.surface.context.drawImage(img, 0, 0) ronin.surface.context.drawImage(copy, 0, 0)
ronin.surface.context.restore() ronin.surface.context.restore()
} }
} }