Readme
根據 Raphael官網翻譯過來的 http://raphaeljs.com/
一方面是聯系markdown，一方面是了解svg的相關庫~
創(chuàng)建Raphael
- Raphael(x,y,w,h) || Raphael(ele,w,h,cb ）|| Raphael(all,vb)
創(chuàng)建一個svg，這個svg是絕對定位的，距離左邊x距離 距離頂部y距離，寬高為w和h
ele是一個id名字或者是一個id節(jié)點
all 是一個圖形數組數組與Paper.add類似
// 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"
}]);
- Raphael.angle(x1,y1,x2,y2[x3,y3]) 返回兩點之間的角度
Raphael.angle(10,50,100,120)
- Raphael.animation(params, ms, [easing], [callback])
params 要變化的屬性 ms 持續(xù)時間 easing 運動曲線 cb 回調函數
Raphael.bezierBBox(…) 三次貝塞爾曲線 里面是6個值 或者是一個數組
Raphael.color(rsl) 返回一個顏色值的解析 支持rgb,hsl ,#xxx,#xxxxxx
Raphael.deg(deg) 返回transform的角度
-
Raphael.easing_formulas 運動曲線
- linear 直線
- < 或者easeIn 或者ease-in 先減速再加速
- > 或者easeOut 或者ease-out 先加速再減速
< > 或者easeInOut 或者 ease-in-out
backIn 或者 back-in 一開始就彈性
backOut 或者back-out 最后彈性
bounce 慢速彈性運動
elastic 超快速彈性運動
- Raphael.el 自定義函數 ！！是給這個節(jié)點或者是圖形加的 跟之后說的 Raphael.fn差別在這里
Raphael.el.red = function () {
this.attr({fill: "#f00"});
};
// then use it
paper.circle(100, 100, 20).red();
Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) 找到點坐標對應的三次貝塞爾曲線
Raphael.fn 自定義函數 ，函數是綁在Raphael上的
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
return this.path( ... );
};
// or create namespace
Raphael.fn.mystuff = {
arrow: function () {…},
star: function () {…},
// etc…
};
var paper = Raphael(10, 10, 630, 480);
// then use it
paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"});
paper.mystuff.arrow();
paper.mystuff.star();
- Raphael.format (taken,...) 替換
var x = 10,
y = 20,
width = 40,
height = 50;
// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
paper.path(Raphael.format("M{0},{1}h{2}v{3}h{4}z", x, y, width, height, -width));
- Raphael.fullfill(token, json) 更加先進的一直替換
// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
paper.path(Raphael.fullfill("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
x: 10,
y: 20,
dim: {
width: 40,
height: 50,
"negative width": -40
}
}));
- Raphael.getColor([value]) 獲取光譜上的下一個顏色值 value 默認是0.75
Raphael.getColor.reset() 重置光譜顏色最初為紅色
Raphael.getPointAtLength(path, length) 獲取在路徑上長度為length的坐標 返回是一個json { x: ,y: ,alpha: } 最后一個是角度
-
Raphael.getRGB（colour） 解析這個顏色值 返回一個json形式的顏色分析 colour的格式可以是'red','#xxx''#xxxxxx''rgb()' 'hsl'
返回的格式{ r red g green b blue hex #xxx error
}
```
Raphael.getSubpath(path,form,to) 截取一段路徑 返回的是一個字符串路徑
path 路徑( string) from 開頭 to 結束Raphael.getTotalLength(path) 返回這個路徑的長度 返回的是長度px
Raphael.hsl(h,s,l) hsl轉換成16進制的顏色值 類似Raphael.hsb(h,s,l)
Raphael.hsl2rgb(h, s, l) hsl轉換rgb 類似還有 Raphael.hsb2rgb(h, s, b)
Raphael.isBBoxIntersect(bbox1,bbox2) 判斷兩個元素的boundingbox是否相交
Raphael.isPointInsideBBox(bbox , x , y) 判斷這個點是否在盒子里面
Raphael.isPointInsidePath(path,x,y) 判斷點是否在這條路徑上
Raphael.mapPath(path, matrix) 對路徑進行矩陣變換
Raphael.matrix(a, b, c, d, e, f) 返回一個線性變換
Raphael.parsePathString(pathString) 解析這個路徑 返回一個包含路徑字符串的數組
Raphael.parseTransformString(TString) 解析這個transform 傳回一個數組
Raphael.pathBBox(path) 給定路徑返回一個盒子模型 返回是一個json {x,y,x2,y2,width,height}
Raphael.pathIntersection(path1,path2) 找到兩個路徑的一個相交點
return
[
{
x:[number] x coordinate of the point
y:[number] y coordinate of the point
t1:[number] t value for segment of path1 //第1個線段
t2:[number] t value for segment of path2 //第2個線段
segment1:[number] order number for segment of path1
segment2:[number] order number for segment of path2
bez1:[array] eight coordinates representing beziér curve for the segment of path1
bez2:[ array]eight coordinates representing beziér curve for the segment of path2
}
]
Raphael.rad(deg) 角度轉換弧度 感覺是超級有用的東西
Raphael.registerFont(font) 定義一個新的字體
Raphael.rgb2hsl(r, g, b) rgb 轉hsl
Raphael.setWindow(newwin) 設置一個新的窗口 類似iframe
Raphael.st 給節(jié)點增加方法或者設置值
與Raphael.el的不同
Raphael.el.red = function () {
this.attr({fill: "#f00"});
};
Raphael.st.red = function () {
this.forEach(function (el) {
el.red();
});
};
// then use it
paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();
Raphael.svg 監(jiān)測瀏覽器是否支持svg
Raphael.toMatrix(path, transform) 返回變換到路徑的一個矩陣
Raphael.transformPath(path, transform) 返回路徑經過變化后的路徑
Raphael.type 判斷瀏覽器是支持svg還是vml (ie獨有)
Raphael.vml 判斷瀏覽器是否支持vml
Paper(這里指的是svg)
Paper.add(arg)增加內容到svg上
arg是一個數組的形式，每一個值都是一個json，type確定一個創(chuàng)建的內容Paper.bottom
找到在svg在表現上為最下面的一個元素Paper.ca Paper.customAttributes 的簡寫 自定義屬性
paper.customAttributes.hue = function (num) {
num = num % 1;
return {fill: "hsb(" + num + ", 0.75, 1)"};
};
var c = paper.circle(10, 10, 10).attr({hue: .45});
// or even like this:
c.animate({hue: 1}, 1e3);
Paper.circle(x, y, r) 畫一個圓;
Paper.clear() 清除svg的所有內容
Paper.ellipse(x, y, rx, ry) 橢圓 增加一個橢圓 x，y坐標 rx，ry半徑;
Paper.forEach(cb,thisArg) 跟jq一樣 循環(huán)這個paper的節(jié)點 詳細見<code>foreach.html</code>
Paper.getById(id) 獲得某個id節(jié)點 //表示我用attr加不上去 目前不知道怎么加id
Paper.getElementByPoint(x, y) 返回給定點的最上面的一個元素
paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"})
- Paper.getFont(family,[weight],[style],[stretch]) 暫時不明
font-family font-weight font-style font-stretch 拉伸
paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
Paper.image(src,x,y,w,h) 增加一個圖像
地址 起始坐標 寬高Paper.path(pathString) 路徑 按照基本原則 M、Z、L、H、V、C、S、Q、T、A、R
var c = paper.path("M10 10L90 90");
- Paper.print(x, y, string, font, [size], [origin], [letter_spacing])
在某個位置寫上文字 x，y位置 string 文字 font 見getFont size文字大小 默認16 origin 對齊方式 baseline middle(默認) 間隔 默認0
print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});
Paper.raphael 這個obj/function 具體不明
Paper.rect(x,y,w,h,[r])
創(chuàng)建矩形 最后的參數是弧度 默認0Paper.remove()
移出某個元素Paper.renderfix()
在firefox 和ie9中，當這個圖形有依賴其他節(jié)點的時候，他的位置會發(fā)生變化，使這個圖形固定Paper.safari()
解決Safari 強制渲染的問題Paper.set()
分組，對分組內的元素進行統(tǒng)一操作但是不會創(chuàng)建新的元素 詳細見<code>set.html</code>
var st = paper.set();
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"}); // changes the fill of both circles
Paper.setStart()
結合 Paper.setFiniash()使用 創(chuàng)建Paper.set 所有的東西都會被創(chuàng)建進這個set里面，直到遇到Paper.setFinishPaper.setFinish()
paper.setStart();
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
var st = paper.setFinish();
st.attr({fill: "red"}); // changes the fill of both circles
Paper.setViewBox(x,y,w,h,fit)
設置視窗 最后一個參數表示是有需要用圖形去填充邊框Paper.text(x,y,text) 設置文字 需要換行就加個\n
var t = paper.text(50, 50, "Rapha?l\nkicks\nbutt!");
- Paper.top 找到表現上最上面的那個元素 與Paper.bottom相反
Element 對節(jié)點的操作
- Element.animate(…)
{
params 參數列表
ms 時間
easing 運動曲線
callback
} or
animtion [Raphael.animation]
- Element.animateWith(…) 動畫給另外一個元素
- Element.attr(…) 給節(jié)點增加一個屬性
(attrName,value)
(params)
(arrtName)
(attrNames)
Element.click(handler) 給每一個節(jié)點增加點擊方法
Element.clone() 克隆這些節(jié)點
Element.data 增加或者檢索整個節(jié)點的key（暫時不知道是什么鬼）
for (var i = 0, i < 5, i++) {
paper.circle(10 + 15 * i, 10, 10)
.attr({fill: "#000"})
.data("i", i)
.click(function () {
alert(this.data("i"));
});
}
Element.dblclick(handler) 雙擊
Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext]) 節(jié)點的拖拽事件
Element.getBBox(isWithoutTransform) 返回一個沒有經過transform的合模型
Element.getPointAtLength(length) 返回的坐標點位于給定長度在給定的路徑。僅適用于元素的“路徑”
{
x:r x coordinate
y: y coordinate
alpha: angle of derivative
}
Element.getSubpath(from, to) 返回從開始點到結束點的一個路徑
Element.getTotalLength() 返回路徑長度
Element.glow([glow]) 給元素周圍增加輝光（跟陰影差不多）
{
width number size of the glow, default is 10
fill boolean will it be filled, default is false
opacity number opacity, default is 0.5
offsetx number horizontal offset, default is 0
offsety number vertical offset, default is 0
color string glow colour, default is black
}
Element.hide() 隱藏元素
Element.hover(f_in, f_out, [icontext], [ocontext]) 移入移出
{
f_in fn
f_out fn
icontext context for hover in handle
ocontext context for hover in handle
}
Element.id 設置id
Element.insertAfter() 在當前的節(jié)點后插入一個object
Element.insertBefore() 在當前的節(jié)點前插入一個object
Element.isPointInside(x, y) 判斷這個點是否在圖形里面
Element.mousedown(handler) mosedown事件
Element.mousemove(handler) mousemove事件
Element.mouseout(handler) mouseout事件
Element.mouseover(handler) mouseover事件
Element.mouseup(handler) mouseup事件
Element.onDragOver(f) dragover事件
Element.pause([anim]) 暫停動畫
Element.paper 用于元素的擴展
Raphael.el.cross = function () {
this.attr({fill: "red"});
this.paper.path("M10,10L50,50M50,10L10,50")
.attr({stroke: "red"});
}
Element.remove() 移出這個節(jié)點
Element.removeData([key]) remove這個key跟之前設置data相反
Element.resume([anim]) 繼續(xù)播放，目測是
Element.rotate(deg, [cx], [cy]) 旋轉，后兩個參數是旋轉中心點
Element.setTime(anim, value) 設置動畫時間
Element.show() 相對 hide
Element.status([anim], [value]) 獲取 或者設置這個元素的動畫狀態(tài)
Element.scale(sx, sy, [cx], [cy]) 縮放，后兩個是縮放中心點
Element.stop([anim]) 停止動畫
Element.toBack() 移動這個節(jié)點到其他節(jié)點的后面，以至于讓瀏覽者看到的是最后面的
Element.toFront() 移動這個節(jié)點到其他節(jié)點的前面，以至于讓瀏覽者看到的是最上面的
Element.touchcancel(handler) 觸摸取消事件（移動端也能支持？）
Element.touchend(handler) touchend 事件
Element.touchmove(handler) touchmove 事件
Element.touchstart(handler) touchstart事件
Element.transform([tstr]) transform變換
t translate t100,0 橫向移動100 垂直0
r rotate r30,0,100 順時針30度 旋轉點為0,100
s scale s1.5,2,100 放大1.5 放點中心點2,100
//
var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
// or even wrap
el.transform("t50,50...t-50-50");
// to reset transformation call method with empty string
el.transform("");
// to get current value call it without parameters
console.log(el.transform());
Element.translate(dx, dy) translate 變換
Element.unclick(handler) 移出click事件
Element.undblclick(handler) 移除雙擊事件
Element.undrag() 移除drug
Element.unhover(f_in, f_out) 移除hover時間 包括f_in,f_out
Element.unmousedown(handler) 移除mousedown事件
Element.unmousemove(handler) 移除mousemove事件
Element.unmouseout(handler) 移除mouseout事件
Element.unmouseover(handler) 移除mouseover事件
Element.unmouseup(handler) 移除mouseoverup事件
Element.untouchcancel(handler) 移除 touchcancel事件
Element.untouchend(handler) 移除touchend事件
Element.untouchmove(handler) 移除touchmove事件
Element.untouchstart(handler) 移除touchstart事件
Matrix 矩陣
Matrix.add(a, b, c, d, e, f, matrix) 增加一個新的矩陣
Matrix.clone() 克隆一個新的矩陣
Matrix.invert() 返回矩陣的相反矩陣
Matrix.rotate(a, x, y) 旋轉矩陣
Matrix.scale(x, [y], [cx], [cy]) 縮放矩陣
Matrix.split() 反編譯矩陣
{
dx number translation by x
dy number translation by y
scalex number scale by x
scaley number scale by y
shear number shear 剪切
rotate number rotation in deg
isSimple boolean could it be represented via simple transformations 是否可以通過簡單轉換
}
Matrix.toTransformString() 矩陣轉換transform 字符串形式
Matrix.translate(x, y) translate 轉換成矩陣
Matrix.x(x, y) 返回給定的X坐標點變換后的矩陣描述 （就是矩陣變化之后x點的值么）
Matrix.y(x, y) 返回給定的Y坐標點變換后的矩陣描述 （就是矩陣變化之后y點的值么）
Animation
- Animation.delay(delay) 對一個已存在的動畫增加延遲時間
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
circle1.animate(anim); // run the given animation immediately
circle2.animate(anim.delay(500)); // run the given animation after 500 ms
- Animation.repeat(repeat) 增加循環(huán)次數
Set
Set.clear() 從set里面清除全部元素
Set.exclude(element) 從set里面排除某個元素
Set.forEach(callback, thisArg) 循環(huán)這個set里面的元素進行callback操作
Set.pop() 移出set里面的最后一個元素 并且 返回這個元素
Set.push() 增加一個元素到set里面
Set.splice(index, count, [insertion…]) 移出某個元素
eve 對事件的操作
eve.off(name, f) 解除事件
eve.on(name, f) 綁定事件
這里不做過多介紹因為我也不懂這個
