<template>
  <JsvNinePatch
    :style="layout"
    :imageUrl="`jsvtexturestore://${sourceId}`"
    :imageWidth="sampleImageWidth"
    :centerWidth="2"
    :imageDspWidth="sampleImageWidth"
    :borderOutset="borderWidth"
  />
</template>
<script setup>
import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
import { onBeforeUnmount } from "vue";

const props = defineProps({
  color: {
    type: String,
  },
  layout: {
    type: Object
  },
  borderWidth: {
    type: Number,
    default: 3,
  },
  borderRadius: {
    type: Number,
    default: 0
  }
});

let canvasRef;
let circleRadius = props.borderRadius;
let sampleImageWidth = circleRadius * 2 + props.borderWidth + 2;
canvasRef = JsvTextureStoreApi.canvasTexture(
  sampleImageWidth,
  sampleImageWidth
); // 创建画布

let circleLineWidth = props.borderWidth;
let customPath = canvasRef.circlePath(
  Math.floor(sampleImageWidth / 2),
  Math.floor(sampleImageWidth / 2),
  circleRadius
); // 创建圆环绘制路径，圆形在画布的中心点位置
canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
customPath.stroke(circleLineWidth, props.color); // 以给定线宽绘制圆环
const sourceId = canvasRef.commit(); // texture和div的textureStore绑定

onBeforeUnmount(() => {
  JsvTextureStoreApi.deleteTexture(sourceId);
});
</script>
