2012-02-26 100 views
2

有沒有什麼簡單的方法來創建一個形狀像菱形?我想有沒有這樣的命令:拉斐爾更具體的形狀(如菱形)

var paper = new Raphael(document.getElementById('canvas_container'), 600, 600); 
var rhombus = paper.rhombus(...); 

也許有比繪製路徑更簡單的方法。任何想法?

回答

2

拉斐爾沒有什麼像paper.rhombus。但是你可以自由地擴展拉斐爾,這樣你就可以得到菱形方法,就像你問的那樣。

我創建了用於繪製菱形的小型fiddle,方法與您想要的相同。

來自小提琴的示例代碼。

r.rhombus({ 
     cx:300, 
     cy:300, 
     side:15 
    }); 

    // a rhombus rotated around its center. 
    r.rhombus({ 
     cx:600, 
     cy:300, 
     side:15, 
     angle:45 
    }).attr({ 
     'stroke-width' :2 
    }) 

變量解釋:

cx - center x position 
cy - center y position, 
side - length of side of the rhombus. 
angle - the angle through which the rhombus will be around its center (cx,cy) 

學到了很多菱形:-)

+0

感謝您的回答!我覺得必須更多地瞭解Javascript。 :) – bmolnar 2012-02-28 14:52:05

+0

如果您發現答案可以接受,請勾選答案。 – rajkamal 2012-02-28 17:22:24

1

我發現它麻煩的使用角度,因爲它也旋轉座標系此對象。例如,稍後將其翻譯爲右側時,它將沿着對角線向東南方向移動。 我使用的路徑爲菱形,該代碼是相當短的:

this.rhombus = this.paper.path("M 100 100 l30 -30 l30 30 l-30 30 l-30 -30"); 

男:動的「筆」,以這些座標 L:畫一條線相對於此點,所以30向右和30個以上的 等。