Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 1dacaa38 by Dmitry Baranovskiy
Options

Documentation fixes + custom attributes and getPointAtLength fix

parent 9ae9af88
Showing with 306 additions and 74 deletions
raphael-min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
raphael.core.js
......@@ -99,7 +99,35 @@
was: Object.prototype[has].call(g.win, "Raphael"),
is: g.win.Raphael
},
Paper = function () {},
Paper = function () {
/*\
* Paper.customAttributes
[ property (object) ]
**
* If you have a set of attributes that you would like to represent
* as a function of some number you can do it easily with custom attributes:
> Usage
| paper.customAttributes.hue = function (num) {
| num = num % 1;
| return {fill: "hsb(" + num + ", .75, 1)"};
| };
| // Custom attribute “hue” will change fill
| // to be given hue with fixed saturation and brightness.
| // Now you can use it like this:
| var c = paper.circle(10, 10, 10).attr({hue: .45});
| // or even like this:
| c.animate({hue: 1}, 1e3);
|
| // You could also create custom attribute
| // with multiple parameters:
| paper.customAttributes.hsb = function (h, s, b) {
| return {fill: "hsb(" + [h, s, b].join(",") + ")"};
| };
| c.attr({hsb: ".5 .8 1"});
| c.animate({hsb: "1 0 .5"}, 1e3);
\*/
this.customAttributes = {};
},
paperproto,
appendChild = "appendChild",
apply = "apply",
......@@ -332,33 +360,6 @@
| paper.mystuff.star();
\*/
R.fn = paperproto = Paper.prototype = R.prototype;
/*\
* Paper.customAttributes
[ property (object) ]
**
* If you have a set of attributes that you would like to represent
* as a function of some number you can do it easily with custom attributes:
> Usage
| paper.customAttributes.hue = function (num) {
| num = num % 1;
| return {fill: "hsb(" + num + ", .75, 1)"};
| };
| // Custom attribute “hue” will change fill
| // to be given hue with fixed saturation and brightness.
| // Now you can use it like this:
| var c = paper.circle(10, 10, 10).attr({hue: .45});
| // or even like this:
| c.animate({hue: 1}, 1e3);
|
| // You could also create custom attribute
| // with multiple parameters:
| paper.customAttributes.hsb = function (h, s, b) {
| return {fill: "hsb(" + [h, s, b].join(",") + ")"};
| };
| c.attr({hsb: ".5 .8 1"});
| c.animate({hsb: "1 0 .5"}, 1e3);
\*/
paperproto.customAttributes = {};
R._id = 0;
R._oid = 0;
/*\
......@@ -2662,7 +2663,7 @@
**
* Shortcut for assigning event handler for `drag.over.<id>` event, where id is id of the element (see @Element.id).
> Parameters
- f (function) handler for event
- f (function) handler for event, first argument would be the element you are dragging over
\*/
elproto.onDragOver = function (f) {
f ? eve.on("drag.over." + this.id, f) : eve.unbind("drag.over." + this.id);
......@@ -2756,13 +2757,26 @@
[ method ]
**
* Creates a path element by given path data string.
**
> Parameters
**
- pathString (string) path data in SVG path string format.
= (object) Raphaël element object with type “path”
# Details of a path's data attribute's format are described in the <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG specification</a>.
**
- pathString (string) #optional path string in SVG format.
* Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example:
| "M10,20L30,40"
* Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative.
*
# <p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</p>
# <table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
# <tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
# <tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
# <tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
# <tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
# <tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
# <tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
# <tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
# <tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
# <tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
# <tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
# <tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
* * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier.
> Usage
| var c = paper.path("M10 10L90 90");
| // draw a diagonal line:
......@@ -3208,7 +3222,7 @@
sp += p.shift() + p;
}
subpaths.end = sp;
point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1);
point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
return point;
};
......@@ -3263,7 +3277,7 @@
= (string) pathstring for the segment
\*/
R.getSubpath = function (path, from, to) {
if (abs(this.getTotalLength(path) - to) < 1e-6) {
if (this.getTotalLength(path) - to < 1e-6) {
return getSubpathsAtLength(path, from).end;
}
var a = getSubpathsAtLength(path, to, 1);
......
raphael.js
......@@ -257,7 +257,10 @@
was: Object.prototype[has].call(g.win, "Raphael"),
is: g.win.Raphael
},
Paper = function () {},
Paper = function () {
this.customAttributes = {};
},
paperproto,
appendChild = "appendChild",
apply = "apply",
......@@ -451,8 +454,6 @@
R._Paper = Paper;
R.fn = paperproto = Paper.prototype = R.prototype;
paperproto.customAttributes = {};
R._id = 0;
R._oid = 0;
......@@ -2366,7 +2367,7 @@
sp += p.shift() + p;
}
subpaths.end = sp;
point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1);
point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
return point;
};
......@@ -2380,7 +2381,7 @@
R.getPointAtLength = getPointAtLength;
R.getSubpath = function (path, from, to) {
if (abs(this.getTotalLength(path) - to) < 1e-6) {
if (this.getTotalLength(path) - to < 1e-6) {
return getSubpathsAtLength(path, from).end;
}
var a = getSubpathsAtLength(path, to, 1);
......@@ -3968,7 +3969,6 @@ window.Raphael.svg && function (R) {
Element.prototype = elproto;
elproto.constructor = Element;
R._engine.path = function (pathString, SVG) {
var el = $("path");
SVG.canvas && SVG.canvas.appendChild(el);
......@@ -4585,7 +4585,6 @@ window.Raphael.vml && function (R) {
params.cursor && (s.cursor = params.cursor);
"blur" in params && o.blur(params.blur);
if (params.path && o.type == "path" || newpath) {
// node.path = path2vml(a.path);
node.path = path2vml(~Str(a.path).toLowerCase().indexOf("r") ? R._pathToAbsolute(a.path) : a.path);
if (o.type == "image") {
o._.fillpos = [a.x, a.y];
......
raphael.svg.js
......@@ -684,36 +684,6 @@ window.Raphael.svg && function (R) {
Element.prototype = elproto;
elproto.constructor = Element;
/*\
* Element.path
[ method ]
**
* Creates a path element by given path data string.
> Parameters
- pathString (string) #optional path string in SVG format.
* Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example:
| "M10,20L30,40"
* Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative.
*
x <p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</p>
# <table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
# <tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
# <tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
# <tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
# <tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
# <tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
# <tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
# <tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
# <tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
# <tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
# <tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
# <tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
* * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier.
> Usage
| var c = paper.path("M10 10L90 90");
| // draw a diagonal line:
| // move to 10,10, line to 90,90
\*/
R._engine.path = function (pathString, SVG) {
var el = $("path");
SVG.canvas && SVG.canvas.appendChild(el);
......
reference.html
This source diff could not be displayed because it is too large. You can view the blob instead.
reference.js 0 → 100644
Raphael(function () {
// TOC
(function (ol) {
if (!ol) {
return;
}
var li = document.createElement("li"),
isABBR = function (str, abbr) {
var letters = abbr.toUpperCase().split(""),
first = letters.shift(),
rg = new RegExp("^[" + first.toLowerCase() + first + "][a-z]*" + letters.join("[a-z]*") + "[a-z]*$");
return !!String(str).match(rg);
},
score = function (me, search) {
me = String(me);
search = String(search);
var score = 0,
chunk;
if (me == search) {
return 1;
}
if (!me || !search) {
return 0;
}
if (isABBR(me, search)) {
return .9;
}
score = 0;
chunk = me.toLowerCase();
for (var j, i = 0, ii = search.length; i < ii; i++) {
j = chunk.indexOf(search.charAt(i));
if (~j) {
chunk = chunk.substring(j + 1);
score += 1 / (j + 1);
}
}
score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0);
return score;
};
li.innerHTML = '<input type="search" id="dr-filter" results="0">';
var lis = ol.getElementsByTagName("span"),
names = [],
rgName = /[^\.\(]*(?=(\(\))?$)/;
for (var i = 0, ii = lis.length; i < ii; i++) {
names[i] = {
li: lis[i].parentNode.parentNode,
text: lis[i].innerHTML.match(rgName)[0]
};
}
ol.insertBefore(li, ol.firstChild);
var input = document.getElementById("dr-filter");
input.style.width = "100%";
input.style.marginTop = "10px";
input.onclick = input.onchange = input.onkeydown = input.onkeyup = function () {
var v = input.value,
res = [];
if (v.length > 1) {
for (var i = 0, ii = names.length; i < ii; i++) {
res[i] = {
li: names[i].li,
weight: score(names[i].text, v)
};
}
res.sort(function (a, b) {
return b.weight - a.weight;
});
for (i = 0, ii = res.length; i < ii; i++) {
ol.appendChild(res[i].li);
}
} else {
for (i = 0, ii = names.length; i < ii; i++) {
ol.appendChild(names[i].li);
}
}
};
})(document.getElementById("dr-toc"));
function prepare(id) {
var div = document.getElementById(id);
div.style.cssText = "float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat";
return Raphael(div, 99, 99);
}
var line = {
stroke: "#fff",
"stroke-width": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
dots = {
stroke: "#fff",
"stroke-width": 2,
"stroke-dasharray": "- ",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
fill = {
stroke: "#fff",
fill: "#fff",
"fill-opacity": .5,
"stroke-width": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
none = {
fill: "#000",
opacity: 0
};
prepare("Paper.path-extra").path("M10,10R90,50 10,90").attr(line);
(function (r) {
var there;
r.circle(15, 15, 10).attr(fill).click(function () {
var clr = Raphael.hsb(Math.random(), .6, 1);
this.animate(there ? {
cx: 15,
cy: 15,
r: 10,
stroke: "#fff",
fill: "#fff"
} : {
cx: 80,
cy: 80,
r: 15,
stroke: clr,
fill: clr
}, 600, ["bounce", "<>", "elastic", ""][Math.round(Math.random() * 3)]);
there = !there;
});
})(prepare("Element.animate-extra"));
(function (r) {
var x, y;
r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
this.attr({
cx: Math.min(Math.max(x + dx, 15), 85),
cy: Math.min(Math.max(y + dy, 15), 85)
});
}, function () {
x = this.attr("cx");
y = this.attr("cy");
});
})(prepare("Element.drag-extra"));
(function (r) {
var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () {
this.animate({
transform: "r180"
}, 1000, function () {
this.attr({
transform: ""
});
});
}),
bb = r.rect().attr(e.getBBox()).attr(dots);
eve.on("anim.frame." + e.id, function (anim) {
bb.attr(e.getBBox());
});
})(prepare("Element.getBBox-extra"));
(function (r) {
var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
l = e.getTotalLength(),
to = 1;
r.customAttributes.along = function (a) {
var p = e.getPointAtLength(a * l);
return {
transform: "t" + [p.x, p.y] + "r" + p.alpha
};
};
var c = r.ellipse(0, 0, 5, 2).attr({
along: 0
}).attr(line);
r.rect(0, 0, 100, 100).attr(none).click(function () {
c.stop().animate({
along: to
}, 5000);
to = +!to;
});
})(prepare("Element.getPointAtLength-extra"));
(function (r) {
var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
l = e.getTotalLength() - 10,
to = 1;
r.customAttributes.along = function (a) {
return {
path: e.getSubpath(a * l, a * l + 11)
};
};
var c = r.path().attr(line).attr({
along: 0,
stroke: "#f00",
"stroke-width": 3
});
r.rect(0, 0, 100, 100).attr(none).click(function () {
c.stop().animate({
along: to
}, 5000);
to = +!to;
});
})(prepare("Element.getSubpath-extra"));
(function (r) {
r.circle(50, 50, 40).attr(line).glow({color: "#fff"});
})(prepare("Element.glow-extra"));
(function (r) {
r.rect(10, 10, 40, 30).attr(dots);
r.rect(10, 10, 40, 30).attr(line).transform("r-30, 50, 10t10, 20s1.5");
r.text(50, 90, "r-30, 50, 10\nt10, 20s1.5").attr({fill: "#fff"});
})(prepare("Element.transform-extra"));
(function (r) {
r.circle(50, 50, 40).attr(line);
})(prepare("Paper.circle-extra"));
(function (r) {
r.ellipse(50, 50, 40, 30).attr(line);
})(prepare("Paper.ellipse-extra"));
(function (r) {
r.rect(10, 10, 50, 50).attr(line);
r.rect(40, 40, 50, 50, 10).attr(line);
})(prepare("Paper.rect-extra"));
(function (r) {
var set = r.set(
r.rect(10, 10, 50, 50).attr(fill),
r.rect(40, 40, 50, 50, 10).attr(fill)
).hover(function () {
set.stop().animate({stroke: "#f00"}, 600, "<>");
}, function () {
set.stop().animate({stroke: "#fff"}, 600, "<>");
});
})(prepare("Paper.set-extra"));
(function (r) {
r.text(50, 50, "Raphaël\nkicks\nbutt!").attr({
fill: "#fff",
font: "italic 20px Georgia",
transform: "r-10"
});
})(prepare("Paper.text-extra"));
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment