github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 虚线线条/边框优化

Browse Source
This commit is contained in:
pipipi-pikachu 2023-10-06 15:27:05 +08:00
parent 633cad8b56
commit cef9024de1
9 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/components/element/ElementOutline.vue
View File

@ -14,7 +14,7 @@
:d="`M0,0 L${width},0 L${width},${height} L0,${height} Z`"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
:stroke-dasharray="strokeDashArray"
></path>
</svg>
</template>
@ -33,8 +33,8 @@ const props = defineProps<{
const {
outlineWidth,
outlineStyle,
outlineColor,
strokeDashArray,
} = useElementOutline(toRef(props, 'outline'))
</script>

4
src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
View File

@ -17,7 +17,7 @@
:ry="height / 2"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
:stroke-dasharray="strokeDashArray"
></ellipse>
</svg>
</template>
@ -35,8 +35,8 @@ const props = defineProps<{
const {
outlineWidth,
outlineStyle,
outlineColor,
strokeDashArray,
} = useElementOutline(toRef(props, 'outline'))
</script>

4
src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
View File

@ -14,7 +14,7 @@
:d="createPath(width, height)"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
:stroke-dasharray="strokeDashArray"
></path>
</svg>
</template>
@ -33,8 +33,8 @@ const props = defineProps<{
const {
outlineWidth,
outlineStyle,
outlineColor,
strokeDashArray,
} = useElementOutline(toRef(props, 'outline'))
</script>

4
src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
View File

@ -17,7 +17,7 @@
:height="height"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
:stroke-dasharray="strokeDashArray"
></rect>
</svg>
</template>
@ -38,8 +38,8 @@ const props = withDefaults(defineProps<{
const {
outlineWidth,
outlineStyle,
outlineColor,
strokeDashArray,
} = useElementOutline(toRef(props, 'outline'))
</script>

6
src/views/components/element/LineElement/BaseLineElement.vue
View File

@ -71,7 +71,11 @@ const svgHeight = computed(() => {
return height < 24 ? 24 : height
})
const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0')
const lineDashArray = computed(() => {
if (props.elementInfo.style !== 'dashed') return '0 0'
const size = props.elementInfo.width
return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
})
const path = computed(() => {
return getLineElementPath(props.elementInfo)

6
src/views/components/element/LineElement/index.vue
View File

@ -93,7 +93,11 @@ const svgHeight = computed(() => {
return height < 24 ? 24 : height
})
const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0')
const lineDashArray = computed(() => {
if (props.elementInfo.style !== 'dashed') return '0 0'
const size = props.elementInfo.width
return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
})
const path = computed(() => {
return getLineElementPath(props.elementInfo)

4
src/views/components/element/ShapeElement/BaseShapeElement.vue
View File

@ -47,7 +47,7 @@
:fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'"
:stroke-dasharray="strokeDashArray"
></path>
</g>
</svg>
@ -74,7 +74,7 @@ const props = defineProps<{
}>()
const outline = computed(() => props.elementInfo.outline)
const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
const { outlineWidth, outlineColor, strokeDashArray } = useElementOutline(outline)
const shadow = computed(() => props.elementInfo.shadow)
const { shadowStyle } = useElementShadow(shadow)

4
src/views/components/element/ShapeElement/index.vue
View File

@ -53,7 +53,7 @@
:fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
:stroke="outlineColor"
:stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
:stroke-dasharray="strokeDashArray"
></path>
</g>
</svg>
@ -111,7 +111,7 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
}
const outline = computed(() => props.elementInfo.outline)
const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
const { outlineWidth, outlineColor, strokeDashArray } = useElementOutline(outline)
const shadow = computed(() => props.elementInfo.shadow)
const { shadowStyle } = useElementShadow(shadow)

7
src/views/components/element/hooks/useElementOutline.ts
View File

@ -7,9 +7,16 @@ export default (outline: Ref<PPTElementOutline | undefined>) => {
const outlineStyle = computed(() => outline.value?.style || 'solid')
const outlineColor = computed(() => outline.value?.color || '#d14424')
const strokeDashArray = computed(() => {
if (outlineStyle.value !== 'dashed') return '0 0'
const size = outlineWidth.value
return size <= 6 ? `${size * 4.5} ${size * 2}` : `${size * 4} ${size * 1.5}`
})
return {
outlineWidth,
outlineStyle,
outlineColor,
strokeDashArray,
}
}