<template>
  <div class="bgStyle">
  <div class="text">
    {{ '第一排为竖线和横线测试\n第二排为纵向拐点测试\n第三排为横向拐点测试\n第四排分别为：不要圆弧、纵向起始拐点失败、横向结束拐点失败' }}
  </div>
  <!-- 竖线 -->
  <JsvConnectLine
      :isVertical="true"
      :startPos="startPos5"
      :endPos="endPos5"
      :lineWidth="10"
      :backgroundColor="'#0000FF'"
      :radius="60"
      :percent="40"
      :RoundSet="{start:true, end:true}"
    ></JsvConnectLine>
    <!-- 横线 -->
    <JsvConnectLine
      :isVertical="true"
      :startPos="startPos6"
      :endPos="endPos6"
      :lineWidth="10"
      :backgroundColor="'#0000FF'"
      :radius="60"
      :percent="40"
      :RoundSet="{start:true, end:true}"
    ></JsvConnectLine>
    <!-- 纵向拐点 -->
    <!-- 起始拐点 -->
    <JsvConnectLine
      :isVertical="true"
      :startPos="startPos"
      :endPos="endPos"
      :lineWidth="6"
      :backgroundColor="'#FF1213'"
      :radius="20"
      :percent="40"
      :RoundSet="{start:true, end:false}"
    ></JsvConnectLine>
    <!-- 全拐 -->
    <JsvConnectLine
      :isVertical="true"
      :startPos="startPos3"
      :endPos="endPos3"
      :lineWidth="6"
      :backgroundColor="'#FF1213'"
      :radius="20"
      :percent="30"
      :RoundSet="{start:true, end:true}"
    ></JsvConnectLine>
    <!-- 结束拐点 -->
    <JsvConnectLine
      :isVertical="true"
      :startPos="startPos7"
      :endPos="endPos7"
      :lineWidth="6"
      :backgroundColor="'#FF1213'"
      :radius="10"
      :percent="50"
      :RoundSet="{start:false, end:true}"
    ></JsvConnectLine>
    <!-- 横向拐点 -->
    <!-- 起始拐点 -->
    <JsvConnectLine
      :isVertical="false"
      :startPos="startPos2"
      :endPos="endPos2"
      :lineWidth="6"
      :backgroundColor="'#7CFC00'"
      :radius="40"
      :percent="60"
      :RoundSet="{start:true, end:false}"
    ></JsvConnectLine>
    <!-- 全拐 -->
    <JsvConnectLine
      :isVertical="false"
      :startPos="startPos4"
      :endPos="endPos4"
      :lineWidth="6"
      :backgroundColor="'#7CFC00'"
      :radius="40"
      :percent="40"
      :RoundSet="{start:true, end:true}"
    ></JsvConnectLine>
    <!-- 结束拐点 -->
    <JsvConnectLine
      :isVertical="false"
      :startPos="startPos8"
      :endPos="endPos8"
      :lineWidth="6"
      :backgroundColor="'#7CFC00'"
      :radius="40"
      :percent="40"
      :RoundSet="{start:false, end:true}"
    ></JsvConnectLine>
    <!-- 不要圆弧 -->
    <JsvConnectLine
      :isVertical="false"
      :startPos="startPos9"
      :endPos="endPos9"
      :lineWidth="10"
      :backgroundColor="'#FFC0CB'"
      :radius="50"
      :percent="50"
      :RoundSet="{start:false, end:false}"
    ></JsvConnectLine>
    <!-- 纵向起始拐点失败 -->
     <JsvConnectLine
      :isVertical="true"
      :startPos="startPos10"
      :endPos="endPos10"
      :lineWidth="10"
      :backgroundColor="'#FFC0CB'"
      :radius="50"
      :percent="30"
      :RoundSet="{start:true, end:true}"
    ></JsvConnectLine>
    <!-- 横向结束拐点失败 -->
    <JsvConnectLine
      :isVertical="false"
      :startPos="startPos11"
      :endPos="endPos11"
      :lineWidth="10"
      :backgroundColor="'#FFC0CB'"
      :radius="40"
      :percent="80"
      :RoundSet="{start:true, end:true}"
    ></JsvConnectLine>
  </div>
</template>

<script setup>
import { JsvConnectLine } from "jsview";
let startPos = { x: 200, y: 350 };
let endPos = { x: 400, y: 250 };
let startPos2 = { x: 200, y: 400 };
let endPos2 = { x: 400, y: 500 };
let startPos3 = { x: 500, y: 250 };
let endPos3 = { x: 700, y: 350 };
let startPos4 = { x: 500, y: 400 };
let endPos4 = { x: 700, y: 500 };
let startPos5 = { x: 400, y:100}
let endPos5 = { x: 400, y:200}
let startPos6 = { x:800,y:150}
let endPos6 = { x:1000,y:150}
let startPos7 = { x:800,y:250}
let endPos7 = { x:1000,y:350}
let startPos8 ={x:800,y:500}
let endPos8 = { x:1000,y:400}
let startPos9 = { x:200,y: 550}
let endPos9 = { x:400,y:650}
let startPos10 = { x:500,y:650}
let endPos10 = { x:700,y:550}
let startPos11 = { x:800,y:550}
let endPos11 = { x:1000,y:650}
</script>

<style lang="scss" scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.text{
  width:300;
  height:120;
  color:#FFFFFF;
  font-size: 20;
  left:30;
  top:30;
  line-height: 24;
}
</style>
