下载(以pnpm 为例)

pnpm add @starryn/vision

使用案例

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Vision } from '@starryn/vision'

const divRef = ref<HTMLDivElement>();
const painter = new Vision({
  borderColor: 'yellow'
});

onMounted(() => {
  painter.mount(divRef.value!);
  painter.batchDraw([
    {
      x: 20,
      y: 20,
      width: 100,
      height: 100
    }
  ])
});
</script>

<template>
  <div ref="divRef"></div>
</template>

参数配置

new Vision(opt)

• 参数opt ：基础配置项

|配置字段 |说明 | 类型| |--|--|--| |borderColor | 边框颜色|string| |borderWidth| 边框宽度|number| |backgroundColor|背景颜色| string| |fontColor| label字体颜色|string| |fontSize| label字体大小|number |fontBgColor| label的背景颜色|string| |contentDescribeStyle| 文字列表样式（以对象展示）|

• contentDescribeStyle 配置对象

| 配置字段 | 说明 | 类型| |--|--|--| | fontColor | 文字颜色|string | fontSize| 文字大小|number | backgroundColor| 文字的背景颜色|string | width| 文字宽度（默认为160px）|number

mount(root: HTMLDivElement)方法

组件挂载到 dom 中,调用绘图方法前，需要挂载组件。

|配置字段 |说明 | 类型| |:--|:--|:--| | root | 组件挂载到dom中的位置 | HTMLDivElement |

batchDraw()方法

调用画框方法，传递一个数组参数 [obj,obj] obj 的配置 |配置字段 |说明 | 类型|是否必须(y/n)| |:--|:--|:--:|:--:| |x|x轴点位（以canvas的左上角为原点）| number | y | |y|y轴点位（以canvas的左上角为原点）| number | y | |width| 画框的宽度|number | y | |height| 画框的高度|number| y | |borderWidth| 画框的边框宽度|number| n | |borderColor| 画框的边框颜色|string | n | |backgroundColor| 画框的背景颜色|string | n | |label| label文字描述|string | n | |fontColor| label字体颜色|string | n | |fontSize| label字体大小|number | n | |fontBgColor| label的背景颜色|string | n | |contentDescribe| 文字列表展示（以数组对象展示）||| |contentDescribeStyle| 文字列表样式|

• contentDescribe contentDescribe:[obj,obj] obj配置

| 配置字段 | 说明 |类型| |--|--|--| |label |文字描述 |string