-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

好的,这个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 回答