js中transform放大比例时,移动范围也扩大了

[随_声]

问题就是在指定div的宽高中双指放大不能超过边界，图中2号可以随意在1号中拖动，也可以在随意位置对它进行缩放操作，如果在正中心固定位置可以使用缩放比例，那在随意位置呢，如何让它缩放比例不超出边界。并且移动时的偏移量不会随着比例而移动跑出扩大指定边界内和缩小移动端范围

$(function () {
        $("#sdh").draggable({
            containment: '#sd',
        });
        $("#sdh").resizable({
            handles:'all',
            containment: '#sd',
        });
    });

    var eleImg = document.querySelector('#sdh');
    var store = {
        scale: 1
    };

    // 缩放事件的处理
    eleImg.addEventListener('touchstart', function (event) {
        var touches = event.touches;
        var events = touches[0];
        var events2 = touches[1];

        event.preventDefault();

        // 第一个触摸点的坐标
        store.pageX = events.pageX;
        store.pageY = events.pageY;
        store.moveable = true;

        if (events2) {
            store.pageX2 = events2.pageX;
            store.pageY2 = events2.pageY;
        }
        store.originScale = store.scale || 1;
    });
    document.addEventListener('touchmove', function (event) {
        if (!store.moveable) {
            return;
        }
        var touches = event.touches;
        var events = touches[0];
        var events2 = touches[1];
        // 双指移动
        if (events2) {
            // 第2个指头坐标在touchmove时候获取
            if (!store.pageX2) {
                store.pageX2 = events2.pageX;
            }
            if (!store.pageY2) {
                store.pageY2 = events2.pageY;
            }

            // 获取坐标之间的举例
            var getDistance = function (start, stop) {
                return Math.hypot(stop.x - start.x, stop.y - start.y);
            };

            // 双指缩放比例计算
            var zoom = getDistance({
                x: events.pageX,
                y: events.pageY
            }, {
                x: events2.pageX,
                y: events2.pageY
            }) /
            getDistance({
                x: store.pageX,
                y: store.pageY
            }, {
                x: store.pageX2,
                y: store.pageY2
            });

            var a_x = $("#body").offset().left;
            var a_y = $("#body").offset().top;
            var xx = $("#sd").offset().left;
            var yy = $("#sd").offset().top;
            var ww = $("#sd").outerWidth() + 1;
            var hh = $("#sd").outerHeight() + 1;

            var ww2 = $(eleImg).width();
            var hh2 = $(eleImg).height();
            var xx2 = $(eleImg).offset().left;
            var yy2 = $(eleImg).offset().top;

            //元素获取左（上下），右(上下)角的位置
            var upper_right_X = (xx2 - xx) + ww2;//右上角X
            var lower_left_Y = (yy2 - yy) + hh2;//左下角Y
            var upper_left_X = (xx2 - xx);//左上角X
            var upper_left_Y = (yy2 - yy);//左上角Y

            //获取边界窗口的左（上下），右(上下)角的位置
            var upper_right_X2 = (xx - a_x) + ww;//右上角X
            var lower_left_Y2 = (yy - a_y) + hh;//左下角Y
            var upper_left_X2 = (xx - a_x);//左上角X
            var upper_left_Y2 = (yy - a_y);//左上角Y
           
            // 应用在元素上的缩放比例
            var newScale = store.originScale * zoom;

            if (upper_right_X < upper_right_X2 && lower_left_Y < lower_left_Y2 && (parseInt(upper_left_X)) > upper_left_X2 && (parseInt(upper_left_Y)) > upper_left_Y2) {//判断是否超出边界(这条判断移动一下偏移量跟着放大比例就跳出边界内了，就没用了)
                // 最大缩放比例限制
                if (newScale > 2) {
                    newScale = 2;
                }
                // 记住使用的缩放值
                store.scale = newScale;
                // 图像应用缩放效果
                eleImg.style.transform = 'scale(' + newScale + ')';
            }
        }
    });

    document.addEventListener('touchend', function () {//手指离开屏幕后触发
        store.moveable = false;

        delete store.pageX2;
        delete store.pageY2;
    });
    document.addEventListener('touchcancel', function () {//执行都不进来
        store.moveable = false;
        delete store.pageX2;
        delete store.pageY2;
    });