js中transform放大比例時,移動范圍也擴大了

$(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;

    });

標籤：JavaScript

上一篇：按照視頻原始碼寫的 為啥運行不了，求大神解答 感謝~

下一篇：ueditor如何實作匯出？