需要使用拉斐爾

Question

我是新來的拉斐爾插件任何一個可以幫我畫這個圖用拉斐爾（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"); 

Answer 1

確定這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's free transform.這是非常好的！