javascript - 在容器内拖动图像，不使用鼠标移动，稍微快一点-6ren

javascript - 在容器内拖动图像，不使用鼠标移动，稍微快一点

转载作者：行者123 更新时间：2023-12-01 15:07:07

我有一个 Vue 组件，我可以在其中放大图像，然后在容器周围移动它。缩放时还有一个小视口(viewport)来显示图像的哪一部分可见。但是，当在它周围移动图像时，它的移动速度比鼠标快，我猜这是由于使用了 scale转换。
我也觉得当我在视口(viewport)上单击并拖动时，我不应该两次反转值，但这似乎是让它用鼠标移动方 block 的唯一方法。

Vue.component('test', {
  template: '#template',
  data: function() {
    return {
      loading: true,

      loop: true,

      speed: 8,

      speedController: 0,

      zoomEnabled: true,
      zoomLevels: [1, 1.5, 2, 2.5, 3],
      zoomLevel: 1,

      frame: 1,
      images: [],
      imagesPreloaded: 0,

      reverse: false,

      viewportScale: 0.3,
      viewportEnabled: true,
      viewportOpacity: 0.8,

      lastX: 0,
      lastY: 0,

      startX: 0,
      startY: 0,

      translateX: 0,
      translateY: 0,

      isMoving: false,
      isDragging: false,
    };
  },
  mounted() {
    window.addEventListener('mouseup', this.handleEnd);
    window.addEventListener('touchend', this.handleEnd);
  },
  beforeDestroy() {
    window.removeEventListener('mouseup', this.handleEnd);
    window.removeEventListener('touchend', this.handleEnd);
  },
  methods: {
    handleSlider(event) {
      this.frame = Number(event.target.value);
    },
    zoom(direction) {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      if (this.zoomLevels[this.zoomLevels.indexOf(closest) + direction] === undefined) {
        return;
      }

      let current = this.zoomLevels.indexOf(closest);
      let index = current += direction;
      if (direction === 0) {
        index = 0;
      }
      this.zoomLevel = this.zoomLevels[index];

      window.requestAnimationFrame(() => {
        this.translate(null, this.$refs.image, true);
      });
    },
    zoomWheel($event) {
      $event.preventDefault();

      this.zoomLevel += $event.deltaY * -0.01;

      if (this.zoomLevel < 1) {
        this.zoomLevel = 1;
      }

      let maxZoom = this.zoomLevels[this.zoomLevels.length - 1];

      this.zoomLevel = Math.min(Math.max(.125, this.zoomLevel), maxZoom);

      window.requestAnimationFrame(() => {
        this.translate(null, this.$refs.image, true);
      });
    },
    handleStart($event) {
      $event.preventDefault();
      if ($event.button && $event.button !== 0) {
        return;
      }
      this.isMoving = true;
      this.isDragging = true;

      this.startX = $event.pageX || $event.touches[0].pageX;
      this.startY = $event.pageY || $event.touches[0].pageY;
    },
    handleMove($event, viewport) {
      if ($event.button && $event.button !== 0) {
        return;
      }
      if (this.isMoving && this.isDragging) {
        const positions = {
          x: $event.pageX || $event.touches[0].pageX,
          y: $event.pageY || $event.touches[0].pageY
        }

        if (this.zoomLevel !== 1) {
          this.translate(positions, $event.target, null, viewport);
        }
        if (this.zoomLevel === 1) {
          this.changeFrame(positions);
        }
      }
    },
    handleEnd($event) {
      if ($event.button && $event.button !== 0) {
        return;
      }
      this.isMoving = false;
    },
    translate(positions, element, zooming, viewport) {
      if (positions === null) {
        positions = {
          x: this.startX,
          y: this.startY
        };
      }

      let move = {
        x: Math.floor(positions.x - this.startX),
        y: Math.floor(positions.y - this.startY)
      };

      // Reverse Mouse Movement
      if (viewport) {
        move.x = -move.x;
        move.y = -move.y;
      }

      let image = element.getBoundingClientRect();
      let container = element.parentNode.getBoundingClientRect();

      let translate = {
        left: Math.floor((container.left - image.left) - (move.x * this.zoomLevel)),
        right: Math.floor((container.right - image.right) - (move.x * this.zoomLevel)),
        top: Math.floor((container.top - image.top) - (move.y * this.zoomLevel)),
        bottom: Math.floor((container.bottom - image.bottom) - (move.y * this.zoomLevel))
      };

      // Reverse Translate Movement
      if (viewport) {
        translate.left = -translate.left;
        translate.right = -translate.right;
        translate.top = -translate.top;
        translate.bottom = -translate.bottom;
      }

      if (zooming) {
        if (translate.left <= 0) {
          this.translateX += Math.floor(translate.left);
        }
        if (translate.right >= 0) {
          this.translateX += Math.floor(translate.right);
        }
        if (translate.top <= 0) {
          this.translateY += Math.floor(translate.top);
        }
        if (translate.bottom >= 0) {
          this.translateY += Math.floor(translate.bottom);
        }
      }

      if (translate.left >= 0 && translate.right <= 0) {
        this.translateX += Math.floor(move.x);
      }
      if (translate.top >= 0 && translate.bottom <= 0) {
        this.translateY += Math.floor(move.y);
      }

      this.startX = positions.x;
      this.startY = positions.y;
    }
  },
  computed: {
    nextZoomLevel: function() {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      if (this.zoomLevels.indexOf(closest) === this.zoomLevels.length - 1) {
        return this.zoomLevels[0];
      }
      return this.zoomLevels[this.zoomLevels.indexOf(closest) + 1];
    },
    viewportTransform: function() {
      if (this.viewportEnabled) {
        let translateX = -((this.translateX * this.viewportScale) * this.zoomLevel);
        let translateY = -((this.translateY * this.viewportScale) * this.zoomLevel);

        return `scale(${1 / this.zoomLevel}) translateX(${translateX}px) translateY(${translateY}px)`;
      }
    },
    transform: function() {
      return `scale(${this.zoomLevel}) translateX(${this.translateX}px) translateY(${this.translateY}px)`;
    },
    canZoomIn: function() {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      return this.zoomLevels[this.zoomLevels.indexOf(closest) + 1] === undefined
    },
    canZoomOut: function() {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      return this.zoomLevels[this.zoomLevels.indexOf(closest) + -1] === undefined
    }
  }
});

