Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 7aece153 by Dmitry Baranovskiy
Options

0.6.3 Fixed opacity for images and 2 px shift for canvas in IE

parent 359f1d43
Showing with 44 additions and 32 deletions
raphael.js
/*
* Raphael 0.6.2 - JavaScript Vector Library
* Raphael 0.6.3 - JavaScript Vector Library
*
* Copyright (c) 2008 – 2009 Dmitry Baranovskiy (http://raphaeljs.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
......@@ -8,7 +8,7 @@ var Raphael = (function (type) {
var r = function () {
return r._create.apply(r, arguments);
};
r.version = "0.6.2";
r.version = "0.6.3";
r.type = type;
var availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '16px "Arial"', "font-family": '"Arial"', "font-size": "16", gradient: 0, height: 0, opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, translation: "0 0", width: 0, x: 0, y: 0},
availableAnimAttrs = {cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "number", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
......@@ -268,6 +268,10 @@ var Raphael = (function (type) {
var xy = params.scale.split(/[, ]+/);
o.scale(xy[0], xy[1]);
}
if (o.type == "image" && params.opacity) {
o.node.filterOpacity = " progid:DXImageTransform.Microsoft.Alpha(opacity=" + (params.opacity * 100) + ")";
o.node.style.filter = (o.node.filterMatrix || "") + (o.node.filterOpacity || "");
}
params["font-family"] && (s.fontFamily = params["font-family"]);
params["font-size"] && (s.fontSize = params["font-size"]);
params["font"] && (s.font = params["font"]);
......@@ -744,7 +748,11 @@ var Raphael = (function (type) {
width = width || "320px";
height = height || "200px";
cs.clip = "rect(0 " + width + " " + height + " 0)";
cs.position = "absolute";
// cs.margin = "-2px -2px 0 0";
// cs.padding = "-2px -2px 0 0";
cs.top = "-2px";
cs.left = "-2px";
cs.position = "relative";
rs.width = width;
rs.height = height;
r.coordsize = (width == "100%" ? width : parseFloat(width)) + " " + (height == "100%" ? height : parseFloat(height));
......@@ -1512,16 +1520,18 @@ var Raphael = (function (type) {
cx = this.attr("cx") * dirx;
cy = this.attr("cy") * diry;
} else {
s.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + dirx +
this.node.filterMatrix = " progid:DXImageTransform.Microsoft.Matrix(M11=" + dirx +
", M12=0, M21=0, M22=" + diry +
", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')";
s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
}
} else {
if (this.transformations) {
this.transformations[2] = "";
this.node.setAttribute("transform", this.transformations.join(" "));
} else {
s.filter = "";
this.node.filterMatrix = "";
s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
}
}
switch (this.type) {
......
reference.html
......@@ -131,7 +131,6 @@ c.scale(.5, .75); // makes the circle half as wide, and 75% as high</code></pre
<ul>
<li>cx <em>number</em></li>
<li>cy <em>number</em></li>
<li>dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
<li>fill <em>colour</em></li>
<li>fill-opacity <em>number</em></li>
<li>font <em>string</em></li>
......@@ -148,6 +147,7 @@ c.scale(.5, .75); // makes the circle half as wide, and 75% as high</code></pre
<li>ry <em>number</em></li>
<li>scale <em>CSV</em></li>
<li>stroke <em>colour</em></li>
<li>stroke-dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
<li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
<li>stroke-linejoin <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
<li>stroke-miterlimit <em>number</em></li>
......
test/integration.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Raphael - Integration Tests</title>
......@@ -8,15 +9,15 @@
var variations = [
{stroke: "#000"},
{stroke: "#000", fill: "#000"},
{stroke: "#000", fill: "#000", opacity: "0.1"},
{stroke: "#000", fill: "#000", opacity: .1},
{fill: "#000", stroke: "#f00", "stroke-width": "5px"}
]
];
function drawPrimitives(target, primitive, x, y, width, height, curve) {
var canvas = Raphael(target, 500, 120);
$.each(variations, function(index, variation) {
canvas[primitive](x + (index * 110),y,width,height, curve).attr(variation);
})
canvas[primitive](x + (index * 110), y, width, height, curve).attr(variation);
});
}
function embedImages(image) {
......@@ -30,25 +31,26 @@
function drawLines(target, method, treatment, x, y, X, Y, width) {
var canvas = Raphael(target, 600, 120);
$.each(variations, function(index, variation) {
canvas.path(variation)[treatment]().moveTo(x + (index * 110),y)[method](X,Y, width);
})
canvas.path(variation)[treatment]().moveTo(x + (index * 110),y)[method](X,Y, width);
});
}
function drawCurves(target, method, treatment, x, y, x1, y1, x2, y2, x3, y3) {
var canvas = Raphael(target, 600, 120);
$.each(variations, function(index, variation) {
canvas.path(variation)[treatment]().moveTo(x + (index * 110), y)[method](x1, y1, x2, y2, x3, y3);
})
canvas.path(variation)[treatment]().moveTo(x + (index * 110), y)[method](x1, y1, x2, y2, x3, y3);
});
}
function drawqCurves(target, method, treatment, x, y, x1, y1, x2, y2) {
var canvas = Raphael(target, 600, 120);
$.each(variations, function(index, variation) {
canvas.path(variation)[treatment]().moveTo(x + (index * 110), y)[method](x1, y1, x2, y2);
})
var c = canvas.path(variation)[treatment]().moveTo(x + (index * 110), y)[method](x1, y1, x2, y2);
alert(c.node.path);
});
}
$( function() {
window.onload = function () {
drawPrimitives("circles", "circle", 50, 55, 50, 50);
drawPrimitives("squares", "rect", 0, 5, 100, 100);
drawPrimitives("rounded-squares", "rect", 0, 5, 100, 100, 20);
......@@ -62,38 +64,38 @@
drawCurves("relative-curve", "curveTo", "relatively", 5, 5, 10, 30, 90, 60, 30, 100)
drawqCurves("absolute-qcurve", "qcurveTo", "absolutely", 5, 5, 10, 50, 90, 100)
drawqCurves("relative-qcurve", "qcurveTo", "relatively", 5, 5, 10, 50, 90, 100)
})
};
</script>
</head>
<body>
<h1>Raphael Integration Tests</h1>
<h2>Primitives</h2>
<h3>Should draw 4 circles</h3>
<div id="circles" />
<div id="circles"></div>
<h3>Should draw 4 squares</h3>
<div id="squares" />
<div id="squares"></div>
<h3>Should draw 4 squares with rounded corners</h3>
<div id="rounded-squares" />
<div id="rounded-squares"></div>
<h3>Should draw 4 ellipses</h3>
<div id="ellipses" />
<div id="ellipses"></div>
<h3>Should embed 4 images with decreasing opacity</h3>
<div id="images" />
<div id="images"></div>
<h2>Paths</h2>
<h3>Should draw 4 straight lines to an absolute point</h3>
<div id="absolute-line" />
<div id="absolute-line"></div>
<h3>Should draw 4 straight lines to a relative point</h3>
<div id="relative-line" />
<div id="relative-line"></div>
<h3>Should draw 4 curved lines to an absolute point</h3>
<div id="absolute-linec" />
<div id="absolute-linec"></div>
<h3>Should draw 4 curved lines to a relative point</h3>
<div id="relative-linec" />
<div id="relative-linec"></div>
<h3>Should draw 4 bicubic curves to an absolute point</h3>
<div id="absolute-curve" />
<div id="absolute-curve"></div>
<h3>Should draw 4 bicubic curves to a relative point</h3>
<div id="relative-curve" />
<div id="relative-curve"></div>
<h3>Should draw 4 quadratic curves to an absolute point</h3>
<div id="absolute-qcurve" />
<div id="absolute-qcurve"></div>
<h3>Should draw 4 quadratic curves to a relative point</h3>
<div id="relative-qcurve" />
<div id="relative-qcurve"></div>
</body>
</html>
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