<template>
  <svg overflow="visible" width="36" height="36">
    <g 
      :transform="`scale(${BaseSize / shape.viewBox[0]}, ${BaseSize / shape.viewBox[1]}) 
        translate(${BaseTrans},${BaseTrans}) matrix(1,0,0,1,0,0)`"
    >
      <defs>
         <marker 
          v-if="shape.points"
          :id="`preview-line`" 
          orient="auto" 
          :markerWidth="6" 
          :markerHeight="6" 
          :refX="3" 
          :refY="28"
        >
          <path 
            d="M0,0 L10,5 0,10 Z" 
            fill="#999"
            :transform="`rotate(0, 5, 5)`"
          ></path>
        </marker>
      </defs>
      <path 
        class="shape-path"
        vector-effect="non-scaling-stroke" 
        stroke-linecap="butt" 
        stroke-miterlimit="8"
        fill="transparent"
        stroke="#999"
        stroke-width="2" 
        :d="shape.path"
        :marker-end="shape.points ? `url(#preview-line)` : ''"
      ></path>
    </g>
  </svg>
</template>

<script>
export default {
  props:{
    shape:{//图像信息
      type:Object,
      default:()=>{
        return {
          type:'line',
          name:"直线",
          path:'M 0 0 L 200 200 z',
          viewBox:[200,200],
          /* points:'arrow' */
        }
      }
    }
  },
  computed:{
      BaseSize(){
          return this.shape.shapeType==='Circle'?32:36
      },
      BaseTrans(){
          return this.shape.shapeType==='Circle'?10:0
      }
  },
  data() {
    return {

    };
  },
  methods: {

  },
};
</script>

<style scoped lang="scss">

</style>