window.vue = new Vue({el: '#app'});

.media-360-viewer {
  position: relative;
  overflow: hidden;
  background: #000;
}

.media-360-viewer>img {
  width: 100%;
}

.media-360-viewer>img.canTranslate {
  cursor: grab;
}

.media-360-viewer>img.isTranslating {
  cursor: grabbing;
}

.media-360-viewer>img.canRotate {
  cursor: w-resize;
}

.media-360-viewer__loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.media-360-viewer__loader * {
  user-select: none;
}

.media-360-viewer__loader>svg {
  width: 100%;
  height: 100%;
  transform: rotate(270deg);
}

.media-360-viewer__loader--text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.media-360-viewer__loader--text p {
  font-size: 100%;
  font-weight: bold;
  color: #fff;
}

.media-360-viewer__loader--text p.large {
  font-size: 150%;
}

.media-360-viewer__loader--background {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 25px;
}

.media-360-viewer__loader--cover {
  stroke-dasharray: 200%;
  stroke: #848484;
  stroke-width: 15px;
  stroke-linecap: round;
}

.media-360-viewer__loader--background,
.media-360-viewer__loader--cover {
  fill: transparent;
}

.media-360-viewer__viewport {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border: 1px solid black;
  overflow: hidden;
}

.media-360-viewer__viewport--image {
  width: 100%;
  pointer-events: none;
}

.media-360-viewer__viewport--zoom {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #fff;
  z-index: 3;
  font-size: 12px;
  pointer-events: none;
}

.media-360-viewer__viewport--square {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 10000px;
  cursor: grab;
  transition: background ease-in-out 0.1s;
}

.media-360-viewer__viewport--square:hover {
  background: rgba(255, 255, 255, 0.2);
}

.media-360-viewer__header {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}

.media-360-viewer__tools {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}

.media-360-viewer__tools>a {
  margin: 0 5px;
  color: #000;
  background: #fff;
  border-radius: 50%;
  width: 40px;
  text-align: center;
  line-height: 40px;
}

