你真的了解Canvas吗--解密六【ZRender篇】

目录

📚入口 

Circle - 图形 

Group - 组

事件捕获 - 流程

step - 1

step - 2

总结

---

这篇文章我们讲讲Circle圆形，Group组的使用以及大家最熟悉又陌生的事件捕获和冒泡在ZRender中的实现，篇幅较长，且听我慢慢分析。

📚入口 

var zr = zrender.init(document.getElementById("main"));
var circle = new zrender.Circle({scale: [1, 1],shape: {cx: 0,cy: 0,r: 100,},
});var g1 = new zrender.Group({position: [100, 100],
});
g1.add(circle);var g2 = new zrender.Group();
g2.add(g1);var g3 = new zrender.Group();
g3.add(g2);var g4 = new zrender.Group();
g4.add(g3);circle.on("click", function (e) {console.log("Circle");
});
g1.on("click", function (e) {console.log("Group 1");e.cancelBubble = true;
});
g3.on("click", function (e) {console.log("Group 3");// e.cancelBubble = true;
});
g4.on("click", function (e) {console.log("Group 4 should not be triggered");
});zr.add(g4);

Circle - 图形 

Circle没有一些花里胡哨的东西，而且也不需要PathProxy的配置，直接通过ctx.arc()就可以实现，很简单方便。

Group - 组

值得注意的是，Group不是继承于Path的而是Element，说明它不属于图形化的一种；而它又有_children属性，又将child.parent = this;这就和我们后面说到的冒泡相呼应了（一套父子关系，层级关系）-- 事件的捕获和冒泡将是我们这篇文章的重点！ 

事件捕获 - 流程

 图中①②两点是初始化过程的补充，涉及初始化可以看我第一篇你真的了解Canvas吗--解密一【ZRender篇】，里面有详细的流程介绍

• step - 1

• step - 2

 这里主要是addEventListener会实时监听事件，触发localDOMHandlers里面的回调函数，this的值绑定到class HandlerDomProxy()的实例对象，就像下图。想了解更多this指向，可参考我的这篇文章我的这篇文章JS中的this

函数normalizeEvent咱先不关注，与我们主流程无关

再看看trigger函数，这是个重点函数

上面的trigger函数重点执行就是hItem.h.call(hItem.ctx, args[0]);，hItem.ctx是Handler实例对象（针对于主流程），hItem.h就是我们的click事件

ps：on方法在html中也有调用，我这边为什么不用那边的举例呢，大家可以思考一下并留言和我互动哦！答案我会发布在下篇文章中，大家也可以去参考~

 dispatchToElement函数就是最后我们将要提到的事件冒泡，由于篇幅原因，我们下一章再讲吧！

总结

这篇文章主要讲了另一个图形Circle以及事件冒泡中我们需要用到的Group，最后一部分就是事件捕获的一系列流程，还是比较复杂且感觉上“乱”的。主要的原因是this的指向问题，因为此处涉及到的hItem.ctx是精髓，确定了哪个实例对象执行对应的方法（Circle，Handler，HandlerDomProxy）

好了，先讲到这里，我们下一篇文章见~~

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。