4

graffle ( http://raphaeljs.com/graffle.html ) に似たチャートを描いています。ただし、曲線のコネクタ ラインは必要ありません。代わりに、下の写真に示すように直線 (交点に曲線がある) が必要です (他の投稿の 1 つから取得しましたが、そこで解決策を得ることができませんでした)。私の図は多対多の関係で複雑になる可能性があるため、線コネクタは多くの線を切断できるため、線はきれいな接続を示すのに十分なほど区別できる必要があります. これが私のサンプルコードです。誰かがそれを成し遂げるためのアプローチを私に提案できますか?

  connections = [];
  var shapes = new Array();
  var texts = new Array();
  var moreinfo=new Array();
  var kx=20,ky=50;
  var RecWidth=80;
  var RecHeight=40;
  var RecRadius=5;

for (var i=0; i<= 5; i++) {
    shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius);
    texts[i]=r.text(kx + 35, ky + 10, "SlsMktGst"+i );
    moreinfo[i]=r.text(kx + 35, ky + 30, "More" );
    moreinfo[i].id="more"+i;
    shapes[i].id="keylist"+i ;
    shapes[i].attr({fill: '#000080', stroke: '#000080', "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
    texts[i].attr({fill: '#0000A0', stroke: "none", "font-size": 12,"font-weight":"bold", cursor: "move"});
    moreinfo[i].attr({fill: '#0000A0', stroke: "none", "font-weight":"bold", cursor: "move"});

     kx=kx+125;
     ky=ky+50;
};

//矢印を使用して接続線を描画しますhttp://raphaeljs.com/graffle.html

for (var jj=0; jj<=shapes.length-1; jj++) {

    if(jj != shapes.length-1){
        connections.push(r.connection(shapes[jj], shapes[jj+1], "#000", "#fff","Y"));
    };
};

現在の結果: 上記のコードからの現在の結果

期待される結果 ここに画像の説明を入力

4

1 に答える 1

4

あなたのラファエル接続方法では、パス変数を次のように変更します

var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

これに

var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

違いは、パスの「C」が「L」に変更されていることです。

ラファエルのドキュメントによると

  • C = 曲線

  • L = 直線

ありがとう

于 2013-05-04T08:25:52.203 に答える