javascript - Problèmes liés au calcul des coordonnées après transformation
巴扎黑
巴扎黑 2017-07-01 09:12:23
0
1
1563

Après avoir créé une fonction permettant de faire glisser des images dans le conteneur parent, j'ai utilisé transformer pour changer le conteneur parent, le faire pivoter, l'étirer, etc. Après cela, le calcul des coordonnées a commencé à devenir compliqué. J'aimerais demander si. Je veux Que doit-il faire s'il travaille normalement ?
Le code de glissement est le suivant :
$(function(){

 var dragging = false;
        var iX, iY;
        var qX, qY;
        var tempid;
         $(".dragcontain").mousedown(function(e) {
            dragging = true;
            iX = accSub(e.clientX,this.offsetLeft);
            iY = accSub(e.clientY,this.offsetTop);                
            qX = $(e.target).children().position().left;
            qY = $(e.target).children().position().top;
            console.log(qX,qY);
            console.log(iX,iY);
            this.setCapture && this.setCapture();
             return false;
        });
        document.onmousemove = function(e) {
            if (dragging) {
            var e = e || window.event;
            console.log("sX:",e.clientX,"sY:",e.clientY);
            var nX = accSub(e.clientX,e.target.offsetLeft);
            var nY = accSub(e.clientY,e.target.offsetTop);
            console.log(e.clientX,e.target.offsetLeft)
            var mX = accSub(nX,iX);
            var mY = accSub(nY,iY);
            var oX = accAdd(qX,mX);
            var oY = accAdd(qY,mY);
            $(e.target).children().css({"left":oX + "px", "top":oY + "px"});
            console.log("iX:",iX,"iY:",iY);
            console.log("oX:",oX,"oY:",oY);
            console.log("nX:",nX,"nY:",nY);
            console.log("mX:",mX,"mY:",mY);
            console.log("qX:",qX,"qY:",qY);
            console.log("");
            return false;
            }
        };
        $(document).mouseup(function(e) {
            dragging = false;
            e.cancelBubble = true;
            iX=0;
            iY=0;
        })    

})

Juste après avoir fait pivoter le dragcontain pour le faire pivoter (45 degrés), cela a commencé à devenir compliqué et les coordonnées sont passées directement à plus de -1000

巴扎黑
巴扎黑

répondre à tous(1)
Ty80

La rotation et la mise à l'échelle des transformations ont toutes des points de base, une origine de transformation

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal