Quark レンダラー ----パート 14

2021SC@SDUSC

レビュー

前回、幾何学的な意味での線について説明した後、グラフィックパッケージの下にあるファイルについて説明します。主にドラッグ、グラデーション、ライン、リンク、シェイプ、変換などのフォルダーがあり、さまざまな画像操作を表します。以下では主にこれらのパッケージ内の js コンテンツ。

グラフィックパッケージ

ドラッグパッケージ

このパッケージには、DragDropMgr.js ファイルと Draggable.js ファイルという 2 つの主要なファイルがあります。DragDropMgr は、同時に複数の要素のドラッグアンドドロップをサポートするグローバルドラッグマネージャーであり、Ctrl キーを押しながら複数の選択を実現できます。 key; js ファイルはドラッグアンドドロップ機能を実装します。ドラッグアンドドロップ機能が必要なすべての要素は mixin によって実装できます。この実装は前述のイベント処理メカニズムに依存します。mixin によって実装されたクラスイベントサポートを提供するには、事前にミックスインイベントフルインターフェイスのデフォルト実装である必要があります。以下では、これら 2 つのクラスについて個別に詳しく説明します。

ドラッグドロップマネージャー.js

これは、グローバルドラッグアンドドロップマネージャーとしてのツールクラスであり、主にコンストラクター、監視の設定、監視の停止、ドラッグの開始、ドラッグ中、ドラッグの終了、選択のクリア、および現在の選択の取得などのメソッドの機能があります。システムのすべての要素として、以下で重要な情報を分析します。

開始リスト

監視を開始する主な目的は、マウスを監視にバインドし、マウスを押すことによってイベントをトリガーすることです。具体的には、次のコードです。mousedown イベントがバインドされています。

  startListen() {
    
    
    this.dispatcher.on('mousedown', this.dragStart, this);
    return this;
  }

停止聞く

この関数の主な機能は監視を停止することです。この関数は主に、次のようにすべての監視を削除し、同時にすべてを 0 に戻すことです。

  stopListen() {
    
    
    this.clearSelectionMap();
    this._draggingItem = null;
    this._dropTarget = null;
    this._x = 0;
    this._y = 0;

    this.dispatcher.off('mousedown', this.dragStart, this);
    this.dispatcher.off('pagemousemove', this.dragging, this);
    this.dispatcher.off('pagemouseup', this.dragEnd, this);
    return this;
  }

この関数の主な目的は、mousedown モニタ、pagemousemove モニタ、pagemouseup モニタの 3 つのモニタを解放し、解放されたオブジェクトを返すことです。

ドラッグ開始、ドラッグ、ドラッグ終了

これら 3 つの機能は、ドラッグの開始時、ドラッグ中、ドラッグの終了時に発生するサイクルで実行されます。ドラッグが開始されると、まずオブジェクトをイベントにバインドし、最初にイベントが送出されるかどうかを判断し、次にイベントを判断し、Ctrl キーを押して要素を選択するかどうかを判断し、選択操作を実行してそれぞれの座標を決定します。次に、pagemousemove と pagemouseup をバインドする操作を実行し、ループを通じてすべてのディスパッチャーを横断し、対応するタスクイベントにディスパッチします。

dragStart(e) {
    
    
    let el = e.target;
    let event = e.event;
    this._draggingItem = el;

    if (!el) {
    
    
      this.clearSelectionMap();
      return;
    }

    if (!el.draggable) {
    
    
      return;
    }

    if (!event.ctrlKey && !this.selectionMap.get(el.id)) {
    
    
      this.clearSelectionMap();
    }
    el.dragging = true;
    this.selectionMap.set(el.id, el);

    this._x = e.offsetX;
    this._y = e.offsetY;
    this.dispatcher.on('pagemousemove', this.dragging, this);
    this.dispatcher.on('pagemouseup', this.dragEnd, this);

    this.selectionMap.forEach(el => {
    
    
      this.dispatcher.dispatchToElement(this.normalizeParam(el, e), 'dragstart', e.event);
    });
  }

次に、コンテンツを持たないドラッグです。これは主に現在の位置情報を決定し、マウスの位置をバインドして現在のドラッグオブジェクトを再割り当てします。現在のオブジェクトのドラッグアイテムが同じであるかどうかを常に判断することに注意してください。そして、カレントオブジェクトのディスパッチャのイベント配信エージェントにおいて、キャンバス内に描画されている要素にイベントが配信されます。このようにして、リアルタイムのドラッグアンドドロップ操作が実現されます。

最後はドラッグ＆ドロップの終了ですが、プロセスは単純で、主にpagemousemoveとpagemouseupを解放し、現在のディスパッチャーを判断してイベント配布エージェントをバインドし、キャンバスに描画された要素にイベントを配布します。

  dragEnd(e) {
    
    
    this.selectionMap.forEach(el => {
    
    
      el.dragging = false;
      this.dispatcher.dispatchToElement(this.normalizeParam(el, e), 'dragend', e.event);
    });
    this.dispatcher.off('pagemousemove', this.dragging, this);
    this.dispatcher.off('pagemouseup', this.dragEnd, this);

    if (this._dropTarget) {
    
    
      this.dispatcher.dispatchToElement(this.normalizeParam(this._dropTarget, e), 'drop', e.event);
    }

    this._dropTarget = null;
  }

ドラッグドロップマネージャーの概要

この js は主にグローバルドラッグアンドドロップマネージャーであり、リスニングの開始、リスニングの停止、ドラッグの開始、ドラッグの進行中、ドラッグの終了などのイベントの処理を含むドラッグアンドドロップ全般を処理して、グローバルドラッグ達成の概要。

ドラッグ可能.js

このファイルは主にドラッグアンドドロップ機能であり、依存関係イベントメカニズムを実装するこのクラスの実装にすべてのドラッグアンドドロップを組み込むことができます。その中で最も重要なのは、移動方法が 1 つだけです。

このメソッドでは、要素を移動し、要素の x、y 座標とイベントを取得し、水平か垂直かを一致させて x と y に値を代入し、イベントをトリガーすることが主な目的です。位置プロパティthis.trigger('moving', this);アニメーションを設定するときの移動イベント。this.dirty();要素をダーティとしてマークし、データを更新し、同時に afterMove イベントをトリガーし、afterMove 関数を呼び出します。この関数はフック関数に相当し、主に要素の移動後に実行されます。Vue.js の vm ライフサイクルのフックに似ています。

要約する

上記では、Drag の 2 つの js ファイルを主に分析しました。これら 2 つのファイルは、主にドラッグ機能を実装するために設計されています。主要なメソッドから分析および処理し、これらの内容はイベント部分に関連します。イベント処理を理解した後、コンテンツのこの部分がより明確に理解され、分析が容易になります。