0

画像のドラッグ アンド ドロップを実装しましたが、サイズ変更中に画像の比率を制限したいと考えています。

/**
 * Variable: constrainChildrenOnResize
 * 
 * Specifies if children should be constrained according to the <constrainChildren>
 * switch if cells are resized (including via <foldCells>). Default is false for
 * backwards compatiblity.
 */
mxGraph.prototype.constrainChildrenOnResize = false;

これをtrueに設定しましたが、機能しません:s

この機能に必要な API/プロパティ..

4

1 に答える 1

0

constrainChildrenOnResizeサイズ変更されたセルの子の位置とサイズを担当します。これは、子が親セルに対して相対的な位置を維持する必要があることを意味します。

あなたの場合、メソッドmxVertexHandlerを使用して拡張することをお勧めします。unionこの例では、最小幅/最小高さの制限を実装する方法を確認できます。この例を使用すると、独自の制約ルールを作成できます。

これが私の簡単な解決策です：

var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {

   var result = vertexHandlerUnion.apply(this, arguments);
   var coff = bounds.width / bounds.height 
   result.width = result.height * coff; 

   return result;
};

したがって、この関数は、リサイザのドラッグ中にマウスを移動するたびに呼び出されます。

境界 - オブジェクト、常に同じで、セルの古いジオメトリを表します (サイズ変更前)

result - 適用される新しい値を表すオブジェクト。この行の adreturnステートメントの間に、結果を変更するために必要なコードを配置できます。

私の単純な例では、セルの幅と高さの初期関係 ( coff ) を取得し、次に coff と新しい高さを掛けて新しい幅を設定します。コーナーまたは上下をドラッグすると機能します。実際のプロジェクトでは、このロジックを少し拡張するか、コーナー ハンドラのみを表示する必要があります。

ちなみに、このコードは、グラフ上のサイズ変更可能なすべてのセルで機能します。画像やその他の種類のセルにのみ適用する場合は、再計算する前に条件を設定してセルの種類を確認できます。this.state.cellユニオン関数を介して、またはユニオン関数内で現在のセルまたはその状態を取得できthis.stateます。たとえば、頂点の場合のみ:

... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
   //calculations here
}
return result;
于 2016-06-29T13:52:31.530 に答える