visual-plugin-element-image v0.1.5

visual-plugin-element-Image

使 VisualElement 对象支持绘制图片

安装

pnpm add visual-core visual-plugin-element-image

用法

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

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

import {
  IPluginElementImageOptions,
  PluginElementImageProperty
} from 'visual-plugin-element-image'

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

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

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

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

// 获取图片配置对象
const imageOptions = element.get(
  PluginElementImageProperty.IMAGE_OPTIONS
) as IPluginElementImageOptions;

// 添加图片配置，画布就可以自动绘制这个配置的图片
// 可将`anyKey`换成任意合法的对象名
imageOptions.anyKey = {
 source: "/pixijs.png",
  cursor: Cursor.copy,
  interactive: true,
  rotation: 0,
  opacity: 0.5,
};

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

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