1.JointJs Paper_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

1.JointJs Paper_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:24 AM

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 です。もちろん、この属性の最大の利点はこれではありません。次のように、子要素が親要素からドラッグされることを制限できます。