leafer-x-tooltip-canvas

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: [],
  ...
})

具体配置项如下，点击字段名可转跳至详细配置

IStyle 属性

todo

• 显示/隐藏
  • [x] 基本显示隐藏
  • [x] 延迟显示隐藏
• 样式
  • [ ] 三角箭头
  • [x] 黑白主题
  • [x] 自定义样式
• 位置
  • [x] offset
  • [x] 相对鼠标位置
  • [ ] 相对元素位置
  • [ ] 显示避让逻辑
• 信息
  • [x] 自定义信息
  • [x] formatter
• 交互
  • [x] 包括/忽略类型功能
  • [ ] 触发方式
  • [ ] 虚拟触发

详细配置

:dizzy:配置项

内容 :arrow_up:

显示信息

通过传入info字段，可配置显示的属性字段。

显示类型

可配置显示信息的方式，有两种：value、key-value。

格式化

可配置显示信息的格式化函数，参数为被作用的元素属性集合。返回的值作为 tooltip 的文本。

formatter: (item) => {
  return `${item.tag}(${item.innerId})`
}

显示隐藏

延迟显示隐藏

可配置显示的延迟时间和隐藏的延迟时间。

交互

包括/忽略类型

通过配置includesType和excludesType字段，可设置需要展示/隐藏 tooltip 的元素类型。

• 当只配置includesType时，只显示includesType中配置的元素。
• 当只配置excludesType时，只不显示excludesType中配置的元素。
• 可同时配置includesType和excludesType。
• includesType优先级大于excludesType。

样式

黑白主题

插件默认提供两种主题，分别为light和dark，可以通过配置theme字段来切换主题。默认主题为light

位置

offset

可配置 tooltip 相对于鼠标位置的偏移量,第一个参数为 x 轴偏移量，第二个参数为 y 轴偏移量。

自定义样式

用户通过配置style字段来自定义样式。

style: {
    backgroundColor: '#32cd79',
    stroke: '#32cd79',
    color: 'white',
    borderRadius: 16,
    padding: 8,
    fontSize: 16,
    fontWeight: 400,
}

Github