visual-plugin-element-text v0.1.5

visual-plugin-element-text

使 VisualElement 对象支持绘制文本

安装

pnpm add visual-core visual-plugin-element-text

用法

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

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

import {
  IPluginElementTextOptions,
  PluginElementTextProperty
} from 'visual-plugin-element-text'

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

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

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

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

// 获取文本配置对象
const textOptions = element.get(
  PluginElementTextProperty.TEXT_OPTIONS
) as IPluginElementTextOptions;

// 添加文本配置，画布就可以自动绘制这个配置的文本
// 可将`anyKey`换成任意合法的对象名
textOptions.anyKey = {
  text: "dsadadji的就是卡拉动物七点",
  fontStyle: {
    maxRows: 2,
    maxWidth: 100,
    wordWrap: true,
    align: "right",
  },
  interactive: true,
  cursor: Cursor.allScroll,
  rotation: 0,
  translation: vec2(300, 300),
  scale: vec2(2, 1.5),
  style: {
    fillColor: Random.int(0, 0xffffff),
  },
};

// 获取经过代理的文本配置对象
const textOption = textOptions.anyKey

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