remove canvas requirement for camera
This commit is contained in:
parent
f5f08be505
commit
7c9ced4a22
2 changed files with 3 additions and 20 deletions
|
|
@ -1,28 +1,14 @@
|
||||||
export default class Camera {
|
export default class Camera {
|
||||||
constructor(canvas) {
|
constructor() {
|
||||||
this.x = 0
|
this.x = 0
|
||||||
this.y = 0
|
this.y = 0
|
||||||
|
|
||||||
// TODO: when canvas resizes, this should
|
|
||||||
// syncronize with the cam
|
|
||||||
this.width = canvas.width
|
|
||||||
this.height = canvas.height
|
|
||||||
|
|
||||||
this.zoom = 1
|
this.zoom = 1
|
||||||
this.minZoom = .1
|
this.minZoom = .1
|
||||||
this.maxZoom = 6
|
this.maxZoom = 6
|
||||||
this.zoomStep = .05
|
this.zoomStep = .05
|
||||||
}
|
}
|
||||||
|
|
||||||
rect() {
|
|
||||||
return {
|
|
||||||
x: -this.x,
|
|
||||||
y: -this.y,
|
|
||||||
w: this.width / this.zoom,
|
|
||||||
h: this.height / this.zoom,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
move(x, y) {
|
move(x, y) {
|
||||||
this.x += x / this.zoom
|
this.x += x / this.zoom
|
||||||
this.y += y / this.zoom
|
this.y += y / this.zoom
|
||||||
|
|
@ -34,10 +20,7 @@ export default class Camera {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
const zoomToCoord = viewportCoordCenter || {
|
const zoomToCoord = viewportCoordCenter
|
||||||
x: this.width / 2,
|
|
||||||
y: this.height / 2
|
|
||||||
}
|
|
||||||
const zoomFactor = (1 / this.zoom) - (1 / zoom)
|
const zoomFactor = (1 / this.zoom) - (1 / zoom)
|
||||||
|
|
||||||
this.x -= Math.round(zoomToCoord.x * zoomFactor)
|
this.x -= Math.round(zoomToCoord.x * zoomFactor)
|
||||||
|
|
|
||||||
|
|
@ -408,7 +408,7 @@ async function main() {
|
||||||
|
|
||||||
// initialize some view data
|
// initialize some view data
|
||||||
// this global data will change according to input events
|
// this global data will change according to input events
|
||||||
const viewport = new Camera(canvas)
|
const viewport = new Camera()
|
||||||
// center viewport
|
// center viewport
|
||||||
viewport.move(
|
viewport.move(
|
||||||
-(TABLE_WIDTH - viewport.width) /2,
|
-(TABLE_WIDTH - viewport.width) /2,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue