javascript 如何通过使用J收缩来增量更新元素比例

lf3rwulv 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(122)

下面的代码几乎可以工作，我想我已经接近了，但离它正常工作还很远。问题是handlePinch函数的设置方式。当用户捏一点来缩放时，实际发生的是正方形开始加速。用户捏得越多，正方形缩放得越快。

如何实现这一点，使用户每次捏住手指进行缩放时，它都以增量方式缩放，即在不超过最大缩放比例的情况下从停止的位置开始？

我在这个问题上纠结了两天，似乎没有任何公式来说明这样的东西是如何工作的。注意，我知道有这样的库，我想知道如何使用vanilla js

const box = document.querySelector('.box')

    function updateCss(scale) {
      box.style.transform = `scale(${scale})`
    }

    let lastScale
    let currentScale

    let isAlreadyScaled = false
    const minScale = 1
    const maxScale = 1.8
    function handlePinch(e) {
      e.preventDefault()
      const isZooming = e.scale > 1

      if (isZooming) {
        if (!isAlreadyScaled) {
          lastScale = Math.min(minScale * e.scale, maxScale)
          isAlreadyScaled = true
        } else {
          lastScale = Math.min(minScale * (lastScale * e.scale), maxScale)
        }
      }

      updateCss(lastScale)
    }

    box.addEventListener('touchstart', e => {
      if (e.touches.length === 2) {
        handlePinch(e)
      }
    })

    box.addEventListener('touchmove', e => {
      if (e.touches.length === 2) {
        handlePinch(e)
      }
    })

* {
        box-sizing: border-box;
      }

      body {
        padding: 0;
        margin: 0;
      }

      .wrapper {
        height: 400px;
        width: 100%;
        top: 0;
        left: 0;
        position: relative;
        margin: 24px;
      }

      .scale-container {
        height: 100%;
        width: 100%;
        position: absolute;
        background: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .box {
        height: 200px;
        width: 200px;
        background: pink;
        position: absolute;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <div class="wrapper">
      <div class="scale-container">
        <div class="box"></div>
      </div>
    </div>
  </body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75140354/how-to-incrementally-update-an-elements-scale-by-pinching-with-js

1条答案

按热度按时间

ohfgkhjo1#

要实施缩放以进行增量缩放，您可以：

创建一个变量currentScale，用于存储

求平方并将其初始化为1。

在更新currentScale.之前，使用if语句检查当前小数位数是大于maxScale还是小于minScale
根据当前比例值与上一个比例值之间的差值更新currentScale变量，而不是将当前比例乘以上一个比例。
使用updateCss(currentScale)函数根据currentScale变量更新正方形的比例。
删除不必要的变量lastScale和isAlreadyScaled
删除touchstart event listener，仅使用touchmove事件处理夹断。
确保将minScale和maxScale作为常量。
确保将currentScale变量作为全局变量

还需要注意的是，还有其他可用的库，如hammer.js，可用于轻松实现增量缩放的收缩缩放
vanilaJS实现将是：

let currentScale = 1;
const minScale = 1;
const maxScale = 1.8;

function handlePinch(e) {
  e.preventDefault();
  const scaleDiff = e.scale - currentScale;
  if (currentScale + scaleDiff > maxScale) {
    currentScale = maxScale;
  } else if (currentScale + scaleDiff < minScale) {
    currentScale = minScale;
  } else {
    currentScale += scaleDiff;
  }
  updateCss(currentScale);
}

box.addEventListener('touchmove', e => {
  if (e.touches.length === 2) {
    handlePinch(e)
  }
});

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何通过使用J收缩来增量更新元素比例

1条答案

相关问题

热门标签

最新问答