<template>
    <div
      :style="{
        width: 1280,
        height: 720,
        backgroundColor: '#007788',
      }"
    >
      <!-- 带缺口的矩形 -->
      <DashPath
        :points="[
          { x: 200, y: 0 }, // 右上角
          { x: 200, y: 100 }, // 右边中点（缺口处）
          { x: 150, y: 100 }, // 缺口上边
          { x: 150, y: 150 }, // 缺口左边
          { x: 0, y: 150 }, // 左下角
          { x: 0, y: 0 }, // 左上角
        ]"
        :dash="[5, 5]"
        :phase="0"
        color="#FF0000"
        :lineWidth="2"
        :layout="{
          left: 50,
          top: 50,
          width: 250,
          height: 200,
        }"
      />

      <!-- 三角形 -->
      <DashPath
        :points="[
          { x: 100, y: 0 }, // 顶点
          { x: 200, y: 150 }, // 右下角
          { x: 0, y: 150 }, // 左下角
        ]"
        :dash="[15, 8]"
        :phase="2"
        color="#00FF00"
        :lineWidth="4"
        :layout="{
          left: 350,
          top: 50,
          width: 250,
          height: 200,
        }"
      />

      <!-- 凸字形 -->
      <DashPath
        :points="[
          { x: 0, y: 0 }, // 左上角
          { x: 200, y: 0 }, // 右上角
          { x: 200, y: 150 }, // 右下角
          { x: 150, y: 150 }, // 右凹进点
          { x: 150, y: 50 }, // 凹进上点
          { x: 50, y: 50 }, // 凹进左上点
          { x: 50, y: 150 }, // 凹进左下点
          { x: 0, y: 150 }, // 左下角
        ]"
        :dash="[20, 10]"
        :phase="5"
        color="#0088FF"
        :lineWidth="3"
        :layout="{
          left: 650,
          top: 50,
          width: 250,
          height: 200,
        }"
      />
    </div>
  </template>
  
  <script setup>
  import DashPath from "./DashPath.vue";
  </script>
  