ZRender文檔研讀

ZRender文檔研讀 （基於4.3.2版本）

不使用最新的5.x.x的版本是因爲線上文檔和最新版本JS文件不匹配-2022年6月13日

1、文檔地址

• 1、官方文檔的地址：https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable

• 2、Github地址：https://github.com/ecomfe/zrender

2、zrender.Group

• 繼承自 zrender.Element組。
• Group 是一個容器，可以插入子節點，Group 的變換也會被應用到子節點上。

構造函數

zrender.Group()

var g = new zrender.Group();
g.position[0] = 100;
g.position[1] = 100;
g.add(new zrender.Circle({
  style: {
    x: 100,
    y: 100,
    r: 20,
  }
}));
zr.add(g);

3、元素不支持css的hover屬性，需要使用onmouseover和onmouseout方法

{
  onmouseover: function () {
    console.log("over")
    this.attr({
      style: {
        textFill: "#f00", // 顏色
      }
    })
  },
  onmouseout: function () {
    this.attr({
      style: {
        textFill: "#0f0", // 顏色
      }
    })
  },
}

• 官方中的註釋
• 11217 - 11223 (zrebder.js 4.3.2)

Do not trigger mouseout here, in spite of mousemove(mouseover) is
triggered in touchstart. This seems to be illogical, but by this mechanism,
we can conveniently implement "hover style" in both PC and touch device just
by listening to mouseover to add "hover style" and listening to mouseout
to remove "hover style" on an element, without any additional code for
compatibility. (mouseout will not be triggered in touchend, so "hover
style" will remain for user view)

4、在一個實例添加鼠標事件

• 1、第一種是直接在這個實例創建的時候，直接添加。如下代碼：

var BezierCurve = new zrender.BezierCurve({ // 以一個貝塞爾曲線爲例，其他的同理
    …… // 各種屬性
    onmouseover:function(){ // 添加鼠標的over事件，用來模擬鼠標的hover事件
      this.attr({
        style:{
          stroke:"#00f"
        }
      })
    },
    onmouseout:function(){ // 添加鼠標的out事件，用來模擬鼠標的hover事件
      this.attr({
        style:{
          stroke:"#333"
        }
      })
    },
    onclick:function(){ // 添加點擊事件
      console.log("點擊了線");
    },
    oncontextmenu:function(e){ // 添加右鍵事件
      // console.log(e)
      e.event.preventDefault();
      // zr.remove(this);
      var x = e.event.clientX;
      var y = e.event.clientY;
      contentMenu.show();
      contentMenu.attr({
        position:[x, y],
      })
      contentMenu.b = this;
    }
  });

2、 實例創建之後，通過on的方法綁定

var BezierCurve = new zrender.BezierCurve({ // 以一個貝塞爾曲線爲例，其他的同理
  …… // 各種屬性
});
// 添加有右鍵鼠標事件
// 注意，這裏事件名稱沒有“on”  oncontextmenu =>  contextmenu
BezierCurve.on("contextmenu",(e)=>{
  // console.log(e)
  e.event.preventDefault();
  // zr.remove(this);
  var x = e.event.clientX;
  var y = e.event.clientY;
  contentMenu.show();
  contentMenu.attr({
    position:[x, y],
  })
  contentMenu.b = this;
});

4.1、實例添加鼠標事件之後的e不是原始的e

• 1、請看下面的截圖

其中的e.event纔是鼠標的e事件。