上文說到當(dāng)可拖動(dòng)的實(shí)際內(nèi)容的大小發(fā)生變化時(shí)，

比方說可拖動(dòng)內(nèi)容content的size是width:100px, height:100px,

視口viewBox的size是width:600px,height:600px,

可拖動(dòng)的大視圖bigView的size可以通過計(jì)算算出來是width：1400px,height:1400px

(600+100)*2 = 1400

那么在content的size發(fā)生變化，假設(shè)變成600px時(shí)，假設(shè)viewBox 的size 一直保持不變，視口區(qū)域的size保持不變是一個(gè)很常見的情況，如果bigView的size 還是1400x1400的話，

就會(huì)導(dǎo)致在拖動(dòng)過程中移動(dòng)到某個(gè)位置時(shí)就無法再繼續(xù)拖動(dòng)，不能夠?qū)ontent 完全移除viewBox視口區(qū)域，

用動(dòng)圖來展示這兩種情況

最開始content的size是width:100px, height:100px, bigView的size為width：1400px,height:1400px時(shí)

image

當(dāng)content的size是width:400px, height:400px, bigView的size保持不變還為width：1400px,height:1400px時(shí)

image

移動(dòng)到某一位置時(shí)就無法繼續(xù)移動(dòng)。

所以在content的size 發(fā)生變化時(shí)，bigView的size 必須也需要能夠同步發(fā)生改變。

代碼中通過引入ResizeObserver 來對(duì)content的size的變化進(jìn)行觀察，

  contentResizeCallback = (
    entries: ResizeObserverEntry[],
    observer: ResizeObserver
  ) => {
    if (this.oldContentRect) {
      let widgetStyle = {
        width: this.content.clientWidth + this.viewBox.clientWidth * 2,
        height: this.content.clientHeight + this.viewBox.clientHeight * 2
      };
      this.bigView.style.width = widgetStyle.width + "px";
      this.bigView.style.height = widgetStyle.height + "px";
    }
    this.oldContentRect = entries[0].contentRect;
  };

  contentResizeObserver = new ResizeObserver(this.contentResizeCallback);

這樣就可以保證在content的size發(fā)生變化時(shí)，content 依然可以完全移出 viewBox 區(qū)域之外

image

在上文說到組件的render函數(shù)最里面是一個(gè)函數(shù)調(diào)用

{this.props.children(
              this.setViewBoxScroll,
              this.setViewBoxScrollDelta
            )}

這就要求組件的使用者在寫代碼過程中要用函數(shù)返回的形式傳遞實(shí)際的content 進(jìn)入組件。

為什么不直接傳入一個(gè)React.Element 對(duì)象呢？

setViewBoxScroll和setViewBoxScrollDelta 這兩個(gè)函數(shù)到底有什么作用呢？

下文繼續(xù)分享。