.media-360-viewer__tools>a[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.media-360-viewer__tools>a[disabled]:hover {
  color: #000;
  background: #fff;
}

.media-360-viewer__tools>a:hover {
  background: #000;
  color: #fff;
}

.media-360-viewer__tools--autoplay:before {
  font-family: 'ClickIcons';
  content: '\ea81';
}

.media-360-viewer__tools--autoplay.active:before {
  content: '\eb48';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <test></test>
</div>

<script type="text/x-template" id="template">
  <div class="media-360-viewer" ref="container">
    <transition name="fade">
      <div class="media-360-viewer__viewport" v-if="zoomLevel > 1 && viewportEnabled" :style="{ width: (viewportScale * 100) + '%' }">
        <img tabindex="1" draggable="false" alt="Viewport" class="media-360-viewer__viewport--image" src="https://www.bennetts.co.uk/-/media/bikesocial/2019-september-images/2020-yamaha-yzf-r1-and-r1m-review/2020-yamaha-r1-and-r1m_005.ashx?h=493&w=740&la=en&hash=F97CD240F0DDFA9540E912DCF7F07019017035C6">
        <span class="media-360-viewer__viewport--zoom">
                    x{{ Math.round(zoomLevel * 10) / 10 }}
                </span>
        <span :style="{ transform: viewportTransform }" @mouseup="handleEnd" @mousedown="handleStart" @mousemove="handleMove($event, true)" @touchstart="handleStart" @touchend="handleEnd" @touchmove="handleMove($event, true)" class="media-360-viewer__viewport--square"></span>
      </div>
    </transition>
    <img tabindex="1" ref="image" draggable="false" src="https://www.bennetts.co.uk/-/media/bikesocial/2019-september-images/2020-yamaha-yzf-r1-and-r1m-review/2020-yamaha-r1-and-r1m_005.ashx?h=493&w=740&la=en&hash=F97CD240F0DDFA9540E912DCF7F07019017035C6" :style="{ transform: transform }" :class="{
                 canTranslate: zoomLevel > 1 && zoomEnabled,
                 canRotate: zoomLevel === 1,
                 isTranslating: zoomLevel > 1 && zoomEnabled && isMoving
             }" @mouseup="handleEnd" @mousedown="handleStart" @mousemove="handleMove" @touchstart="handleStart" @touchend="handleEnd" @touchmove="handleMove" @dblclick="zoom" @wheel="zoomWheel" alt="360 Image" />
  </div>
</script>

有谁知道我该如何解决这个问题？
编辑
以下是更新后的代码，其中包含已接受答案所建议的更改，现在唯一的问题是视口(viewport)方 block 超出框架。

Vue.component('test', {
  template: '#template',
  data: function() {
    return {
      loading: true,

      loop: true,

      speed: 8,

      speedController: 0,

      zoomEnabled: true,
      zoomLevels: [1, 1.5, 2, 2.5, 3],
      zoomLevel: 1,

      frame: 1,
      images: [],
      imagesPreloaded: 0,

      reverse: false,

      viewportScale: 0.3,
      viewportEnabled: true,
      viewportOpacity: 0.8,

      lastX: 0,
      lastY: 0,

      startX: 0,
      startY: 0,

      translateX: 0,
      translateY: 0,

      isMoving: false,
      isDragging: false,
    };
  },
  mounted() {
    window.addEventListener('mouseup', this.handleEnd);
    window.addEventListener('touchend', this.handleEnd);
  },
  beforeDestroy() {
    window.removeEventListener('mouseup', this.handleEnd);
    window.removeEventListener('touchend', this.handleEnd);
  },
  methods: {
    zoom(direction) {

      // todo: Load high res image based on zoom level

      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      if (this.zoomLevels[this.zoomLevels.indexOf(closest) + direction] === undefined) {
        return;
      }

      let current = this.zoomLevels.indexOf(closest);
      let index = current += direction;
      if (direction === 0) {
        index = 0;
      }
      this.zoomLevel = this.zoomLevels[index];

      this.translate(null, this.$refs.image, true);
    },
    zoomWheel($event) {
      $event.preventDefault();

      this.zoomLevel += $event.deltaY * -0.01;

      if (this.zoomLevel < 1) {
        this.zoomLevel = 1;
      }

      let maxZoom = this.zoomLevels[this.zoomLevels.length - 1];

      this.zoomLevel = Math.min(Math.max(.125, this.zoomLevel), maxZoom);

      this.translate(null, this.$refs.image, true);
    },
    handleStart($event) {
      $event.preventDefault();
      if ($event.button && $event.button !== 0) {
        return;
      }
      this.isMoving = true;
      this.isDragging = true;

      this.startX = $event.pageX || $event.touches[0].pageX;
      this.startY = $event.pageY || $event.touches[0].pageY;
    },
    handleMove($event, viewport) {
      if ($event.button && $event.button !== 0) {
        return;
      }

      if (this.isMoving && this.isDragging) {
        const positions = {
          x: $event.pageX || $event.touches[0].pageX,
          y: $event.pageY || $event.touches[0].pageY
        }

        if (this.zoomLevel !== 1) {
          this.translate(positions, $event.target, null, viewport);
        }
      }
    },
    handleEnd($event) {
      if ($event.button && $event.button !== 0) {
        return;
      }
      this.isMoving = false;
    },
    translate(positions, element, zooming, viewport) {
      window.requestAnimationFrame(() => {
        positions = positions || {
          x: this.startX,
          y: this.startY
        };

        if (viewport) {
          this._translateFromViewport(positions, element);
        } else {
          this._translateFromImage(positions, element, zooming);
        }

        this.startX = positions.x;
        this.startY = positions.y;
      });
    },

    _translateFromViewport: function(positions, element) {
      let move = {
        x: positions.x - this.startX,
        y: positions.y - this.startY
      };

      let box = element.getBoundingClientRect();
      let container = element.parentNode.getBoundingClientRect();

      let translate = {
        left: (container.left - box.left) - ((move.x * this.viewportScale) * this.zoomLevel),
        right: (container.right - box.right) - ((move.x * this.viewportScale) * this.zoomLevel),
        top: (container.top - box.top) - ((move.y * this.viewportScale) * this.zoomLevel),
        bottom: (container.bottom - box.bottom) - ((move.y * this.viewportScale) * this.zoomLevel)
      };

      if (translate.left <= 0 && translate.right >= 0) {
        this.translateX -= move.x / this.viewportScale;
      }

      if (translate.top <= 0 && translate.bottom >= 0) {
        this.translateY -= move.y / this.viewportScale
      }
    },
    _translateFromImage: function(positions, element, zooming) {
      let move = {
        x: Math.floor(positions.x - this.startX),
        y: Math.floor(positions.y - this.startY)
      };

      let image = element.getBoundingClientRect();
      let container = element.parentNode.getBoundingClientRect();

      let translate = {
        left: (container.left - image.left) - (move.x * this.zoomLevel),
        right: (container.right - image.right) - (move.x * this.zoomLevel),
        top: (container.top - image.top) - (move.y * this.zoomLevel),
        bottom: (container.bottom - image.bottom) - (move.y * this.zoomLevel)
      };

      if (zooming) {
        if (translate.left <= 0) {
          this.translateX += translate.left;
        }
        if (translate.right >= 0) {
          this.translateX += translate.right;
        }
        if (translate.top <= 0) {
          this.translateY += translate.top;
        }
        if (translate.bottom >= 0) {
          this.translateY += translate.bottom;
        }
      }

      if (translate.left >= 0 && translate.right <= 0) {
        this.translateX += move.x / this.zoomLevel;
      }

      if (translate.top >= 0 && translate.bottom <= 0) {
        this.translateY += move.y / this.zoomLevel;
      }
    },
  },
  computed: {
    preloadProgress: function() {
      return Math.floor(this.imagesPreloaded / this.images.length * 100);
    },
    currentPath: function() {
      return this.images[this.frame - 1];
    },
    nextZoomLevel: function() {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      if (this.zoomLevels.indexOf(closest) === this.zoomLevels.length - 1) {
        return this.zoomLevels[0];
      }
      return this.zoomLevels[this.zoomLevels.indexOf(closest) + 1];
    },
    viewportTransform: function() {
      if (this.viewportEnabled) {
        let translateX = -((this.translateX * this.viewportScale) * this.zoomLevel);
        let translateY = -((this.translateY * this.viewportScale) * this.zoomLevel);

        return `scale(${1 / this.zoomLevel}) translateX(${translateX}px) translateY(${translateY}px)`;
      }
    },
    transform: function() {
      return `scale(${this.zoomLevel}) translateX(${this.translateX}px) translateY(${this.translateY}px)`;
    },
    canZoomIn: function() {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      return this.zoomLevels[this.zoomLevels.indexOf(closest) + 1] === undefined
    },
    canZoomOut: function() {
      const closest = this.zoomLevels.reduce((a, b) => {
        return Math.abs(b - this.zoomLevel) < Math.abs(a - this.zoomLevel) ? b : a;
      });

      return this.zoomLevels[this.zoomLevels.indexOf(closest) + -1] === undefined
    }
  }
});

window.vue = new Vue({
  el: '#app'
});

.media-360-viewer {
    position: relative;
    overflow: hidden;
    background: #000;
  width: 500px;
}

.media-360-viewer__image {
    width: 100%;
}

.media-360-viewer__image.canTranslate {
    cursor: grab;
}

.media-360-viewer__image.isTranslating {
    cursor: grabbing;
}

.media-360-viewer__image.canRotate {
    cursor: w-resize;
}

.media-360-viewer__loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.media-360-viewer__loader * {
    user-select: none;
}

.media-360-viewer__loader > svg {
    width: 100%;
    height: 100%;
    transform: rotate(270deg);
}

.media-360-viewer__loader--text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.media-360-viewer__loader--text p {
    font-size: 100%;
    font-weight: bold;
    color: #fff;
}

.media-360-viewer__loader--text p.large {
    font-size: 150%;
}

.media-360-viewer__loader--background {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke: rgba(0, 0, 0, 0.7);
    stroke-width: 25px;
}

.media-360-viewer__loader--cover {
    stroke-dasharray: 200%;
    stroke: #848484;
    stroke-width: 15px;
    stroke-linecap: round;
}

.media-360-viewer__loader--background,
.media-360-viewer__loader--cover {
    fill: transparent;
}

.media-360-viewer__viewport {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    overflow: hidden;
}

.media-360-viewer__viewport--image {
    width: 100%;
    pointer-events: none;
}

.media-360-viewer__viewport--zoom {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #fff;
    z-index: 3;
    font-size: 12px;
    pointer-events: none;
}

.media-360-viewer__viewport--square {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.8) 0 0 0 10000px;
    cursor: grab;
    transition: background ease-in-out 0.1s;
}

