用fabricjs画布记录信息

本想这看看forward_list的内部实现机制，但是发现需要用一个什么东西记录一下类名什么的。

第一个想到的是uml，但github搜索了一下没有js可用的。退一步搜索canvas绘图，找到了fabricjs。

安装

一定要安装@types/fabric，否则ts会提示错误。

    "@types/fabric": "^4.5.15",
    "fabric": "^5.3.0",

vue部分

一定要使用toRaw得到原始的canvas，否则部分鼠标事件会无响应。

<script setup lang="ts">
import {defineProps,ref,Ref,watch, toRaw, onMounted ,reactive} from 'vue'
// import axios from 'axios'
import { fabric }  from 'fabric'

const props =defineProps<{ msg: [fabric.Object] }>()

watch(
  () => props.msg,
  (newVal, oldVal) => {
    console.log('监听基本类型数据testStr')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)
const domCanvas: Ref<HTMLCanvasElement | null> = ref(null);
const canvas = ref<fabric.Canvas>();
//const circle = ref<fabric.Circle>();

onMounted(() => {
    init();
    draw();
});

function init() {
   canvas.value = new fabric.Canvas(domCanvas.value, {
      width: 500,
      height: 500,
      backgroundColor: "#a3fd00",
   });
   console.log(props.msg)
   console.log('init')
 }

function draw() {
    for(var i in props.msg){
        let obj = props.msg[i]
        obj.on('selected',(ievent)=>{
            // let event = ievent.e
            let target = ievent.target
            console.log('selected')
            console.log(target)
        })
        obj.on('deselected',(ievent)=>{
            // let event = ievent.e
            let target = ievent.target
            console.log(target)
        })
        toRaw(canvas.value)?.add(obj);
        canvas.value?.setActiveObject(obj);
   }
    // let aGroup = new fabric.ActiveSelection(props.msg, {canvas: toRaw(canvas.value)});
    //canvas.value?.setActiveObject(aGroup);

}

</script>

<template>
    <canvas ref="domCanvas"></canvas>
</template>

<style scoped>
</style>