书接上文你真的了解Canvas吗--解密一【ZRender篇】

目录
        入口
        挖掘
                继承
                _init
                        step-1：取所有key值
                ​​​​​​​        step-2：定义构造函数BezierCurveShape
                ​​​​​​​        step-3：赋值基础css属性的默认值
                ​​​​​​​        step-4：遍历传入的key属性值
                总结

---

入口

我们走第二个方法（这里我都是用使用量较高的函数带大家进行了解，日后涉及别的细节点我再慢慢讲）

var curve = new zrender.BezierCurve({
            position: [0, 0],
            scale: [1, 1],
            shape: {
                x1: 10,
                y1: 400,
                cpx1: 0,
                cpy1: 0,
                cpx2: 0,
                cpy2: 0,
                x2: 300,
                y2: 30
            },
            draggable: true
        });

这里就开始绘制图形，我用贝塞尔曲线举例~

挖掘

• 继承

进入zrender的世界，我们就看到一个继承的体系

嗯，最终的“父类”是Element，在原型链上表现就如下

curve.__proto__ = Path;
Path实例.__proto__ =  Displayable;
Displayable实例.__proto__ = Element;
Element实例.__proto__ = Object;
Object实例.__proto__ = null;

（不知不觉列了一下原型链）

• _init

Element的constructor中有_init方法。一般私有方法前面加_表示，TypeScript中有private关键词表示更加方便易读且安全，后续可以考虑转TS

然后这个_init方法也不是找当前js的_init，它会先从"子类"BezierCurve中查找，如果找不到才会向其一层层的"父类"中进行查找，最后我找到了这里Path.js中

step-1：取所有key值

就是一个keys方法，它来源于util工具类的一个函数，具体可以看我的番外篇之util。（就是我们传入的position、scale、shape、draggable）

step-2：定义构造函数BezierCurveShape

step-3：赋值基础css属性的默认值

createObject方法，它来源于util工具类的一个函数，具体可以看我的番外篇之util。目的就是创建一个对象并合并obj

defaults方法，它来源于util工具类的一个函数，具体可以看我的番外篇之util，目的就是合并对象DEFAULT_COMMON_STYLE

step-4：遍历传入的key属性值

针对style和shape属性值，都是创建合并之类的操作，就是支持我们传入的样式。紧接着我们再来看super.attrKV();这里就是明确往“父类”找attrKV方法了

看到最后，就知道给class设置属性值，比如我们传入的draggable=true

这里还有一个点，让我们来看下

这里在创建Element的时候有一个自动执行的函数，它会将position、scale、origin先进行预处理，如果是我们传入了对应相同的属性，那么就不会直接赋值key=value，而是要通过Object.defineProperty的set方法赋值。

总结

好了，让我们看最后的打印结果吧！！

这个步骤主要是绘制方面的初始化，里面一套继承体系，可以配置我们传入的样式。