Question

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

屏幕的中心是缩放变换的原点，因此当内部块在页面中居时，它看起来只是缩放，但是当您将内部块拖动到中心原点时，它将会适当地围绕或远离屏幕的中心点进行缩放。我用JSFiddle中的一个小红点标记了中心屏幕点，因此更容易看到。

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

问题：当内部块是比例因子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的开发票据页面上突出显示了问题和许多示例，他们决定不解决这个问题。我将探索其他选择。

拖动后动态更改jquery中缩放的transform-origin

1 个答案: