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 2022-04-16 10:02:56 +08:00
parent b71ca3e144
commit 45731d281d
1 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/Editor/Canvas/Operate/LineElementOperate.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="text-element-operate"> <div class="line-element-operate">
<template v-if="handlerVisible"> <template v-if="handlerVisible">
<ResizeHandler <ResizeHandler
class="operate-resize-handler" class="operate-resize-handler"
@ -8,6 +8,27 @@
:style="point.style" :style="point.style"
@mousedown.stop="$event => dragLineElement($event, elementInfo, point.handler)" @mousedown.stop="$event => dragLineElement($event, elementInfo, point.handler)"
/> />
<svg
:width="svgWidth"
:height="svgHeight"
:stroke="elementInfo.color"
overflow="visible"
:style="{ transform: `scale(${canvasScale})` }"
>
<template v-if="elementInfo.curve">
<g>
<line class="anchor-line" :x1="elementInfo.start[0]" :y1="elementInfo.start[1]" :x2="elementInfo.curve[0]" :y2="elementInfo.curve[1]"></line>
<line class="anchor-line" :x1="elementInfo.end[0]" :y1="elementInfo.end[1]" :x2="elementInfo.curve[0]" :y2="elementInfo.curve[1]"></line>
</g>
</template>
<template v-if="elementInfo.cubic">
<g v-for="(item, index) in elementInfo.cubic" :key="index">
<line class="anchor-line" v-if="index === 0" :x1="elementInfo.start[0]" :y1="elementInfo.start[1]" :x2="item[0]" :y2="item[1]"></line>
<line class="anchor-line" v-if="index === 1" :x1="elementInfo.end[0]" :y1="elementInfo.end[1]" :x2="item[0]" :y2="item[1]"></line>
</g>
</template>
</svg>
</template> </template>
</div> </div>
</template> </template>
@ -22,7 +43,7 @@ import { OperateLineHandlers } from '@/types/edit'
import ResizeHandler from './ResizeHandler.vue' import ResizeHandler from './ResizeHandler.vue'
export default defineComponent({ export default defineComponent({
name: 'text-element-operate', name: 'line-element-operate',
inheritAttrs: false, inheritAttrs: false,
components: { components: {
ResizeHandler, ResizeHandler,
@ -44,6 +65,9 @@ export default defineComponent({
setup(props) { setup(props) {
const { canvasScale } = storeToRefs(useMainStore()) const { canvasScale } = storeToRefs(useMainStore())
const svgWidth = computed(() => Math.max(props.elementInfo.start[0], props.elementInfo.end[0]))
const svgHeight = computed(() => Math.max(props.elementInfo.start[1], props.elementInfo.end[1]))
const resizeHandlers = computed(() => { const resizeHandlers = computed(() => {
const handlers = [ const handlers = [
{ {
@ -95,8 +119,26 @@ export default defineComponent({
}) })
return { return {
svgWidth,
svgHeight,
canvasScale,
resizeHandlers, resizeHandlers,
} }
}, },
}) })
</script> </script>
<style lang="scss" scoped>
svg {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
transform-origin: 0 0;
}
.anchor-line {
stroke-width: 1px;
stroke-dasharray: 5 5;
opacity: .5;
}
</style>