diff --git a/v3/src/renderer/canvas/utils/DrawImage.js b/v3/src/renderer/canvas/utils/DrawImage.js index 1a0f7dfd4..62db820b7 100644 --- a/v3/src/renderer/canvas/utils/DrawImage.js +++ b/v3/src/renderer/canvas/utils/DrawImage.js @@ -29,22 +29,45 @@ var DrawImage = function (src, camera) // ctx[this.smoothProperty] = (source.scaleMode === ScaleModes.LINEAR); } - var dx = frame.x - src.displayOriginX; - var dy = frame.y - src.displayOriginY; + var dx = frame.x; + var dy = frame.y; + + var fx = 1; + var fy = 1; + + if (src.flipX) + { + fx = -1; + dx -= cd.dWidth - src.displayOriginX; + } + else + { + dx -= src.displayOriginX; + } + + if (src.flipY) + { + fy = -1; + dy -= cd.dHeight - src.displayOriginY; + } + else + { + dy -= src.displayOriginY; + } + + // Perform Matrix ITRS ctx.save(); + ctx.translate(src.x - camera.scrollX * src.scrollFactorX, src.y - camera.scrollY * src.scrollFactorY); + ctx.rotate(src.rotation); + ctx.scale(src.scaleX, src.scaleY); - ctx.scale(src.flipX ? -1 : 1, src.flipY ? -1 : 1); - - // There is no such property as src.dWidth or src.dHeight, so this call has no effect: - // ctx.translate(src.dWidth * (src.flipX ? 1 : 0), src.dHeight * (src.flipY ? 1 : 0)); - - // dx -= (src.flipX && src.originX !== 0.5) ? cd.dWidth - (src.originX * cd.dWidth) : 0; - // dy -= (src.flipY && src.originY !== 0.5) ? cd.dHeight - (src.originY * cd.dHeight) : 0; + ctx.scale(fx, fy); ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight); + ctx.restore(); };