Как исправить координаты зума? - PullRequest
Новая
       62

Как исправить координаты зума?

0 голосов
/ 25 апреля 2020

Я могу правильно установить координаты после увеличения. Но когда я начинаю перемещать изображение, оно опускается вниз и вправо

Я понимаю, что мне нужно сместить результирующие координаты влево и вверх. Но как это сделать? Чтобы я не пытался это сделать, либо полностью ломается вся система, либо изображение начинает двигаться очень медленно, либо перемещается в противоположную позицию. Я очень долго пытался, прежде чем решил написать этот вопрос. Поскольку я нахожусь в тупике.

мой код 

let sx
let sy
let cx = 0
let cy = 0

$(document).ready(() => {
    const square = document.querySelector('#square')
    const container = document.querySelector('#square-container')
    let isZoom = false

    container.addEventListener('dblclick', e => {
        if (!isZoom) {
            isZoom = true
            touchMoveStart(square, e)
        } else {
            isZoom = false
            touchMoveEnd(square)
        }
    })
})

function touchMoveStart(el, dblEvent) {
    const xPos = dblEvent.pageX * -0.5
    const yPos = dblEvent.pageY * -0.5
    $('body').css({
        overflow: 'hidden'
    })
    $(el).css({
        width: '150%',
        height: 'auto',
        transform: `translate3d(${xPos}px, ${yPos}px, 0px)`
    })

    el.addEventListener('touchstart', touchstart)
    el.addEventListener('touchmove', touchmove)
    el.addEventListener('touchend', touchend)
}

function touchMoveEnd(el) {
    el.removeEventListener('touchstart', touchstart)
    el.removeEventListener('touchmove', touchmove)
    el.removeEventListener('touchend', touchend)

    $('body').css({
        overflow: 'auto'
    })
    $(el).css({
        position: 'relative',
        width: '100%',
        height: '100%',
        left: 'initial',
        top: 'initial',
        transform: 'translate3d(0px, 0px, 0px)'
    })
}

function touchstart(e) {
    const c = e.changedTouches[0]
    sx = xy(c.pageX) - cx
    sy = xy(c.pageY) - cy
    console.log(sx)
}

function touchmove(e) {
    e.preventDefault()
    const c = e.changedTouches[0]
    const xPos = xy(c.pageX) - sx
    const yPos = xy(c.pageY) - sy

    $(e.target).css({
        transform: `translate3d(${xPos}px, ${yPos}px, 0px)`
    })
}

function touchend(e) {
    const c = e.changedTouches[0]
    cx = xy(c.pageX) - sx
    cy = xy(c.pageY) - sy
}

function xy(point) {
    return point * 1.5
}

div#square-container
        div#square
            - var n = 'https://static2.toonei.com/legacy/5AKCtw9YlCK16QcyWBdQLg/9179/200245/207191/5---img_or25012012_0005.jpg'
            img(src=n)

И я просто не могу понять, что делать, чтобы исправить эту ситуацию. Вы можете увидеть этот GIF здесь, чтобы увидеть ситуацию, которую я не могу исправить. (смотреть GIF )

...