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

Question

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

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

我尝试通过将 determinant/cross-product 用于 positive/negative 方向来解决问题：

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;

正如您从 fiddle 中看到的那样，现在它 "sometimes" 缩小了，而且总是跳动。

有数学专业的有想法吗？我得到的行列式不正确吗？提前感谢您的任何见解。

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，你只移动了 X.

因此，此函数根据您将鼠标移动到上次调整大小的距离：

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/

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

Resize script scales up, not down. Using the determinant makes it jumpy

javascript

geometry

resize

determinants

pythagorean