-1

私は Raphael プラグインを初めて使用しますが、誰でも Raphael ( http://raphaeljs.com/ )を使用してこの図を描くのを手伝ってくれますか?

これがダイアグラム

更新: Raphael を使用して作成したダイアグラムのフィドル リンクhttp://jsfiddle.net/LG5zn/64/ - すべての要素をサイズ変更可能にしたい。

var paper = Raphael(50, 50, 500, 500);

var rect = paper.rect(10,10, 400, 400);

var rect1 = paper.rect(10,10, 200, 200);

var rect2 = paper.rect(210,210, 100, 100);

var rect3 = paper.rect(135,310, 275, 100);

var t = paper.text(100, 100, "Thermal");

var t2 = paper.text(250, 250, "Corona");

var t3 = paper.text(275, 350, "Arcing");


t.attr({ "font-size": 15, "font-family": "Arial, Helvetica, sans-serif" });

t2.attr({ "font-size": 15, "font-family": "Arial, Helvetica, sans-serif" });

t3.attr({ "font-size": 15, "font-family": "Arial, Helvetica, sans-serif" });


rect2.attr("fill", "#93cede");

rect1.attr("fill", "#72E768");

rect3.attr("fill", "#006ABD");
4

1 に答える 1

2

OK、このDEMOはあなたのプロジェクトに役立つはずです。この例から必要なものをコードに適用するだけです。幸運を

全体をドラッグ可能にし、小さな正方形をクリックしてサイズを変更します。

var R = Raphael("canvas", 500, 500),
    c = R.rect(100, 100, 100, 100).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    s = R.rect(180, 180, 20, 20).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        }),

// the rest is in the DEMO

また、詳細については、Raphael の自由変換を参照してください。これは本当にいいです！

于 2013-07-23T06:53:55.980 に答える