visual-plugin-element-shape v0.1.5

visual-plugin-element-shape

使 VisualElement 对象支持绘制图形

安装

pnpm add visual-core visual-plugin-element-shape

用法

import { Visual, VisualProperty } from 'visual-core'
import 'visual-plugin-element-text'

// 需要另外安装visual-renderer-pixijs
import { PixiRenderer } from 'visual-renderer-pixijs'

import {
  IPluginElementShapeOptions,
  PluginElementShapeProperty
} from 'visual-plugin-element-shape'

// 新建Visual对象，需要传入一个渲染器对象
const visual = new Visual(new PixiRenderer(document.body))

// 新建一个VisualElement对象
const element = visual.createElement()

// 激活插件
element.activePlugin('plugin:element-shape')

// 消活插件
// element.inactivePlugin('plugin:element-shape')

// 获取图形配置对象
const shapeOptions = element.get(
  PluginElementShapeProperty.SHAPE_OPTIONS
) as IPluginElementShapeOptions;

// 添加图形配置，画布就可以自动绘制这个配置的图形
// 可将`anyKey`换成任意合法的对象名
shapeOptions.anyKey = {
  enableFill: true,
  enableStroke: true,
  option: {
    type: "rectangle",
    x: 0,
    y: 20,
    width: 400,
    height: 100,
  },
  interactive: true,
  cursor: Cursor.zoomOut,
  style: {
    fillColor: Random.int(0, 0xffffff),
    strokeColor: Random.int(0, 0xffffff),
    strokeWidth: 3,
  },
  rotation: 10,
};

// 获取经过代理的配置对象
const shapeOption = shapeOptions.anyKey

// 只需修改这个配置对象的字段，画布即可自动更新
shapeOption.rotation = 100