leaferjs / leafer-ui

一款好用的 Canvas 引擎,革新的开发体验,用于高效绘图 、UI 交互、图形编辑。A user-friendly Canvas engine with a revolutionary development experience, for efficient drawing, UI interactions, and graphic editing.
https://www.leaferjs.com
MIT License
2.59k stars 92 forks source link

有没有层级支持? #24

Closed humbass closed 1 year ago

humbass commented 1 year ago

类似 z-index 这样的方式,来定位图层的优先级,如果还有一个 碰撞 就更好了。

leaferjs commented 1 year ago

这些都支持,碰撞的方式也很丰富

zIndex: https://www.leaferjs.com/ui/guide/property/layer.html#zindex-number hittable: https://www.leaferjs.com/ui/guide/property/hit.html

humbass commented 1 year ago

碰撞,我理解是两个物体之间的事件,比如拖动一个容器,边界碰到另外一个容器,产生一个碰撞事件,所以没明白以下官网实例:

  /*    hittable: https://www.leaferjs.com/ui/guide/property/hit.html   */

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

  const rect = new Rect({
    width: 100,
    height: 100,
    fill: '#FEB02730',
    stroke: {
      type: "radial",
      stops: [{ offset: 0, color: '#FF4A2C' }, { offset: 1, color: '#FEB027' }]
    },
    strokeWidth: 10,
    draggable: true,
    hitFill: 'none'
  })

  leafer.add(rect)