原文链接: twojs 加载图片

一个做2维的webgl库, 支持svg和gl, 如果只是简单的二维形状效果, 这个库用起来还蛮好用的

https://two.js.org/

指定大小和可以加mask, 这么看来是可以直接用这个东西实现无滤镜的拼接了, 只不过已经决定使用gl重写, 那就全用gl吧

<template>
  <div class="flex-row">
    <div>
      twojs
    </div>
    <div id="draw-shapes"></div>
  </div>
</template>

<script setup>
import Two from "two.js";
import { onMounted } from "vue";
onMounted(() => {
  const elem = document.getElementById("draw-shapes");
  const params = {
    width: 600,
    height: 600,
    autostart: true,
    type: Two.Types.webgl,
  };
  const two = new Two(params).appendTo(elem);
  const star = two.makeStar(two.width / 2, two.height / 2, 50, 100, 5);
  //   const texture = new Two.Texture("https://i.imgur.com/DRmh6S9.jpg");
  const texture = new Two.Texture("/test.png");
  // Textures fill as patterns on any Two.Path
  star.fill = texture;
  texture.scale = 0.125;

  // A Two.Sprite is a packaged rectangle and texture for convenience.
  const sprite = two.makeSprite(
    "https://i.imgur.com/HzeRNWn.jpg",
    two.width * 0.5,
    two.height * 0.2
  );
  sprite.scale = 0.05;

  // It automatically inherits the dimensions of the texture.

  const columns = 10;
  const rows = 1;
  const frameRate = 15;

  // It also has an API to define a sprite sheet
  const sheet = two.makeSprite(
    "https://storage.googleapis.com/archive.jono.fyi/projects/two-js/junk/images/ken-sprite.png",
    two.width * 0.5,
    two.height * 0.75,
    columns,
    rows,
    frameRate
  );

  // Which does the math to single out the dimensions of a cell and can then animate
  sheet.play();

  const mouse = new Two.Vector();

  window.addEventListener("mousemove", function(e) {
    mouse.set(e.clientX, e.clientY);
  });

  two.bind("update", function() {
    // Sprites are Rectangles underneath so they have the same properties as Two.Path's
    // sprite.rotation = Two.Utils.angleBetween(mouse, sprite.translation);
    sheet.translation.x = mouse.x || two.width * 0.5;
  });

  document.body.addEventListener("click", () => {
    const canvas = document.querySelector("canvas");
    const url = canvas.toDataURL();
    const img = new Image();
    img.src = url;
    document.body.appendChild(img);
  });
});
</script>

<style></style>