1.JointJs Paper_html/css_WEB-ITnose

JointJs の導入に関しては、JointJS のより良い入門があります

ファーストクラスの Paper Joint.dia.Paper

Attributes

• el CSS セレクター、Paper は Cs 内のコンテナーを選択しますs例: el='#paper' のように SVG 画像を描画し、SVG DOM ノードを追加します

  width 紙の幅

• height 紙の高さ

• origin の座標紙の原点、デフォルトは {x:0,y:0}

• gridSzie デフォルトは 1 です

• model Joint.dia.Graph オブジェクト、MVC によれば、このプロパティはモデルに対応し、紙は以下に対応しますview

• perpendicularLinks 接続線が直交しているかどうか、デフォルトは false

• elementView はグラフのレンダリングを担当し、デフォルトは Joint.dia.ElementView

• linkView はリンクのレンダリングを担当し、デフォルトはJoint.dia.LinkView

• defaultLink ユーザーによって動的に作成されたリンク (例: ポートから線をドラッグ)、デフォルトはjoint.dia.Link、またはjoint.diaの戻り値タイプにすることができます。 .Link 関数 function(cellView, Magnet) { }

• interactive false に設定すると、グラフ内の要素とリンクの操作が禁止されます

• validateMagnet(cellView, Magnet) 磁石は中国語に翻訳すると磁石となりますJointJs では、DOM 要素を表します。 ユーザーがマグネットをクリックすると、この関数はソースビュー/マグネット間に Link

• validateConnection(cellViewS, MagnetS, cellViewT, end, linkView) を作成するかどうかを決定します。 (cellViewS/magnetS) とターゲット ビュー/マグネット (cellViewT/magnetT) の間でリンクを許可するかどうか。

• linkConnectionPoint(linkView、view、magnet、reference)

この関数を使用すると、ユーザーはレンダリング時に要素の特定の座標に固定するリンクを指定できます。この関数は点 {x,y} を返します。もちろん、jointJS は強力な関数shapePerimeterConnectionPoint

shapePerimeterConnectionPoint Joint.util.shapePerimeterConnectionPoint(linkView, view, Magnet, ref) も提供します。

次のように使用されます:

var paper = new joint.dia.Paper({   ...   linkConnectionPoint: joint.util.shapePerimeterConnectionPoint   ...})   

効果は次のとおりです:

snapLinks When true の場合、リンクは閉じるために最も近い要素を探します

• linkPinning true の場合、リンクはペーパーで終了できます。これは、リンクを要素の代わりに点に接続できることを意味します

• markAvailableユーザーが磁石をクリックすると、接続可能な磁石がインターフェースに表示されます。接続可能なマグネットを強調表示するには、必要な css

/* port styling */.available-magnet {    fill: yellow;}/* element styling */.available-cell rect {    stroke-dasharray: 5, 2;}

• async

• embeddingMode を追加します。 true の場合、紙は埋め込みモードに変わります。具体的には、ユーザーは 1 つの要素を別の要素にドラッグできます。このモードでは、CSS のシャドウにレベルを示す z 属性があるのと同じように、すべてのリンクと要素に追加の z 属性が設定されます。どの要素を埋め込むことができるかを制御するには、validateEmbedding() を設定する必要があります。つまり、この属性は階層図に必要です。

• validateEmbedding(childView,parentView) childView をparentView に埋め込むことが許可されている場合は true を返します。デフォルトでは、すべての要素を他の要素に埋め込むことができます

• restrictTranslate/function(elementView) true に設定すると、ユーザーは要素を紙の境界の外に移動することはできません。デフォルトは false です。もちろん、この属性の最大の利点はこれではありません。次のように、子要素が親要素からドラッグされることを制限できます。