HTMLText 元素

HTML 富文本，用于渲染 HTML 相关内容。

继承

HTMLText  >  Image  >  Rect  >  UI

适用平台

暂时只支持 web 版。

安装插件

需要安装 html 插件才能使用，点此访问 Github 仓库。

npm

npm install @leafer-in/html

pnpm

pnpm add @leafer-in/html

yarn

yarn add @leafer-in/html

bun

bun add @leafer-in/html

或通过 script 标签引入，使用全局变量 LeaferIN.html 访问插件内部功能。

html.min

<script src="https://unpkg.com/@leafer-in/html@1.5.3/dist/html.min.js"></script>
<script>
  const { HTMLText } = LeaferIN.html
</script>

html

<script src="https://unpkg.com/@leafer-in/html@1.5.3/dist/html.js"></script>
<script>
  const { HTMLText } = LeaferIN.html
</script>

关键属性

text：string

富文本内容。

后续会增加 fontSize 等文本基础属性，可以先通过富文本内嵌入样式进行设置。

原理

通过 SVG 嵌入 HTML 代码进行渲染。

LeaferJS 内部对 SVG 渲染做了很多优化，不会有太大的性能影响。

继承元素

Image

示例

渲染富文本

// #HTML 文本
import { Leafer } from 'leafer-ui'
import { HTMLText } from '@leafer-in/html' // 导入 html 插件  //

const leafer = new Leafer({ view: window })

const text = new HTMLText({
    text: '<i style="color: red; font-weight: bold;">Welcome</i> to <i style="color: #32cd79; font-size: 30px">LeaferJS</i>',
})

leafer.add(text)