English | 简体中文
leafer-x-tooltip-canvas 是 Leafer-ui 的第三方 tooltip 插件，用于向用户展示信息。
npm i leafer-x-tooltip-canvas --save使用插件时，创建一个插件实例，并传入 App 或者 Leafer 实例。（推荐使用App）
如果传入的是 App,会在sky层中绘制弹窗，如果传入的是 Leafer，会在传入的Leafer层中绘制弹窗。
请注意：如果传入
App时尚未创建sky层，会自动创建sky层
import { TooltipPlugin } from 'leafer-x-tooltip-canvas'
const app = new App({ view: window })
const plugin = new TooltipPlugin(app)配置项可在创建 tooltipPlugin 实例时作为第二个参数传入
new TooltipPlugin(app, {
info: ['width', 'height', 'innerId'],
includesType: ['Rect'],
excludesType: [],
...
})具体配置项如下，点击字段名可转跳至详细配置
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| info | Array<string> | ['tag'] | 显示的属性字段 |
| showType | 'value'|'key-value' | 'value' | tooltip信息显示的方式 |
| formatter | () => string | () => undefined | 格式化tooltip显示内容的函数 |
| showDelay | number | 500 | 延迟显示的时间 |
| hideDelay | number | 0 | 延迟隐藏的时间 |
| includesType | Array<string> | [ ] | 需要显示 tooltip 的元素，传入元素的 tag |
| excludesType | Array<string> | [ ] | 不需要显示 tooltip 的元素，传入元素的 tag |
| throughExcludes | boolean | false | 是否穿过excludesType拾取下面的元素 |
| ignoreType | Array<string> | ['App','Leafer','Flow'] | 被忽略的元素，传入元素的 tag，一般不需要修改，与excludesType的区别在于不会被throughExcludes影响。 |
| offset | Array<number> | [5, 5] | tooltip 相对于鼠标位置的偏移量 |
| theme | string | 'light' | 主题，可选值：'light'、'dark' |
| style | IStyle | 见下表 | tooltip 的样式配置 |
IStyle 属性
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| backgroundColor | string | "white" | tooltip 的背景颜色 |
| stroke | string | "black" | tooltip 框线颜色 |
| color | string | "black" | tooltip 文本颜色 |
| borderRadius | number | 8 | tooltip 框线圆角 |
| padding | number | 8 | tooltip 内边距 |
| fontSize | number | 14 | tooltip 文本大小 |
| fontWeight | number | 400 | tooltip 文本粗细 |
| fontFamily | string | "Punctuation SC" | tooltip 文本字体,同 css 多个字体用逗号隔开 |
- 显示/隐藏
- 基本显示隐藏
- 延迟显示隐藏
- 样式
- 三角箭头
- 黑白主题
- 自定义样式
- 位置
- offset
- 相对鼠标位置
- 相对元素位置
- 显示避让逻辑
- 信息
- 自定义信息
- formatter
- 交互
- 包括/忽略类型功能
- 触发方式
- 虚拟触发
内容 ⬆️
通过传入info字段，可配置显示的属性字段。
| info : ['tag','width','height'] |
|
可配置显示信息的方式，有两种：value、key-value。
| showType : 'value' |
|
| showType : 'key-value' |
|
可配置显示信息的格式化函数，参数为被作用的元素属性集合。返回的值作为 tooltip 的文本。
formatter: (item) => {
return `${item.tag}(${item.innerId})`
}
可配置显示的延迟时间和隐藏的延迟时间。
| showDelay : 500 |
|
| hideDelay : 500 |
|
通过配置includesType和excludesType字段，可设置需要展示/隐藏 tooltip 的元素类型。
- 当只配置
includesType时，只显示includesType中配置的元素。 - 当只配置
excludesType时，只不显示excludesType中配置的元素。 - 可同时配置
includesType和excludesType。 includesType优先级大于excludesType。
| includesType : ['Rect'] |
|
插件默认提供两种主题，分别为light和dark，可以通过配置theme字段来切换主题。默认主题为light
| theme : 'light' |
|
| theme : 'dark' |
|
可配置 tooltip 相对于鼠标位置的偏移量,第一个参数为 x 轴偏移量，第二个参数为 y 轴偏移量。
| offset : [10,20] |
|
用户通过配置style字段来自定义样式。
style: {
backgroundColor: '#32cd79',
stroke: '#32cd79',
color: 'white',
borderRadius: 16,
padding: 8,
fontSize: 16,
fontWeight: 400,
}
