@om-design/vision

下载(以pnpm 为例)

pnpm add @om-design/vision

使用案例

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Vision } from '@om-design/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