javascript - 拖动后动态更改 jquery 中比例的变换原点

Question

我正在处理一个页面，该页面在容器内包含一个矩形内部 block 。内部 block 可以拖动，也可以在滚动鼠标时缩放。

[ See my JSFiddle . ]

屏幕的中心是缩放变换的原点，所以当内部 block 在页面中居中时，它看起来只是简单地缩放，但是当你围绕中心原点拖动内部 block 时，它会围绕或远离屏幕中心点适当缩放。我在 JSFiddle 中用小红点标记了中心屏幕点，以便更容易看到。

当内部 block 被拖动时，我重新计算它的顶部/左侧坐标，以及该位置与页面中心之间的差异，以获得转换原点调整坐标。

问题:当内部 block 的比例因子为 1 时它工作正常，但如果您缩放然后拖动对象，它会意外跳转位置并且无法正确缩放。你能看出我做错了什么，或者我需要添加什么来防止意外行为吗？提前致谢!

//Get center of the page "origin"
var originX = $('.block').width()/2;
var originY = $('.block').height()/2;

//Get center point of the inner-block
var blockRX = $('.inner-block').width()/2;
var blockRY = $('.inner-block').height()/2;

//Set position of the inner-block to match center origin initially
$(".inner-block").css({top: originY-blockRY, left: originX-blockRX});
$(".inner-block").draggable();

//Initial Scale 1:1
var scale_system = 1;

//Get Top/Left coords of inner-block
var blockTop = $('.inner-block').offset().top;
var blockLeft = $('.inner-block').offset().left;

//Calculate diff between center of page and Top/Left of inner-block
var xCalc = (originX-blockLeft);
var yCalc = (originY-blockTop);

//Set origin of transformations as center of page (in relation to Top/Left)
//Using the just calculated values
$(".inner-block").css({"-webkit-transform-origin": xCalc+"px "+yCalc+"px"});

//Zoom settings
var maxScale = 4;
var minScale = 1;
var zoomScale = .07;

//Drag Actions
$(function() {
    var isDragging = false;

    //Perform calculations as drag occurs
    $(".inner-block").mousedown(function() {
        $('.inner-block').mousemove(function(e) {
            isDragging = true;
            $(window).unbind("mousemove");

            //Get New Top/Left of inner-block as it drags
            blockTop = $('.inner-block').offset().top;
            blockLeft = $('.inner-block').offset().left;
            console.log("BlockTopLeft "+blockLeft+" "+blockTop);

            //Calculate new diff between Top/Left and Origin
            xCalc = (originX-blockLeft);
            yCalc = (originY-blockTop);
            console.log("Origin Distance "+xCalc+" "+yCalc);
            })
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
        if (wasDragging) {
            //Update origin position in relation to Top/Left of inner-block
            $(".inner-block").css({"-webkit-transform-origin": xCalc+"px "+yCalc+"px"});
        }
    });
});

//Perform scroll function below on mousewheel
$('.block').bind('mousewheel', function (event) {
    scroll(event);
});

function scroll(event) {

    event.preventDefault();  

    var newScale = ((event.originalEvent.wheelDelta / 120 > 0) ? 
                    (scale_system * (1.0 + zoomScale)) : 
                    (scale_system * (1.0 - zoomScale)));

    scale_system = ((newScale > maxScale) ? 
                    (maxScale) : 
                    (((newScale < minScale)?
                      (minScale):
                      (newScale)))
                   );

    //Update Top/Left position of the inner-block
    blockTop = $('.inner-block').offset().top;
    blockLeft = $('.inner-block').offset().left;
    console.log("BlockTopLeft "+blockLeft+" "+blockTop);

    //Update X/Y radius to block center
    blockRX = ($('.inner-block').width()/2)*scale_system;
    blockRY = ($('.inner-block').height()/2)*scale_system;
    console.log("BlockRXY "+blockRX+" "+blockRY);

    //Recalculate the diff between T/L and origin
    console.log("Origin "+originX+" "+originY);
    xCalc = (originX-blockLeft);
    yCalc = (originY-blockTop);
    console.log("Origin - TL "+xCalc+" "+yCalc);

    $(".inner-block").css({"-webkit-transform": "scale(" + scale_system + ")"}); 
}

Answer 1

我想我已经找到了我自己问题的答案。经过大量谷歌搜索后，在尝试执行与拖动配对的 CSS 转换时，jQuery 似乎存在问题。 There is an extensive issue page在 jQuery 的开发单页面上突出显示了问题和许多示例，他们决定不解决该问题。我将探索其他选择。