Implement xRel / yRel cel-positioning logic when compositing
This commit is contained in:
parent
79f14b8d39
commit
3fe16c7e49
20
index.js
20
index.js
|
@ -307,20 +307,28 @@ const compositeCels = (cels) => {
|
||||||
let minY = Number.POSITIVE_INFINITY
|
let minY = Number.POSITIVE_INFINITY
|
||||||
let maxX = Number.NEGATIVE_INFINITY
|
let maxX = Number.NEGATIVE_INFINITY
|
||||||
let maxY = Number.NEGATIVE_INFINITY
|
let maxY = Number.NEGATIVE_INFINITY
|
||||||
|
let xRel = 0
|
||||||
|
let yRel = 0
|
||||||
for (let cel of cels) {
|
for (let cel of cels) {
|
||||||
minX = Math.min(minX, cel.xOffset)
|
minX = Math.min(minX, cel.xOffset + xRel)
|
||||||
minY = Math.min(minY, -cel.yOffset)
|
minY = Math.min(minY, -(cel.yOffset + yRel))
|
||||||
maxX = Math.max(maxX, cel.width + cel.xOffset)
|
maxX = Math.max(maxX, cel.width + cel.xOffset + xRel)
|
||||||
maxY = Math.max(maxY, cel.height - cel.yOffset)
|
maxY = Math.max(maxY, cel.height - (cel.yOffset + yRel))
|
||||||
} const container = document.getElementById("cels")
|
xRel += cel.xRel
|
||||||
|
yRel += cel.yRel
|
||||||
|
}
|
||||||
|
|
||||||
const w = (maxX - minX) * 8
|
const w = (maxX - minX) * 8
|
||||||
const h = maxY - minY
|
const h = maxY - minY
|
||||||
|
|
||||||
const canvas = makeCanvas(w, h)
|
const canvas = makeCanvas(w, h)
|
||||||
const ctx = canvas.getContext("2d")
|
const ctx = canvas.getContext("2d")
|
||||||
|
xRel = 0
|
||||||
|
yRel = 0
|
||||||
for (let cel of cels) {
|
for (let cel of cels) {
|
||||||
ctx.drawImage(cel.canvas, (cel.xOffset - minX) * 8, -cel.yOffset - minY)
|
ctx.drawImage(cel.canvas, (cel.xOffset + xRel - minX) * 8, -(cel.yOffset + yRel) - minY)
|
||||||
|
xRel += cel.xRel
|
||||||
|
yRel += cel.yRel
|
||||||
}
|
}
|
||||||
return { canvas: canvas, xOffset: minX * 8, yOffset: minY }
|
return { canvas: canvas, xOffset: minX * 8, yOffset: minY }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue