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

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
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!