更新记录

1.1.0（2024-09-15） 下载此版本

兼容vue2

1.0.0（2024-07-20） 下载此版本

目前只支持文本，图片，矩形的绘制

平台兼容性

参数说明

model 参数说明

model.data 参数说明

使用方法

方法一 （示例vue2）

<template>
  <view class="content">
    <FCanvas
      ref="CanvasImgref"
      @changeImage="changeImage"
      :model="canvasMode"
    />
    <img :src="img" alt="" />
  </view>
</template>

<script>
  // 用vue3的话就改成canvas-vue3.vue
  import FCanvas from "@/components/fei-canvas/canvas-vue2.vue";
  export default {
    components: { FCanvas },
    data() {
      return {
        canvasMode: {
          width: 500, // canvas的宽
          height: 500, // canvas的高
          data: [], // canvas的内容
        },
        img: "",
      };
    },
    onShow() {
      // < !--设置canvas的内容 -->
      this.getA();
    },
    methods: {
      changeImage(e) {
        console.log(e); // e:绘制完成的图片地址
        this.img = e;
      },
      getA() {
        this.canvasMode = {
          width: 100,
          height: 200,
          data: [
            //   {
            //   type: 'image', // 绘制图片类型
            //   x: 0,
            //   y: 0,
            //   width: 616,
            //   height: 914,
            //   url: 'url地址' // 背景图
            // },
            {
              type: "text", // 绘制文本类型
              text: "标题名标题名标题名",
              x: 0, // 如果对其方式是center，那么就是再308的位置开始居中展示
              y: 0,
              textAlign: "left", // 对其方式
              fontsize: 50, // 字体大小
              color: "#000",
            },
            {
              type: "fillRect", // 矩形
              background: "#000", // 矩形的颜色
              x: 0,
              y: 0,
              width: 2,
              height: 100,
            },
          ],
        };
        setTimeout(() => {
          // < !--延迟执行 -->
          this.$refs.CanvasImgref.getCanvas();
        }, 20);
      },
    },
  };
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>

方法二 （示例vue3）

<template>
  <view class="content">
    <FCanvas @changeImage="changeImage" :model="canvasMode">
      <button>按钮，可以写任意样式，点击此处会直接绘制canvas</button>
    </FCanvas>
    <img :src="img" alt="" />
  </view>
</template>

<script lang="ts">
  // 用vue2的话就改成canvas-vue2.vue
   import { ref, defineComponent } from "vue";
  import FCanvas from "@/components/fei-canvas/canvas-vue3.vue";
  export default defineComponent({
    components: { FCanvas },
    setup() {
      return {
        canvasMode: {
          width: 500, // canvas的宽
          height: 500, // canvas的高
          data: [], // canvas的内容
        },
        img: "",
      };
    },
    onShow() {
      // < !--设置canvas的内容 -->
      this.getA();
    },
    methods: {
      changeImage(e) {
        console.log(e); // e:绘制完成的图片地址
        this.img = e;
      },
      getA() {
        this.canvasMode = {
          width: 100,
          height: 200,
          data: [
            //   {
            //   type: 'image', // 绘制图片类型
            //   x: 0,
            //   y: 0,
            //   width: 616,
            //   height: 914,
            //   url: 'url地址' // 背景图
            // },
            {
              type: "text", // 绘制文本类型
              text: "标题名标题名标题名",
              x: 0, // 如果对其方式是center，那么就是再308的位置开始居中展示
              y: 0,
              textAlign: "left", // 对其方式
              fontsize: 50, // 字体大小
              color: "#000",
            },
            {
              type: "fillRect", // 矩形
              background: "#000", // 矩形的颜色
              x: 0,
              y: 0,
              width: 2,
              height: 100,
            },
          ],
        };
      },
    },
  });
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>