Raphael

2015-05-29  本文已影响1499人  半夕蝶

Readme

根据 Raphael官网翻译过来的 http://raphaeljs.com/
一方面是联系markdown，一方面是了解svg的相关库~

创建Raphael

// 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(10,50,100,120)

Raphael.el.red = function () {
    this.attr({fill: "#f00"});
};
// then use it
paper.circle(100, 100, 20).red();
    

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();

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));

// 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
    }
}));

}
```

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.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();

Paper(这里指的是svg)

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.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"})

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

var c = paper.path("M10 10L90 90");

在某个位置写上文字 x，y位置 string 文字 font 见getFont size文字大小 默认16 origin 对齐方式 baseline middle(默认) 间隔 默认0

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

 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.circle(10, 10, 5),
paper.circle(30, 10, 5)
var st = paper.setFinish();
st.attr({fill: "red"}); // changes the fill of both circles

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

Element 对节点的操作

    {
    params 参数列表
    ms 时间
    easing 运动曲线
    callback
    } or
    animtion [Raphael.animation]

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

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"));
         });
}

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

{
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
}

{
f_in  fn
f_out fn
icontext  context for hover in handle
ocontext context for hover in handle
}

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

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());

Matrix 矩阵

{
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 是否可以通过简单转换
}

Animation

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

Set

eve 对事件的操作

上一篇 下一篇

猜你喜欢

热点阅读