eta_mobile_front/src/views/ppt/components/layers/LineShape.vue

<script setup>
import {computed,onMounted,ref} from 'vue'
import { useDebounceFn  } from '@vueuse/core'
import LineMarker from './LineMarker.vue'
const props=defineProps({
    itemData:{
        type:Object,
        default:{}
    }
})

const svgWidth=computed(()=>{
    const width = Math.abs(props.itemData.start[0] - props.itemData.end[0])
    return width < 25 ? 25 : width
}) 

const svgHeight=computed(()=>{
    const height = Math.abs(props.itemData.start[1] - props.itemData.end[1])
    return height < 25 ? 25 : height
}) 

// 需要单独缩放图层模块
let scale=ref('')
const domResize=useDebounceFn (()=>{
    console.log('更新layer大小');
    const w= document.getElementsByClassName('ppt-detail-page')[0].clientWidth
    scale.value=`scale(${w/906},${w/906})`
},0)

onMounted(() => {
    window.addEventListener("resize", () => {
        // domResize()
    }, false)
})

</script>





<template>
    <div 
        class="line-shape-box"
        :style="{
            top: itemData.percentageTop*100 + '%',
            left: itemData.percentageLeft*100 + '%',
            transform:scale
        }"
    >
        <svg 
            overflow="visible" 
            :width="svgWidth"
            :height="svgHeight"
        >
            <defs>
                <LineMarker
                    v-if="itemData.points[0]"
                    :id="itemData.id"
                    position="start"
                    :type="itemData.points[0]"
                    :color="itemData.color"
                    :baseSize="itemData.strokeWidth"
                />
                <LineMarker
                    v-if="itemData.points[1]"
                    :id="itemData.id"
                    position="end"
                    :type="itemData.points[1]"
                    :color="itemData.color"
                    :baseSize="itemData.strokeWidth"
                />
            </defs>
            <path   
                :d="`M ${itemData.start[0]}, ${itemData.start[1]} L ${itemData.end[0]}, ${itemData.end[1]}`" 
                fill="none"
                :stroke="itemData.color"
                :stroke-width="itemData.strokeWidth" 
                :stroke-dasharray="itemData.style === 'dashed' ? '10 6' : '0 0'"
                :marker-start="itemData.points[0] ? `url(#${itemData.id}-${itemData.points[0]}-start)` : ''"
                :marker-end="itemData.points[1] ? `url(#${itemData.id}-${itemData.points[1]}-end)` : ''" 
            ></path>
        </svg>
    </div>
</template>

<style lang="scss" scoped>
.line-shape-box{
    position: absolute;
    pointer-events: none;
    transform-origin: 0 0;
    svg{
        overflow:visible;
        transform-origin: 0 0;
    }
}
</style>