mirror of https://gitee.com/godoos/godoos.git
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
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,
|
|
}
|
|
}
|