ProgramLanguage/Script/JavaScript/JointJS

Joint.setVertices(1D array of point)

概要

直線の交わる点を設定する。
一本の線が折れ曲がったように描画される。

 

構文

function(
    vertices
)
 

パラメータ

vertices
型:1D array of point
交点(x座標, y座標)を1つの要素として1次元配列に追加します。
 

戻り値

Joint
 

解説

図形の基準となる座標が円は中心点、四角は左上と異なることに注意する。
FSA diagrams(joint.dia.fsa.js)を連結した線に対してこのメソッドを使用すると適切に動作しないことが確認されている。

交点が1つでも1次元配列で指定すること。

 

線を折り曲げる方法を次のコード例に示します。

  • 交点をx座標, y座標を示すオブジェクトで指定する。
    var RECT_WIDTH  = 150;
    var RECT_HEIGHT = 60;
    
    var parentMember = Joint.dia.org.Member.create({rect: { x:  50, y:  50, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "parent", position: "", avatar: 'homer.jpg'});
    var childMember  = Joint.dia.org.Member.create({rect: { x: 150, y: 150, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "child",  position: "", avatar: 'homer.jpg'});
    var joint = parentMember.joint(childMember);
    
    var posX =  50 + (RECT_WIDTH / 2);
    var posY = 150 + (RECT_HEIGHT / 2);
    
    joint.setVertices([{x: posX, y: posY}]);
     
  • 複数の交点をx座標, y座標を示すオブジェクトで指定する。
    var RECT_WIDTH  = 150;
    var RECT_HEIGHT = 60;
    
    var parentMember = Joint.dia.org.Member.create({rect: { x:  50, y:  50, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "parent", position: "", avatar: 'homer.jpg'});
    var childMember  = Joint.dia.org.Member.create({rect: { x: 150, y: 150, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "child",  position: "", avatar: 'homer.jpg'});
    var joint = parentMember.joint(childMember);
    
    joint.setVertices([{x:125, y: 130}, {x:225, y:130}]);
     
  • 交点を半角スペース区切りの文字列で指定する。
    var RECT_WIDTH  = 150;
    var RECT_HEIGHT = 60;
    
    var parentMember = Joint.dia.org.Member.create({rect: { x:  50, y:  50, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "parent", position: "", avatar: 'homer.jpg'});
    var childMember  = Joint.dia.org.Member.create({rect: { x: 150, y: 150, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "child",  position: "", avatar: 'homer.jpg'});
    var joint = parentMember.joint(childMember);
    
    joint.setVertices(["125 180"]);
     
  • 複数の交点を半角スペース区切りの文字列で指定する。
    var RECT_WIDTH  = 150;
    var RECT_HEIGHT = 60;
    
    var parentMember = Joint.dia.org.Member.create({rect: { x:  50, y:  50, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "parent", position: "", avatar: 'homer.jpg'});
    var childMember  = Joint.dia.org.Member.create({rect: { x: 150, y: 150, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "child",  position: "", avatar: 'homer.jpg'});
    var joint = parentMember.joint(childMember);
    
    joint.setVertices(["125 130", "225 130"]);
     
  • 交点を半角アットマーク区切りの文字列で指定する。
    var RECT_WIDTH  = 150;
    var RECT_HEIGHT = 60;
    
    var parentMember = Joint.dia.org.Member.create({rect: { x:  50, y:  50, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "parent", position: "", avatar: 'homer.jpg'});
    var childMember  = Joint.dia.org.Member.create({rect: { x: 150, y: 150, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "child",  position: "", avatar: 'homer.jpg'});
    var joint = parentMember.joint(childMember);
    
    joint.setVertices(["125@180"]);
     
  • 複数の交点を半角アットマーク区切りの文字列で指定する。
    var RECT_WIDTH  = 150;
    var RECT_HEIGHT = 60;
    
    var parentMember = Joint.dia.org.Member.create({rect: { x:  50, y:  50, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "parent", position: "", avatar: 'homer.jpg'});
    var childMember  = Joint.dia.org.Member.create({rect: { x: 150, y: 150, width: RECT_WIDTH, height: RECT_HEIGHT }, name: "child",  position: "", avatar: 'homer.jpg'});
    var joint = parentMember.joint(childMember);
    
    joint.setVertices(["125@130", "225@130"]);
     

バージョン情報

Joint 0.2.0

 

参照

Joint.getVertices()
Joint.straighten()


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2014-07-29 (火) 09:09:31 (1849d)