<template>
  <div class="bgStyle">
    <div :style="{ top: 50, left: 80 }">
      <div
        :style="{
          top: (sampleImageWidth - innerRadius2) / 2,
          left: (sampleImageWidth - innerRadius2) / 2,
          width: innerRadius2,
          height: innerRadius2,
          fontSize: 10,
          textAlign: 'center',
          lineHeight: innerRadius2,
          backgroundColor: '#FF0000',
        }"
      >
        {{ `圆环内径方形${innerRadius2}x${innerRadius2}` }}
      </div>
      <div
        :style="{
          width: sampleImageWidth,
          height: sampleImageWidth,
          backgroundImage: `jsvtexturestore://${sourceId}`,
        }"
      />
      <div
        :style="{
          top: sampleImageWidth + 5,
          width: sampleImageWidth,
          height: 12,
          fontSize: 10,
          textAlign: 'center',
          lineHeight: 12,
        }"
      >
        {{ `NinePatch原图尺寸 ${sampleImageWidth}x${sampleImageWidth}` }}
      </div>
    </div>

    <div :style="{ top: 50, left: 80 + sampleImageWidth + 20 }">
      <div
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
          backgroundColor: 'rgb(255,0,0)',
        }"
      />
      <div
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
          backgroundColor: 'rgb(0,100,200)',
          borderRadius: vTargetRectRaidus,
        }"
      />
      <JsvFlexDiv
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
          alignItems: 'center',
        }"
      >
        <div
          :style="{
            width: vTargetRectWidth,
            textAlign: 'center',
            fontSize: 10,
            lineHeight: 12,
          }"
        >
          {{
            `需要外框对齐的带圆角矩形\n\nborderRadius = 圆环内径 / 2\n= ${innerRadius2} / 2`
          }}
        </div>
      </JsvFlexDiv>
    </div>

    <div
      :style="{
        top: 50,
        left: 80 + sampleImageWidth + 20 + vTargetRectWidth + 20,
      }"
    >
      <div
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
          backgroundColor: 'rgb(0,100,200)',
        }"
      />
      <div
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
          backgroundColor: 'rgb(0,0,255)',
          borderRadius: vTargetRectRaidus,
        }"
      />
      <JsvNinePatch
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
        }"
        :imageUrl="`jsvtexturestore://${sourceId}`"
        :imageWidth="vImageWidth"
        :centerWidth="vCenterWidth"
        :imageDspWidth="vImageDspWidth"
        :borderOutset="vBorderOutset"
      />
      <JsvFlexDiv
        :style="{
          width: vTargetRectWidth,
          height: vTargetRectHeight,
          alignItems: 'center',
        }"
      >
        <div
          :style="{
            width: vTargetRectWidth,
            textAlign: 'center',
            fontSize: 10,
            lineHeight: 12,
          }"
        >
          {{
            `带圆角矩形 和 NinePatch图形伸缩\n\nborderOutset = (原图高 - 圆环内径) / 2\n= (${sampleImageWidth} - ${innerRadius2}) / 2\n\ncenterWidth = 1`
          }}
        </div>
      </JsvFlexDiv>
    </div>
  </div>
</template>

<script setup>
import { shallowRef, onBeforeUnmount } from "vue";
import { JsvNinePatch, JsvTextureStoreApi, JsvFlexDiv } from "jsview";

// 调试参数输入设定
const innerRadius2 = 110; // 最右边图片的内直径(也是右边图矩形的边长值)
const circleLineWidth = 10; // 最右边图的边缘粗细
const sampleImageWidth = 148; // 最右边图形的画布尺寸，画布为正方形

const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
const vTargetRectHeight = 300; // 需要对齐区域的矩形高
const vTargetRectRaidus = innerRadius2 / 2; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐

// 计算后的对应NinePatch参数
let vBorderOutset = (sampleImageWidth - innerRadius2) / 2; // 设置值为图片长度减去内直径除以2
let vImageWidth = sampleImageWidth; // 原图尺寸设置
let vImageDspWidth = sampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
let vCenterWidth = 1; // 圆形的.9图, 中心固定为1

// 设置设定模拟绘制.9图
let canvasRef;
let sourceId = shallowRef("");
canvasRef = JsvTextureStoreApi.canvasTexture(
  sampleImageWidth,
  sampleImageWidth
); // 创建画布

let circleRadius =
  Math.floor(innerRadius2 / 2) + Math.floor(circleLineWidth / 2); // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
let customPath = canvasRef.circlePath(
  Math.floor(sampleImageWidth / 2),
  Math.floor(sampleImageWidth / 2),
  circleRadius
); // 创建圆环绘制路径，圆形在画布的中心点位置
canvasRef.drawColor("rgba(200,200,200,0.5)"); // 画布绘制半透明底色
customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
sourceId.value = canvasRef.commit(); // texture和div的textureStore绑定

onBeforeUnmount(() => {
  JsvTextureStoreApi.deleteTexture(sourceId.value); // 释放texture资源
});
</script>

<style lang="css" scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #819864;
}
</style>
