【前端】es-drager 图片同比缩放 缩放比 只修改宽 只修改高

【前端】es-drager 图片同比缩放 缩放比

ES Drager 拖拽组件 (vangleer.github.io)

核心代码

//初始宽
let width = ref(108)

//初始高
let height = ref(72)


//以下两个变量 用来区分是单独的修改宽 还是高 或者是同比
//缩放开始时的宽
let oldWidth = 0
//缩放开始时的高
let oldHeight = 0



// resize start   缩放开始
const onResizeStart = (dragData: DragData) => {

  //初始化old宽高  用来区分用户拖拽的哪个点
  oldWidth = dragData.width
  oldHeight = dragData.height

  
  console.log('缩放开始', dragData)
}

 
// resizing 缩放中...
const onResize = (dragData: DragData) => {

  
  if(dragData.width == oldWidth && dragData.height == oldHeight){
      return
  }
  
  if(dragData.width == oldWidth){
    
    //只改变高
    console.log('缩放中...只改变高', dragData)
    
  }else if(dragData.height == oldHeight){
    //只改变宽
    console.log('缩放中...只改变宽', dragData)
  }else{
    //同比
     console.log('缩放中...同比缩放', dragData)

    let 缩放比例 = (dragData.width / oldWidth)
    //进行同比缩放
//如果画布有缩放比 这里也可以用 oldHeight 或者 用缩放比之后的高度
 //dragData.height =  oldHeight * 缩放比例
    dragData.height =  height.value * 缩放比例
  }
 
}

全部代码

<template>
  <Drager
      :width="width"
      :height="height"
      :left="100"
      :top="100"
      rotatable
      @change="onChange"
      @drag="onDrag"
      @drag-start="onDragStart"
      @drag-end="onDragEnd"
      @resize="onResize"
      @resize-start="onResizeStart"
      @resize-end="onResizeEnd"
      @rotate="onRotate"
      @rotate-start="onRotateStart"
      @rotate-end="onRotateEnd"
      @focus="onFocus"
      @blur="onBlur"
  />
</template>

<script setup lang="ts">
import Drager, { type DragData } from 'es-drager'
import { ref } from 'vue';

let width = ref(108)
let height = ref(72)

let oldWidth = 0
let oldHeight = 0

// let width = 100
// let height = 100

// @change="onChange"
// drag、resize、rotate
const onChange = (dragData: DragData) => {
  console.log('onChange', dragData)
}

// draging
const onDrag = (dragData: DragData) => {
  console.log('onDrag', dragData)
}
// drag start
const onDragStart = (dragData: DragData) => {
  
  //拖拽开始
  
  console.log('拖拽开始', dragData)
}
// drag end
const onDragEnd = (dragData: DragData) => {
  console.log('onDragEnd', dragData)
}



// resizing
const onResize = (dragData: DragData) => {

  
  if(dragData.width == oldWidth && dragData.height == oldHeight){
      return
  }
  
  if(dragData.width == oldWidth){
    
    //只改变高
    console.log('缩放中...只改变高', dragData)
    
  }else if(dragData.height == oldHeight){
    //只改变宽
    console.log('缩放中...只改变宽', dragData)
  }else{
    //同比
     console.log('缩放中...同比缩放', dragData)

    let 缩放比例 = (dragData.width / width.value)
    //进行同比缩放
    dragData.height =  height.value * 缩放比例
  }
 
}
// resize start
const onResizeStart = (dragData: DragData) => {

  oldWidth = dragData.width
  oldHeight = dragData.height
  
  console.log('缩放开始', dragData)
}
// resize end
const onResizeEnd = (dragData: DragData) => {
  console.log('缩放结束', dragData)
}

// rotating
const onRotate = (dragData: DragData) => {
  console.log('onRotate', dragData)
}
// rotate start
const onRotateStart = (dragData: DragData) => {
  console.log('onRotateStart', dragData)
}
// resize end
const onRotateEnd = (dragData: DragData) => {
  console.log('onRotateEnd', dragData)
}

// focus/selected
function onFocus(val: boolean) {
  console.log('onFocus', val)
}
// blur/unselected
function onBlur(val: boolean) {
  console.log('onBlur', val)
}
</script>