I am struggling to correctly scale the image and set the left (x) and top (y) positions. Here is the code from my template:
<div id="container" :style="`height: ${height}px;width: ${size}px;overflow: hidden;position: relative;`">
<img @load="getSize()" id="bgPic" :src="`${bgPicture}`" :width="`${bgWidth}`"
:height="`${bgHeight}`"
:style="`cursor: ${cursor};left:${x}px; top:${y}px;display: block;position: relative;`"
/>
</div>
And in the scaling function:
event.preventDefault()
const scroll = event.deltaY * -0.001
const switching = Math.sign(scroll)
this.cursor = switching == 1 ? 'zoom-in' : 'zoom-out'
this.bgHeight = parseFloat(this.bgHeight) + parseFloat(this.bgHeight) * scroll
this.bgWidth = parseFloat(this.bgWidth) + parseFloat(this.bgWidth) * scroll
this.x = ?
this.y = ?
I have made some progress with this:
this.x = this.x / (1 + scroll)
this.y = this.y / (1 + scroll)
But there seems to be a minor deviation that I can't figure out.