Readme

根據(jù) Raphael官網(wǎng)翻譯過來的 http://raphaeljs.com/
一方面是聯(lián)系markdown柳譬，一方面是了解svg的相關(guān)庫~

創(chuàng)建Raphael

• Raphael(x,y,w,h) || Raphael(ele,w,h,cb ）|| Raphael(all,vb)
  創(chuàng)建一個(gè)svg肋坚，這個(gè)svg是絕對定位的症概，距離左邊x距離 距離頂部y距離钢猛，寬高為w和h
  ele是一個(gè)id名字或者是一個(gè)id節(jié)點(diǎn)
  all 是一個(gè)圖形數(shù)組數(shù)組與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]) 返回兩點(diǎn)之間的角度

Raphael.angle(10,50,100,120)

• Raphael.animation(params, ms, [easing], [callback])
  params 要變化的屬性 ms 持續(xù)時(shí)間 easing 運(yùn)動曲線 cb 回調(diào)函數(shù)

• Raphael.bezierBBox(…) 三次貝塞爾曲線 里面是6個(gè)值 或者是一個(gè)數(shù)組

• Raphael.color(rsl) 返回一個(gè)顏色值的解析 支持rgb,hsl ,#xxx,#xxxxxx

• Raphael.deg(deg) 返回transform的角度

• Raphael.easing_formulas 運(yùn)動曲線

  • linear 直線
  • < 或者easeIn 或者ease-in 先減速再加速
  • > 或者easeOut 或者ease-out 先加速再減速

• < > 或者easeInOut 或者 ease-in-out

• backIn 或者 back-in 一開始就彈性

• backOut 或者back-out 最后彈性

• bounce 慢速彈性運(yùn)動

• elastic 超快速彈性運(yùn)動

• Raphael.el 自定義函數(shù) Ｃ沙搿胁附！是給這個(gè)節(jié)點(diǎn)或者是圖形加的 跟之后說的 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) 找到點(diǎn)坐標(biāo)對應(yīng)的三次貝塞爾曲線

• Raphael.fn 自定義函數(shù) 酪耕，函數(shù)是綁在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) 更加先進(jìn)的一直替換

// 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]) 獲取光譜上的下一個(gè)顏色值 value 默認(rèn)是0.75

• Raphael.getColor.reset() 重置光譜顏色最初為紅色

• Raphael.getPointAtLength(path, length) 獲取在路徑上長度為length的坐標(biāo) 返回是一個(gè)json { x: ,y: ,alpha: } 最后一個(gè)是角度

