<template>
  <div class="bgStyle">
    <!-- 半圆 -->
    <div
      class="logo-bg"
      :style="{
        left: 200,
      }"
    >
      <img
        :src="`jsvtexturestore://${sourceId}`"
        class="logo-size"
        :style="{
          left: 50,
          top: 50,
        }"
      />
    </div>
    <!-- 圆框点九-底色 -->
    <div
      class="logo-bg"
      :style="{
        left: 700,
        top: 0,
      }"
    >
      <div
        class="logo-size"
        :style="{
          borderRadius: 60,
          left: 50,
          backgroundColor: '#FF1213',
          top: 50,
        }"
      ></div>
    </div>
    <!-- 圆框点九-框 -->
    <JsvNinePatch
      :style="{
        left: 750,
        top: 50,
        width: 200,
        height: 200,
      }"
      :imageUrl="`jsvtexturestore://${sourceId2}`"
      :imageWidth="136"
      :centerWidth="1"
      :imageDspWidth="136"
      :borderOutset="8"
      :animTime="0"
    />
    <!-- 方框点九-底色 -->
    <div class="logo-bg" :style="{ left: 200, top: 360 }">
      <div
        class="logo-size"
        :style="{
          left: 50,
          backgroundColor: '#FF1213',
          top: 50,
        }"
      ></div>
    </div>
    <!-- 方框点九-框 -->
    <JsvNinePatch
      :style="{
        left: 250,
        top: 410,
        width: 200,
        height: 200,
      }"
      :imageUrl="`jsvtexturestore://${sourceId3}`"
      :imageWidth="136"
      :centerWidth="1"
      :imageDspWidth="136"
      :borderOutset="6"
      :animTime="0"
    />
    <!-- 渐变点九-底色 -->
    <div
      class="logo-bg"
      :style="{
        left: 700,
        top: 360,
      }"
    >
      <div
        class="logo-size"
        :style="{
          borderRadius: 60,
          left: 50,
          backgroundImage: `jsvtexturestore://${sourceId4}`,
          top: 50,
        }"
      ></div>
    </div>
    <!-- 渐变点九-框（同圆框点九框） -->
    <JsvNinePatch
      :style="{
        left: 750,
        top: 410,
        width: 200,
        height: 200,
      }"
      :imageUrl="`jsvtexturestore://${sourceId2}`"
      :imageWidth="136"
      :centerWidth="1"
      :imageDspWidth="136"
      :borderOutset="8"
      :animTime="0"
    />
    <!-- 文字说明 -->
    <div class="text" :style="{ top: 320, left: 200 }">{{ "半圆" }}</div>
    <div class="text" :style="{ top: 320, left: 700 }">
      {{ "圆角NinePatch" }}
    </div>
    <div class="text" :style="{ top: 680, left: 200 }">
      {{ "直角NinePatch" }}
    </div>
    <div class="text" :style="{ top: 680, left: 700 }">
      {{ "渐变圆角NinePatch" }}
    </div>
  </div>
</template>

<script setup>
import { shallowRef, onBeforeUnmount } from "vue";
import { JsvTextureStoreApi, JsvNinePatch } from "jsview";
let canvasRef;
let canvasRef2;
let canvasRef3;
let canvasRef4;
let sourceId = shallowRef("");
let sourceId2 = shallowRef("");
let sourceId3 = shallowRef("");
let sourceId4 = shallowRef("");
let bitmap = {
  width: 150,
  height: 150,
};
let bitmap2 = {
  width: 136,
  height: 136,
};
let bitmap3 = {
  width: 136,
  height: 136,
};
let bitmap4 = {
  width: 136,
  height: 136,
};
canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
canvasRef2 = JsvTextureStoreApi.canvasTexture(bitmap2.width, bitmap2.height);
canvasRef3 = JsvTextureStoreApi.canvasTexture(bitmap3.width, bitmap3.height);
canvasRef4 = JsvTextureStoreApi.canvasTexture(bitmap4.width, bitmap4.height);
//第一个图
let centerX = bitmap.width / 2;
let centerY = bitmap.height / 2;
let radius = 50;

let startAngle = 0; // 起始角度
let sweepAngle = 180; // 扫描角度
let customPath = canvasRef.customPath();
customPath.arcTo(
  centerX - radius,
  centerY - radius,
  centerX + radius,
  centerY + radius,
  startAngle,
  sweepAngle
);
// 闭合路径，绘制实心扇形
customPath.close();
customPath.fill("#FF0000");

sourceId.value = canvasRef.commit();

//第二个图
let radius2 = 60;
let customPath2 = canvasRef2.circlePath(68, 68, radius2);
customPath2.stroke(6, "#87CEEB");
sourceId2.value = canvasRef2.commit();
//第三个图
let customPath3 = canvasRef3.rectPath(3, 3, 133, 133);
customPath3.stroke(6, "#87CEEB");
sourceId3.value = canvasRef3.commit();
//第四个图(底色即使用渐变色接口描绘)
const multiColorSet = {
  color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
  position: [0, 0.3, 0.8, 1],
};
canvasRef4.drawLinearGradientRect(
  0,
  0,
  0,
  136,
  multiColorSet.color,
  multiColorSet.position
);
sourceId4.value = canvasRef4.commit();

onBeforeUnmount(() => {
  JsvTextureStoreApi.deleteTexture(sourceId.value);
  JsvTextureStoreApi.deleteTexture(sourceId2.value);
  JsvTextureStoreApi.deleteTexture(sourceId3.value);
  JsvTextureStoreApi.deleteTexture(sourceId4.value);
});
</script>

<style lang="css" scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
.logo-size {
  width: 200;
  height: 200;
}
.logo-bg {
  width: 300;
  height: 300;
  background-color: #007f00;
}
.text {
  width: 300;
  height: 30;
  font-size: 28;
  line-height: 30;
  color: #ffffff;
  text-align: center;
}
</style>
