You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

50 lines
1.4 KiB

import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
export default () => {
const mainStore = useMainStore()
const { canvasPercentage, canvasScale, canvasDragged } = storeToRefs(mainStore)
const canvasScalePercentage = computed(() => Math.round(canvasScale.value * 100) + '%')
/**
* 缩放画布百分比
* @param command 缩放命令:放大、缩小
*/
const scaleCanvas = (command: '+' | '-') => {
let percentage = canvasPercentage.value
const step = 5
const max = 200
const min = 30
if (command === '+' && percentage <= max) percentage += step
if (command === '-' && percentage >= min) percentage -= step
mainStore.setCanvasPercentage(percentage)
}
/**
* 设置画布缩放比例
* 但不是直接设置该值,而是通过设置画布可视区域百分比来动态计算
* @param value 目标画布缩放比例
*/
const setCanvasScalePercentage = (value: number) => {
const percentage = Math.round(value / canvasScale.value * canvasPercentage.value) / 100
mainStore.setCanvasPercentage(percentage)
}
/**
* 重置画布尺寸和位置
*/
const resetCanvas = () => {
mainStore.setCanvasPercentage(90)
if (canvasDragged) mainStore.setCanvasDragged(false)
}
return {
canvasScalePercentage,
setCanvasScalePercentage,
scaleCanvas,
resetCanvas,
}
}