调整脚本大小会放大，而不是缩小。使用行列式使它变得跳跃

Question

我构建了以下调整大小脚本 - 正如您从小提琴中看到的那样，它适用于放大但不能缩小：

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);
  }
}

我尝试通过将行列式/叉积用于正/负方向来解决问题：

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;

正如您从小提琴中看到的那样，现在它“有时”会缩小，而且总是很跳跃。

任何有想法的数学专业的？我是否错误地获得了行列式？提前感谢您提供任何见解。

Answer 1

当我第一次看它的时候，我发现不可能使用负整数，所以我把你的函数改成这样：

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 + ")";
  }

你可以在这里看到它： https://jsfiddle.net/gregborbonus/a37aeb08/5/

所以在你发表评论后，我做了进一步的编辑，以摆脱最初的位置问题。

您要缩小的所有内容都是根据距起点的距离确定的，那么您将鼠标移动了多远或朝调整大小点移动了多远？

这意味着即使你停止移动 Y 方向，但你移动了一点 X，Y 仍然会大于你从 X 移动的距离，使它基于 Y 进行缩放，但你没有移动 Y，你只是移动了十。

所以，这个函数从你上次调整鼠标移动了多远：

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/