2

SVGパス表記のRaphaelで描かれた一連の逆向きの「L」形状があります-それぞれが水平線と垂直線で表されるさまざまな長さのデータポイントのコレクションです。

<div id="canvas"></div>​
<script>
    var data = [
        [{x: 32, y: 207}, {x: 50, y: 371}],
        [{x: 34, y: 209}, {x: 39, y: 34}],
        [{x: 32, y: 216}, {x: 58, y: 38}],
        [{x: 70, y: 221}, {x: 93, y: 40}],
        [{x: 89, y: 223}, {x: 105, y: 41}],
        [{x: 113, y: 225}, {x: 150, y: 42}],
        [{x: 132, y: 228}, {x: 173, y: 43}],
        [{x: 305, y: 230}, {x: 354, y: 45}]
    ],
        paper = Raphael("canvas", 400, 300),
        path;

    for (var c = 0; c < data.length; c += 1) {
        path = "M" + data[c][0].x + "," + data[c][0].y;
        path += "H" + data[c][1].x;
        path += "V" + data[c][2].y;
        paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
    }
</script>

jsフィドル

これらの形状に、半径5程度の丸みを帯びた角を付けたいと思います。水平線を目的地から 5px 手前まで手動で描画し、曲線を PI/2 ラジアン上にプログラムしてから、残りの垂直線を描画する必要がありますか?

小さな半径の単一の SVG 曲線でこれを行う方法があることを願っています。これにより、形状が終了の直前まで直線で進み、その後上向きにカーブします。まさにラファエルの角丸長方形の動作またはCSS3.

SVG パスのガイドラインを調べましたが、詳細を確認するのに苦労しています。

ありがとうございました！

4

1 に答える 1

3

これでうまくいくはずです（少なくとも例の場合）：

http://jsfiddle.net/jYGrq/3/

これを変える

path += "H" + (data[c][1].x)

これに: path += "H" + (data[c][1].x-5);

その後に次の行を追加します。

if (data[c][0].y > data[c][1].y) path += "s 5 0 5 -5";
else if (data[c][0].y < data[c][1].y) path += "s 5 0 5 5";

これで例のすべてのケースがカバーされますが、向きに関係なく角を丸くしたい場合は、さらに if を作成してください。これが少し役立つことを願っています。

ちなみに、省略形の相対立方体（s）があなたの場合に最も適した曲線タイプであると思います。

于 2012-12-04T19:26:02.003 に答える