File size: 1,296 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import { computed, type Ref } from 'vue'
import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip'
import type { PPTImageElement } from '@/types/slides'
export default (element: Ref<PPTImageElement>) => {
const clipShape = computed(() => {
let _clipShape = CLIPPATHS.rect
if (element.value.clip) {
const shape = element.value.clip.shape || ClipPathTypes.RECT
_clipShape = CLIPPATHS[shape]
}
if (_clipShape.radius !== undefined && element.value.radius) {
_clipShape = {
..._clipShape,
radius: `${element.value.radius}px`,
style: `inset(0 round ${element.value.radius}px)`,
}
}
return _clipShape
})
const imgPosition = computed(() => {
if (!element.value.clip) {
return {
top: '0',
left: '0',
width: '100%',
height: '100%',
}
}
const [start, end] = element.value.clip.range
const widthScale = (end[0] - start[0]) / 100
const heightScale = (end[1] - start[1]) / 100
const left = start[0] / widthScale
const top = start[1] / heightScale
return {
left: -left + '%',
top: -top + '%',
width: 100 / widthScale + '%',
height: 100 / heightScale + '%',
}
})
return {
clipShape,
imgPosition,
}
} |