xiazeyu / live2d-widget.js

Live2D on webpages with out-of-the-box experience.
https://l2dwidget.js.org/
GNU Affero General Public License v3.0
1.55k stars 263 forks source link

创建DOM后添加钩子方法 #47

Closed sockball closed 5 years ago

sockball commented 5 years ago

你的新功能与某一个问题有关吗?

现在功能比较单一,于是自己简单加上了拖拽、放大缩小、右键菜单(感觉以后都会有 但是现在只能在init之后使用轮训来查找dom,找到后再绑定相应的事件...😷

你的方案是

配置中添加钩子,如config.hook.afterCreateelementMgr.js53行 document.body.appendChild(newElem)后 添加config.hook.afterCreate()

额外的信息

根据情况应该考虑开放更多的钩子方法吧

journey-ad commented 5 years ago

动态添加的元素的事件监听可以用事件委托来处理

sockball commented 5 years ago

动态添加的元素的事件监听可以用事件委托来处理

但是这里外层divcanvas是同时创建在body后的...

...
let newElem = document.createElement('div')
let newCanvasElem = document.createElement('canvas')

...
newElem.appendChild(newCanvasElem)

...
document.body.appendChild(newElem)
EYHN commented 5 years ago

嗯 这个问题确实存在 但我不建议复杂配置,配置应该是可序列化的,函数无法序列化。 我们可以修改 L2Dwidget 使用 EventEmitter 管理事件

class L2Dwidget extends EventEmitter {
  ....
}

let L2D = new L2Dwidget();

L2D.on("load", function(){
  ....
});

可以达到同样的效果

xiazeyu commented 5 years ago

新版本其实是会直接返回Element的..

xiazeyu commented 5 years ago

https://github.com/xiazeyu/live2d-widget.js/blob/dev/src/index_.js#L39