<script setup>
/**
 * 建议:
 * 双色的渐变可以使用小尺寸的texture(4*4)以节省内存
 * 多色的使用小尺寸的话可能会出现条纹, 使用div同尺寸的话内存消耗较大, 需要权衡
 */
import { JsvTextureStoreApi } from "jsview";
import { ref } from "vue";

const divSize = 300;
const smallTextureSize = 4;

const createTexture = (from, to, size, colorList, positionList) => {
  const canvasTexture = JsvTextureStoreApi.canvasTexture(size, size);
  canvasTexture.drawLinearGradientRect(
    from[0],
    from[1],
    to[0],
    to[1],
    colorList,
    positionList
  );
  return canvasTexture.commit();
};
const twoColorSet = {
  color: ["#00ff00", "#0000ff"],
  position: [0, 1],
};
const multiColorSet = {
  color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
  position: [0, 0.3, 0.8, 1],
};

const diagonalTwoColor = createTexture(
  [0, 0],
  [smallTextureSize, smallTextureSize],
  smallTextureSize,
  twoColorSet.color,
  twoColorSet.position
);
const diagonalMultiColor = createTexture(
  [0, 0],
  [divSize, divSize],
  divSize,
  multiColorSet.color,
  multiColorSet.position
);
const verticalTwoColor = createTexture(
  [0, 0],
  [0, smallTextureSize],
  smallTextureSize,
  twoColorSet.color,
  twoColorSet.position
);
const verticalMultiColor = createTexture(
  [0, 0],
  [0, divSize],
  divSize,
  multiColorSet.color,
  multiColorSet.position
);

const slashTwoColor = createTexture(
  [0, Math.round(smallTextureSize / 3)],
  [smallTextureSize, Math.round(smallTextureSize * 0.8)],
  smallTextureSize,
  twoColorSet.color,
  twoColorSet.position
);

const slashMultiColor = createTexture(
  [0, Math.round(divSize / 3)],
  [divSize, Math.round(divSize * 0.8)],
  divSize,
  multiColorSet.color,
  multiColorSet.position
);
</script>
<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }"></div>
  <div :style="{ left: 20, top: 20 }">
    <div
      :style="{
        width: divSize,
        height: divSize,
        backgroundImage: `jsvtexturestore://${diagonalTwoColor}`,
      }"
    ></div>
  </div>
  <div :style="{ left: 20, top: 20 + 320 }">
    <div
      :style="{
        width: divSize,
        height: divSize,
        backgroundImage: `jsvtexturestore://${diagonalMultiColor}`,
      }"
    ></div>
  </div>
  <div :style="{ left: 20 + 320, top: 20 }">
    <div
      :style="{
        width: divSize,
        height: divSize,
        backgroundImage: `jsvtexturestore://${verticalTwoColor}`,
      }"
    ></div>
  </div>
  <div :style="{ left: 20 + 320, top: 20 + 320 }">
    <div
      :style="{
        width: divSize,
        height: divSize,
        backgroundImage: `jsvtexturestore://${verticalMultiColor}`,
      }"
    ></div>
  </div>
  <div :style="{ left: 20 + 640, top: 20 }">
    <div
      :style="{
        width: divSize,
        height: divSize,
        backgroundImage: `jsvtexturestore://${slashTwoColor}`,
      }"
    ></div>
  </div>
  <div :style="{ left: 20 + 640, top: 20 + 320 }">
    <div
      :style="{
        width: divSize,
        height: divSize,
        backgroundImage: `jsvtexturestore://${slashMultiColor}`,
      }"
    ></div>
  </div>
</template>
