JavaScript/JointJS/Joint/setVertices(1D array of point) の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• JavaScript/JointJS/Joint/setVertices(1D array of point) へ行く。
  • 1 (2012-05-01 (火) 10:36:58)
  • 2 (2012-05-01 (火) 10:59:48)
  • 3 (2014-07-25 (金) 05:10:59)
  • 4 (2014-07-25 (金) 15:05:49)

ProgramLanguage/Script/JavaScript/JointJS

Joint.setVertices(1D array of point)†

概要†

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

構文†

function(
    vertices
)

パラメータ†

vertices

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

 

戻り値†

Joint

 

解説†

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

交点が１つでも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()