.media-360-viewer__viewport--square:hover {
    background: rgba(255, 255, 255, 0.2);
}

.media-360-viewer__tools {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
}

.media-360-viewer__tools > a {
    margin: 0 5px;
    color: #000;
    background: #fff;
    border-radius: 50%;
    width: 40px;
    text-align: center;
    line-height: 40px;
}

.media-360-viewer__tools > a[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.media-360-viewer__tools > a[disabled]:hover {
    color: #000;
    background: #fff;
}

.media-360-viewer__tools > a:hover {
    background: #000;
    color: #fff;
}

.media-360-viewer__tools--autoplay:before {
    font-family: 'ClickIcons';
    content: '\ea81';
}

.media-360-viewer__tools--autoplay.active:before {
    content: '\eb48';
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <test></test>
</div>

<script type="text/x-template" id="template">
  <div class="media-360-viewer" ref="container">
    <transition name="fade">
      <div class="media-360-viewer__viewport" v-if="zoomLevel > 1 && viewportEnabled" :style="{ width: (viewportScale * 100) + '%' }">
        <img tabindex="1" draggable="false" alt="Viewport" class="media-360-viewer__viewport--image" src="https://www.bennetts.co.uk/-/media/bikesocial/2019-september-images/2020-yamaha-yzf-r1-and-r1m-review/2020-yamaha-r1-and-r1m_005.ashx?h=493&w=740&la=en&hash=F97CD240F0DDFA9540E912DCF7F07019017035C6">
        <span class="media-360-viewer__viewport--zoom">
                    x{{ Math.round(zoomLevel * 10) / 10 }}
                </span>
        <span :style="{ transform: viewportTransform }" @mouseup="handleEnd" @mousedown="handleStart" @mousemove="handleMove($event, true)" @touchstart="handleStart" @touchend="handleEnd" @touchmove="handleMove($event, true)" class="media-360-viewer__viewport--square"></span>
      </div>
    </transition>
    <img tabindex="1" ref="image" draggable="false" src="https://www.bennetts.co.uk/-/media/bikesocial/2019-september-images/2020-yamaha-yzf-r1-and-r1m-review/2020-yamaha-r1-and-r1m_005.ashx?h=493&w=740&la=en&hash=F97CD240F0DDFA9540E912DCF7F07019017035C6"
      :style="{ transform: transform }" :class="{
                 canTranslate: zoomLevel > 1 && zoomEnabled,
                 canRotate: zoomLevel === 1,
                 isTranslating: zoomLevel > 1 && zoomEnabled && isMoving
             }" @mouseup="handleEnd" @mousedown="handleStart" @mousemove="handleMove" @touchstart="handleStart" @touchend="handleEnd" @touchmove="handleMove" @dblclick="zoom" @wheel="zoomWheel" alt="360 Image" />
  </div>
</script>

最佳答案

Math.floor 仅在必要时
这个问题的一部分是调用 Math.floor 的结果。每时每刻。每次调用Math.floor您的下一个计算将不太准确。
如果您仍想对数字进行四舍五入，请仅在计算链的末尾或什至在您使用变量的地方进行。例如:

transform: function() {
  const translateX = Math.floor(this.translateX)
  const translateY = Math.floor(this.translateY)

  return `scale(${this.zoomLevel}) translateX(${translateX}px) translateY(${translateY}px)`;
}

比例因子

However when moving the image around it is moving faster than the mouse

这可以通过将要添加到转换值的数字除以比例因子来解决，比例因子由 zoomLevel 确定像这样:

if (translate.left >= 0 && translate.right <= 0) {
    this.translateX += move.x / this.zoomLevel
}

if (translate.top >= 0 && translate.bottom <= 0) {
    this.translateY += move.y / this.zoomLevel
}

缩放因子 - 视口(viewport)
由于缩放，视口(viewport)仍然以某种方式损坏，我们也需要调整平移值，但这次不使用 zoomLevel但是存储在 this.viewportScale 中的视口(viewport)的比例.因此，将两个解决方案合并在一起，我们现在有如下代码:

if (translate.left >= 0 && translate.right <= 0) {
    if (viewport) {
        this.translateX += move.x / this.viewportScale
    } else {
        this.translateX += move.x / this.zoomLevel
    }
}

if (translate.top >= 0 && translate.bottom <= 0) {
    if (viewport) {
        this.translateY += move.y / this.viewportScale
    } else {
        this.translateY += move.y / this.zoomLevel
    }
}

反转值

I also feel like when i'm clicking and dragging on the viewport I shouldn't be reversing the values twice

我认为没有更好的方法可以做到这一点，除非您想创建两个内部翻译函数来根据输入源(视口(viewport)或图像)处理翻译。这将是一种绝对干净的编码方法。例如，如果将来您想编写一些特定于视口(viewport)的代码，则不需要包含另一个和另一个 if .你的函数可能像这样:

translate (positions, element, zooming, viewport) {
    positions = positions || {
        x: this.startX,
        y: this.startY
    }

    if (viewport) {
        this._translateFromViewport(positions, element, zooming)
    } else {
        this._translateFromImage(positions, element, zooming)
    }

    this.startX = positions.x
    this.startY = positions.y
}

在哪里 _translateFromViewport和 _translateFromImage函数保存功能特定的代码。

关于javascript - 在容器内拖动图像，不使用鼠标移动，稍微快一点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63520188/

文章推荐： groovy - EBCDIC 代码页不转换小写 'a'

文章推荐： java - Griffon 中的保存文件对话框

文章推荐： gwt - 如何在我的 gwt 项目中使用第 3 方 Java 库？

拖动 gridstack 卡时滚动内容
我正在使用 gridstack 来显示我的小部件。拖动和调整大小适用于 gridstack 卡，但当我将卡拖到底部时，卡的容器不会滚动。我想在拖动卡片时滚动那个容器。该容器只是一个 div 元素，所有
Flutter:使用手势检测器禁用多点触控/拖动
我目前正在构建一个多个处理的 slider 小部件，并且目前正在实现手势检测器。我有一个问题，如果您用第二根手指触摸/拖动屏幕，检测器会识别它并调用 onDragUpdate 函数，这是我试图禁用的功
AngularJS ng 拖动
我是 AngularJS 的新手，我对当前的项目有点压力，这就是我在这里问的原因。我看到 AngularJS 有 ng-dragstart 事件( http://docs.ng.dart.ant.c
JavaScript 图像缩放和平移(拖动)
关于缩放大图像和平移有什么建议吗？最好内联在页面上。我一直在使用PanoJS(又名GSV2)，但是现在越来越多的人使用iPhone/iPad/Android类型的设备，这个库要么太慢，要么旧版本不支
java - 拖动 JPanel
我在尝试拖动 JPanel 时遇到问题。如果我纯粹在 MouseDragged 中将其实现为: public void mouseDragged(MouseEvent me) { me.getS
android - 拖动/移动后将按钮移回原点
我有一个需要与屏幕底部对齐的 ImageButton，当我单击并拖动它时，它会随着我的手指移动一定距离，超过该距离它不会远离原点，而是继续跟随我的手指从原点开始的方向。当我松手时，按钮必须滑回原点。
android - 拖动 TextView
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
android - 拖动，缩放没有矩阵android的imageview
我需要一个解决方案来实现拖动和缩放，在不使用矩阵的情况下围绕屏幕 onTouch 事件路由 ImageView。我搜索了很多但所有答案都是用矩阵完成的，因为我在屏幕矩阵中有多个对象不适合我，我想拖动和
ios - 拖动 UIView
我需要一些帮助来拖动 UIView 以显示主视图下方的菜单 View 。我有两个 UIView。menuView - 包括菜单按钮和标签和 mainView - 位于 menuView 之上。我
javascript - 谷歌地图即使在实现后也不可拖动/拖动
谷歌地图即使设为 true 也不可拖动/拖动。重现步骤:在新选项卡中加载带有 map 的页面，检查并在不执行任何操作的情况下转到移动 View 。现在在移动 View 中左右上下拖动 map ，它将
Android在ImageView上缩放、拖动、绘制
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处，如您在屏幕截图中所见。而且我只需要简单地在图片上绘图，并且可以缩放和拖动这张图片。
c# - 尝试模拟鼠标点击/拖动
所以我试图模拟鼠标左键单击和鼠标左键释放来执行一些自动拖放操作。它目前在 C# Winforms(是的，winforms :|)中并且有点笨拙。基本上，一旦发送了点击，我希望它根据 Kinect
html5 - 拖动 Canvas
我有一个巨大的 HTML5 Canvas，我希望它像谷歌地图一样工作:用户可以拖动它并始终只看到它的一小部分(屏幕大小)。它只呈现您在屏幕上可以看到的部分。我该怎么做？你有想法吗？最佳答案 2 个简
javascript - 如何为触摸和鼠标(拖动)事件制作可拖动元素
我有以下拖放应用程序代码，它在桌面上按预期工作，但是当我想在移动设备上使用该应用程序时，拖动事件无法按预期工作。我知道触摸事件是必需的，但我不确定如何设置它们和实现这些功能。 .object
reactjs - 禁用或启用 map 拖动
我正在使用 react-leaflet map ，我用状态改变了很多 map 属性，但是当使用状态来改变拖动属性时它不起作用。 { this.map = map}}
geometry - 拖动/移动多个选定功能-OpenLayers
我知道我可以轻松地允许用户在OpenLayers中选择多个功能/几何图形，但是随后我希望使用户能够轻松地同时拖动/移动所有选定的功能。使用ModifyFeature控件一次只能移动一个要素...是否
拖动 map 时MapControl Xaml元素滞后
我有一个 Windows Phone 运行时应用程序，我使用 xaml 在 map 上显示图钉。当我拖动 map 时，控件试图保持在相同位置时会出现一些滞后。任何帮助，将不胜感
jquery - 滚动可拖动项目的内容时禁用 jQuery 拖动
我通常不会提出此类问题/答案，但我想我会这样做，因为我已经看到这个问题被问了 20 多次，但没有一个答案真正有效。简而言之，问题是，如果您在可拖动 jQuery 项目内的任何位置有可滚动内容(over
uicollectionview - 拖动 UICollectionViewCell 时如何实现透明背景或圆角
我确信一定有一种简单的方法可以做到这一点，但到目前为止，我已经花了很长时间在各种兔子洞中没有成功。我有一个支持拖放的 Collection View 。被拖动的单元格有 UIImageView在 c
delphi - 虚拟 TreeView 拖动
如何在两个virtualtreeview之间复制以复制所有列，而不仅仅是第一列？复制前：复制后：最佳答案树控件不保存任何数据。它不包含要显示的列数据，因此无法复制它。而是，当树控件想要显示任何

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在容器内拖动图像，不使用鼠标移动，稍微快一点