Rapha?l
來自站長百科
Rapha?l是一個小型的 JavaScript 庫，用來簡化在頁面上顯示矢量圖的工作。你可以用它在頁面上繪制各種圖表、并進行圖片的剪切、旋轉(zhuǎn)等操作。
簡介[ ]
Rapha?l使用SVG的W3C建議書并且以VML為基礎(chǔ)創(chuàng)建圖形。這意味著每一個創(chuàng)建的圖形對象同時也是一個DOM對象，所以你可以將其與JavaScript事件處理程序相連接并且修改它們。Rapha?l的目標是提供一個適配器，可以使繪制矢量藝術(shù)變得簡單并兼容不同的瀏覽器。
Rapha?l目前支持Firefox 3.0 +，Safari 3.0以上，Chrome 5.0 +，Opera 9.5以上及Internet Explorer 6.0 +.
使用[ ]
Rapha?l的使用非常簡單。下載并包含raphael.js到您的HTML頁面，然后簡單的使用它即可：
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
畫布[ ]
首先必須創(chuàng)建一個畫布，因為所有的將來將被調(diào)用繪制的方法將被綁定到這個畫布上.
參數(shù):
- container （HTML元素 或者 string型）
- width （number型）
- height （number型）
或者：
- x （number）
- y （number）
- width （number）
- height （number）
用法：
// Each of the following examples create a canvas that is 320px wide by 200px high
// Canvas is created at the viewport’s 10,50 coordinate
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
繪制圓[ ]
參數(shù)：
- x （number） X坐標中心
- y （number） Y坐標中心
- r （number） 半徑
用法：
var c = paper.circle(50, 50, 40）；
繪制矩形[ ]
參數(shù)：
- x （number） X軸左上角坐標
- y （number） Y軸左上角坐標
- width （number）
- height （number）
- r （number） 圓角半徑[可選]，默認為0
用法：
// regular rectangle var c = paper.rect(10, 10, 50, 50); // rectangle with rounded corners var c = paper.rect(40, 40, 50, 50, 10);
繪制橢圓形[ ]
參數(shù)：
- x （number） X坐標中心
- y （number） y坐標中心
- rx （number） 水平半徑
- ry （number） 垂直半徑
用法：
var c = paper.ellipse(50, 50, 40, 20