0

次のサイズ変更スクリプトを作成しました-フィドルからわかるように、スケールアップには機能しますが、ダウンには機能しません。

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;

フィドルからわかるように、「時々」スケールダウンし、常にびくびくしています。

アイデアのある数学専攻者はいますか? 行列式を間違って取得していますか? 洞察をお寄せいただきありがとうございます。

4

1 に答える 1

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/

于 2016-04-03T19:46:02.873 に答える