@om-design/vision NPM

下载(以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| 文字列表样式|