cursor

设置元素光标，hover 到下面的图形上看看效果。

关键属性

cursor: ICursorType | ICursorType[]

hover 到元素上时，显示的光标样式，支持所有 CSS 的光标名称。

可设置图片对象作为光标，支持偏移距离。

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() 替换系统光标名，或注册自定义光标名。

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()。

停用光标

应用通过 app.config.cursor 配置，可随时停用光标功能， 之后可完全自定义光标行为。

归属

UI

示例

设置光标

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 为可选字段。

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)