cursor
设置元素光标，hover 到下面的图形上看看效果。
关键属性
cursor: ICursorType | ICursorType[]
hover 到元素上时，显示的光标样式，支持所有 CSS 的光标名称。
可设置图片对象作为光标，支持偏移距离。
ts
type ICursorType =
| IImageCursor
| ''
| 'auto'
| 'default'
| 'none'
| 'context-menu'
| 'help'
| 'pointer'
| 'progress'
| 'wait'
| 'cell'
| 'crosshair'
| 'text'
| 'vertical-text'
| 'alias'
| 'copy'
| 'move'
| 'no-drop'
| 'not-allowed'
| 'grab'
| 'grabbing'
| 'e-resize'
| 'n-resize'
| 'ne-resize'
| 'nw-resize'
| 's-resize'
| 'se-resize'
| 'sw-resize'
| 'w-resize'
| 'ew-resize'
| 'ns-resize'
| 'nesw-resize'
| 'nwse-resize'
| 'col-resize'
| 'row-resize'
| 'all-scroll'
| 'zoom -in'
| 'zoom-out'
interface IImageCursor {
url: string
x?: number
y?: number
}自定义光标
可以通过 Cursor.set() 替换系统光标名，或注册自定义光标名。
ts
import { Cursor } from 'leafer-ui'
Cursor.set('pointer', { url: 'https://leaferjs.com/image/cursor.svg' }) // 替换pointer光标
Cursor.set('pointer_custom', { url: 'https://leaferjs.com/image/cursor.svg' }) // 注册自定义光标名手动更新
Leafer 支持手动强制更新光标样式 updateCursor()。
停用光标
应用通过 config.cursor.stop 配置，可随时停用光标功能， 之后可完全自定义光标行为。
归属
UI
示例
设置光标
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
width: 100,
height: 100,
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90, 90, 90, 10, 90],
curve: true,
fill: 'rgb(50,205,121)',
cursor: 'no-drop'
})
leafer.add(polygon)自定义图片光标
支持 png、 svg 格式的图片, 偏移距离 x、y 为可选字段。
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
width: 100,
height: 100,
points: [0, 90, 20, 60, 40, 80, 60, 40, 75, 50, 90, 10, 100, 90, 100, 90, 0, 90],
curve: true,
fill: 'rgb(50,205,121)',
cursor: { url: 'https://leaferjs.com/image/cursor.svg', x: 2, y: 2 }
})
leafer.add(polygon)