Redimensionner le script à l'échelle supérieure et non inférieure. En utilisant le déterminant le rend nerveux

Question

J'ai construit le script Redimensionner suivant - comme vous pouvez le voir le violon, il travaille pour intensifier mais pas vers le bas:

https://jsfiddle.net/calipoop/a37aeb08/

var item = document.getElementById('item'), 
btn = document.getElementById('resizeBtn'), 
s = 1; 

btn.addEventListener('mousedown', initResize); 

function initResize(e) { 
    var startS = s, startX = e.clientX, startY = e.clientY, dx, dy, d; 
    window.addEventListener('mousemove', resize); 
    window.addEventListener('mouseup', killResize); 

    function resize(e) { 
    dx = startX - e.clientX; 
    dy = startY - e.clientY; 
    d = Math.round(Math.sqrt(dx * dx + dy * dy)); 
    s = startS + (d * .001); 
    item.style.transform = "scale(" + s + ")"; 
    } 

    function killResize() { 
    window.removeEventListener('mousemove', resize); 
    window.removeEventListener('mouseup', killResize); 
    } 
} 

J'ai essayé de résoudre le problème en utilisant le déterminant/contre-produit pour une direction positive/négative:

https://jsfiddle.net/calipoop/zbx3us36/

det = (startX*e.clientY) - (e.clientX*startY); 
dir = (det >= 0) ? 1 : -1; //get direction from sign of determinant 
d = Math.round(Math.sqrt(dx * dx + dy * dy)) * dir; 

Comme vous pouvez le voir à partir du violon, maintenant il "parfois" réduit, et il est toujours nerveux.

Des majors en mathématiques avec des idées? Est-ce que je reçois mal le déterminant? Merci d'avance pour toute idée.

Answer 1

Quand je l'ai regardé, j'ai vu qu'il n'y avait aucun moyen d'un entier négatif pourrait être utilisé, donc je modifié votre fonction comme ceci:

function initResize(e) { 
    var startS = s, 
    startX = e.clientX, 
    startY = e.clientY, 
    dx, dy, d; 
    window.addEventListener('mousemove', resize); 
    window.addEventListener('mouseup', killResize); 

    function resize(e) { 
    dx = startX - e.clientX; 
    dy = startY - e.clientY; 
    negative = false; 
    if (dx < 0 || dy < 0) negative = true; 
    d = Math.abs(Math.round(Math.sqrt(dx * dx + dy * dy))); //Always postive, need a way to determine if should be negative. 
    if (!negative) d = (d * -1); 
    s = startS + (d * .001); 

    item.style.transform = "scale(" + s + ")"; 
    } 

Vous pouvez le voir ici: https://jsfiddle.net/gregborbonus/a37aeb08/5/

Donc, après que vous commentiez, j'ai fait un autre montage, pour se débarrasser du problème de position initiale.

Tout ce que vous écaillage de a été déterminé en fonction de la distance du point de départ, donc la distance ou vers le point de redimensionnement ne vous déplacez votre souris? Cela signifie que même si vous avez arrêté de déplacer la direction Y, mais que vous avez déplacé X un peu, Y serait encore plus grand que votre déplacement de X, ce qui le rendra hors de Y, mais vous ne bougerez pas Y, vous seulement déplacé X.

Ainsi, cette fonction tire de la distance que vous avez déplacé votre souris de la dernière Redimensionner:

function initResize(e) { 
    var startS = s, 
    startX = e.clientX, 
    startY = e.clientY, 
    dx, dy, d; 
    window.addEventListener('mousemove', resize); 
    window.addEventListener('mouseup', killResize); 

    function resize(e) { 
    //The problem with this logic is that while resizing, you calculate based on distance FROM your start, this is not always the best approach, so what you need is the difference from your last recorded position. 

    dx = startX - e.clientX; 
    dy = startY - e.clientY; 
    startX=e.clientX; //for the next run 
    startY=e.clientY; //for the next run 
    negative = false; 
    if (dx < 0 || dy < 0) negative = true; 
    //d = Math.abs(Math.round(Math.sqrt(dx * dx + dy * dy))); //Always postive, need a way to determine if should be negative. 
    d=Math.max(Math.abs(dx),Math.abs(dy))*3; //Lets figure out which is the max and do the math off that. 
    if (!negative) d = (d * -1); 
    s = startS + (d * .001); 
    startS=s; //Set the scale for the next run. 

    item.style.transform = "scale(" + s + ")"; 
    } 

    function killResize() { 

    window.removeEventListener('mousemove', resize); 
    window.removeEventListener('mouseup', killResize); 
    } 
} 

https://jsfiddle.net/gregborbonus/a37aeb08/6/