• Raphael.getRGB（colour） 解析這個(gè)顏色值 返回一個(gè)json形式的顏色分析 colour的格式可以是'red','#xxx''#xxxxxx''rgb()' 'hsl'
  返回的格式

  {
  r  red
  g green
  b blue
  hex   #xxx
  error 
  

}
```

• Raphael.getSubpath(path,form,to) 截取一段路徑 返回的是一個(gè)字符串路徑
  path 路徑( string) from 開頭 to 結(jié)束

• Raphael.getTotalLength(path) 返回這個(gè)路徑的長度 返回的是長度px

• Raphael.hsl(h,s,l) hsl轉(zhuǎn)換成16進(jìn)制的顏色值 類似Raphael.hsb(h,s,l)

• Raphael.hsl2rgb(h, s, l) hsl轉(zhuǎn)換rgb 類似還有 Raphael.hsb2rgb(h, s, b)

• Raphael.isBBoxIntersect(bbox1,bbox2) 判斷兩個(gè)元素的boundingbox是否相交

• Raphael.isPointInsideBBox(bbox , x , y) 判斷這個(gè)點(diǎn)是否在盒子里面

• Raphael.isPointInsidePath(path,x,y) 判斷點(diǎn)是否在這條路徑上

• Raphael.mapPath(path, matrix) 對路徑進(jìn)行矩陣變換

• Raphael.matrix(a, b, c, d, e, f) 返回一個(gè)線性變換

• Raphael.parsePathString(pathString) 解析這個(gè)路徑 返回一個(gè)包含路徑字符串的數(shù)組

• Raphael.parseTransformString(TString) 解析這個(gè)transform 傳回一個(gè)數(shù)組

• Raphael.pathBBox(path) 給定路徑返回一個(gè)盒子模型 返回是一個(gè)json {x,y,x2,y2,width,height}

• Raphael.pathIntersection(path1,path2) 找到兩個(gè)路徑的一個(gè)相交點(diǎn)

return 
[
{
x:[number] x coordinate of the point
y:[number] y coordinate of the point
t1:[number] t value for segment of path1 //第1個(gè)線段
t2:[number] t value for segment of path2 //第2個(gè)線段
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) 角度轉(zhuǎn)換弧度 感覺是超級有用的東西

• Raphael.registerFont(font) 定義一個(gè)新的字體

• Raphael.rgb2hsl(r, g, b) rgb 轉(zhuǎn)hsl

• Raphael.setWindow(newwin) 設(shè)置一個(gè)新的窗口 類似iframe

• Raphael.st 給節(jié)點(diǎn)增加方法或者設(shè)置值
  與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) 返回變換到路徑的一個(gè)矩陣

• Raphael.transformPath(path, transform) 返回路徑經(jīng)過變化后的路徑

• Raphael.type 判斷瀏覽器是支持svg還是vml (ie獨(dú)有)

• Raphael.vml 判斷瀏覽器是否支持vml

Paper(這里指的是svg)

• Paper.add(arg)增加內(nèi)容到svg上
  arg是一個(gè)數(shù)組的形式导梆，每一個(gè)值都是一個(gè)json，type確定一個(gè)創(chuàng)建的內(nèi)容

• Paper.bottom
  找到在svg在表現(xiàn)上為最下面的一個(gè)元素

• 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) 畫一個(gè)圓;

• Paper.clear() 清除svg的所有內(nèi)容

• Paper.ellipse(x, y, rx, ry) 橢圓 增加一個(gè)橢圓 x，y坐標(biāo) rx看尼，ry半徑;

• Paper.forEach(cb,thisArg) 跟jq一樣 循環(huán)這個(gè)paper的節(jié)點(diǎn) 詳細(xì)見<code>foreach.html</code>

• Paper.getById(id) 獲得某個(gè)id節(jié)點(diǎn) //表示我用attr加不上去 目前不知道怎么加id

• Paper.getElementByPoint(x, y) 返回給定點(diǎn)的最上面的一個(gè)元素

paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"})

• Paper.getFont(family,[weight],[style],[stretch]) 暫時(shí)不明
  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) 增加一個(gè)圖像
  地址 起始坐標(biāo) 寬高

• 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])

在某個(gè)位置寫上文字 x，y位置 string 文字 font 見getFont size文字大小 默認(rèn)16 origin 對齊方式 baseline middle(默認(rèn)) 間隔 默認(rèn)0

print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});

• Paper.raphael 這個(gè)obj/function 具體不明

• Paper.rect(x,y,w,h,[r])
  創(chuàng)建矩形 最后的參數(shù)是弧度 默認(rèn)0

• Paper.remove()
  移出某個(gè)元素

• Paper.renderfix()
  在firefox 和ie9中抬探，當(dāng)這個(gè)圖形有依賴其他節(jié)點(diǎn)的時(shí)候子巾，他的位置會發(fā)生變化，使這個(gè)圖形固定

• Paper.safari()
  解決Safari 強(qiáng)制渲染的問題

• Paper.set()
  分組小压，對分組內(nèi)的元素進(jìn)行統(tǒng)一操作但是不會創(chuàng)建新的元素 詳細(xì)見<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()
  結(jié)合 Paper.setFiniash()使用 創(chuàng)建Paper.set 所有的東西都會被創(chuàng)建進(jìn)這個(gè)set里面线梗，直到遇到Paper.setFinish

• Paper.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)
  設(shè)置視窗 最后一個(gè)參數(shù)表示是有需要用圖形去填充邊框

• Paper.text(x,y,text) 設(shè)置文字 需要換行就加個(gè)\n

    var t = paper.text(50, 50, "Rapha?l\nkicks\nbutt!");

• Paper.top 找到表現(xiàn)上最上面的那個(gè)元素 與Paper.bottom相反

Element 對節(jié)點(diǎn)的操作

• Element.animate(…)

    {
    params 參數(shù)列表
    ms 時(shí)間
    easing 運(yùn)動曲線
    callback
    } or
    animtion [Raphael.animation]

• Element.animateWith(…) 動畫給另外一個(gè)元素
• Element.attr(…) 給節(jié)點(diǎn)增加一個(gè)屬性

(attrName,value)
(params)
(arrtName)
(attrNames)

• Element.click(handler) 給每一個(gè)節(jié)點(diǎn)增加點(diǎn)擊方法

• Element.clone() 克隆這些節(jié)點(diǎn)

• Element.data 增加或者檢索整個(gè)節(jié)點(diǎn)的key（暫時(shí)不知道是什么鬼）

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é)點(diǎn)的拖拽事件

• Element.getBBox(isWithoutTransform) 返回一個(gè)沒有經(jīng)過transform的合模型

• Element.getPointAtLength(length) 返回的坐標(biāo)點(diǎn)位于給定長度在給定的路徑。僅適用于元素的“路徑”

{
x:r x coordinate
y: y coordinate
alpha: angle of derivative
}

• Element.getSubpath(from, to) 返回從開始點(diǎn)到結(jié)束點(diǎn)的一個(gè)路徑

• 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 設(shè)置id

• Element.insertAfter() 在當(dāng)前的節(jié)點(diǎn)后插入一個(gè)object

• Element.insertBefore() 在當(dāng)前的節(jié)點(diǎn)前插入一個(gè)object

• Element.isPointInside(x, y) 判斷這個(gè)點(diǎn)是否在圖形里面

• 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 用于元素的擴(kuò)展

Raphael.el.cross = function () {
    this.attr({fill: "red"});
    this.paper.path("M10,10L50,50M50,10L10,50")
        .attr({stroke: "red"});
}

• Element.remove() 移出這個(gè)節(jié)點(diǎn)

• Element.removeData([key]) remove這個(gè)key跟之前設(shè)置data相反

• Element.resume([anim]) 繼續(xù)播放场航，目測是

• Element.rotate(deg, [cx], [cy]) 旋轉(zhuǎn)缠导，后兩個(gè)參數(shù)是旋轉(zhuǎn)中心點(diǎn)

• Element.setTime(anim, value) 設(shè)置動畫時(shí)間

• Element.show() 相對 hide

• Element.status([anim], [value]) 獲取 或者設(shè)置這個(gè)元素的動畫狀態(tài)

• Element.scale(sx, sy, [cx], [cy]) 縮放，后兩個(gè)是縮放中心點(diǎn)

• Element.stop([anim]) 停止動畫

• Element.toBack() 移動這個(gè)節(jié)點(diǎn)到其他節(jié)點(diǎn)的后面溉痢，以至于讓瀏覽者看到的是最后面的

• Element.toFront() 移動這個(gè)節(jié)點(diǎn)到其他節(jié)點(diǎn)的前面，以至于讓瀏覽者看到的是最上面的

• 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 順時(shí)針30度 旋轉(zhuǎn)點(diǎn)為0,100
s scale s1.5,2,100 放大1.5 放點(diǎn)中心點(diǎn)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時(shí)間 包括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) 增加一個(gè)新的矩陣

• Matrix.clone() 克隆一個(gè)新的矩陣

• Matrix.invert() 返回矩陣的相反矩陣

• Matrix.rotate(a, x, y) 旋轉(zhuǎn)矩陣

• 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 是否可以通過簡單轉(zhuǎn)換
}

• Matrix.toTransformString() 矩陣轉(zhuǎn)換transform 字符串形式

• Matrix.translate(x, y) translate 轉(zhuǎn)換成矩陣

• Matrix.x(x, y) 返回給定的X坐標(biāo)點(diǎn)變換后的矩陣描述 （就是矩陣變化之后x點(diǎn)的值么）

• Matrix.y(x, y) 返回給定的Y坐標(biāo)點(diǎn)變換后的矩陣描述 （就是矩陣變化之后y點(diǎn)的值么）

Animation

• Animation.delay(delay) 對一個(gè)已存在的動畫增加延遲時(shí)間

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)次數(shù)

Set

• Set.clear() 從set里面清除全部元素

• Set.exclude(element) 從set里面排除某個(gè)元素

• Set.forEach(callback, thisArg) 循環(huán)這個(gè)set里面的元素進(jìn)行callback操作

• Set.pop() 移出set里面的最后一個(gè)元素 并且 返回這個(gè)元素

• Set.push() 增加一個(gè)元素到set里面

• Set.splice(index, count, [insertion…]) 移出某個(gè)元素

eve 對事件的操作

• eve.off(name, f) 解除事件

• eve.on(name, f) 綁定事件
  這里不做過多介紹因?yàn)槲乙膊欢@個(gè)