vue项目中使用spritejs绘图步骤

Spritejs简介

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库，可以基于 canvas 快速绘制结构化 UI 、动画和交互效果，并发布到任何拥有 canvas 环境的平台上（比如浏览器、小程序和 node ）。

使用

1. 安装

npm install spritejs

2. 引入

import * as spritejs from 'spritejs';
const { Scene, Sprite } = spritejs;

3. 使用

<div id="adaptive"></div>

#adaptive {
  width: 600px;
  height: 600px;
  position: relative;
}

const container = document.getElementById("adaptive");
      const scene = new Scene({
        container,
        width: 600,
        height: 360,
      });
      const layer = scene.layer();

      const box = new Sprite({
        anchor: [0.5, 0.5],
        size: [150, 150],
        pos: [300, 180],
        bgcolor: "white",
        borderWidth: 1,
        borderRadius: 20,
      });
      layer.append(box);

4. 完整代码

<template>
  <div id="app">
    <div>spriteJs-demo</div>
    <div id="adaptive"></div>
  </div>
</template>
<script>
import * as spritejs from 'spritejs';
const { Scene, Sprite } = spritejs;
export default {
  data() {
    return {
      viewport: [600, 600],
    };
  },
  mounted() {
    const container = document.getElementById("adaptive");
      const scene = new Scene({
        container,
        width: 600,
        height: 360,
      });
      const layer = scene.layer();

      const box = new Sprite({
        anchor: [0.5, 0.5],
        size: [150, 150],
        pos: [300, 180],
        bgcolor: "white",
        borderWidth: 1,
        borderRadius: 20,
      });
      layer.append(box);
  },
};
</script>
<style lang="less">
#adaptive {
  width: 600px;
  height: 600px;
  position: relative;
}
</style>