javascript – Probleme mit der Koordinatenberechnung nach der Transformation
巴扎黑
巴扎黑 2017-07-01 09:12:23
0
1
1502

Nachdem ich eine Funktion zum Ziehen von Bildern im übergeordneten Container erstellt habe, habe ich den übergeordneten Container mithilfe von „Transformieren“ geändert, gedreht, gestreckt usw. Danach wurde die Berechnung der Koordinaten unordentlich. Ich würde gerne fragen, ob Ich möchte: Was soll er tun, wenn er normal arbeitet?
Der Ziehcode lautet wie folgt:
$(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;
        })    

})

Unmittelbar nachdem ich den DragContainer gedreht hatte, um ihn zu drehen (45 Grad), wurde es unordentlich und die Koordinaten stiegen direkt auf über -1000

巴扎黑
巴扎黑

Antworte allen(1)
Ty80

transform旋转缩放都是有基点的,transform-origin

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage