Two.js 中绑定 data-* 属性

Environment:

  • node.js v18.16.1
  • yarn@3.6.4
  • two.js@0.8.14

在Two.js的SVG渲染器下, 有时需要为其中的元素设置自定义属性(即data-*属性). 按照设置属性和渲染的时机可以分为以下两种情况:

渲染前设置

在将元素渲染到画布之前, 文档中并不存在实际的DOM元素. 需要先将目标属性设置到实例的dataset字段中, 在render 方法中内部会将这些属性设置到实际的DOM元素上.

限制: 由于追加dataset属性的行为只在group的render方法中实现, 因此只有Two.Group的实例可以通过此方法设置自定义属性.

const target = document.getElementById('target')
const two = new Two().appendTo(target)
 
const circle = new Two.Circle(20, 20, 10)
circle.fill = '#FF8000'
const rect = new Two.Rectangle(40, 40, 20, 20)
rect.fill = 'rgba(0, 200, 255, 0.75)'
const group = new Two.Group([circle, rect])
 
// set
group.dataset = {
    aaa: 'aaa',  // => data-aaa="aaa"
    abc: 'abc',  // => data-abc="abc"
    aAA: 'aAA',  // => data-a-a-a="aAA"
    bbB: 'bbB',  // => data-bb-b="bbB"
}
two.add(group)
 
// render
two.update()

渲染后设置

在将元素渲染到画布之后, 实例上的_renderer.elem属性保存了对应的DOM元素. 可以直接对DOM元素进行设置:

由于渲染到画布之后实际上操作的是DOM元素, 因此任何元素的实例都可以通过此方法设置自定义属性.

const target = document.getElementById('target')
const two = new Two().appendTo(target)
 
const circle = new Two.Circle(20, 20, 10)
circle.fill = '#FF8000'
const rect = new Two.Rectangle(40, 40, 20, 20)
rect.fill = 'rgba(0, 200, 255, 0.75)'
const group = new Two.Group([circle, rect])
two.add(group)
 
// render
two.update()
 
// set
circle._renderer.elem.dataset['aaa'] = '111'
rect._renderer.elem.setAttribute('data-bbb', '222')
group._renderer.elem.dataset['ccc'] = '333'
group._renderer.elem.setAttribute('data-ddd', '444')

References