DmitryBaranovskiy / raphael
- Source
- Commits
- Network (58)
- Issues (12)
- Graphs
-
Branch:
master
-
Hi all
With the structure fun(cX, cY) you need, if you have a variable [cX, cY], to write fun(variable[0], variable[1]); it would have been lighter to write fun(variable).
And it's worse if your variable is from a function because if you don't want to execute two times that function, you need an intermediate variable.
Would it be possible to use that notation for the functions rotate, translate, setSize, circle, rect, etc. ?
We could use both the current notation and that one in the same function.
Comments
-
0 votes
In Raphael 1.2.8 with IE7, paper.width and paper.height return wrong values
2 comments Created 3 days ago by daveFaughtHere is a test case. In Raphael 1.2.1 with IE7 this works properly.
In Raphael 1.2.8 and 1.3.0dev with IE7, both width and height values come back as 1000.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ATest</title> <script src="raphael.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript"> window.onload = function(){ var paper = Raphael(document.getElementById("canvas"),600,400 ); document.getElementById("bugger").innerHTML = "width " + paper.width + " height " + paper.height; } </script> <div id="canvas"></div> <div id="bugger"></div> </body>
Comments
I have reproduced the problem in the playground this way:
alert( [paper.width, paper.height].join(', ') )Displays 1000,1000
Retrieving width and height or any other attribute from paper is undocumented though.
DmitryBaranovskiy
Tue Dec 29 17:06:16 -0800 2009
| link
paper.width and paper.height are used for internal reference only. They are not in documentation, so you was using them on your own risk.
-
With version 1.2.8, the following code exhibit a severe issue in IE when run
within Raphael Playground:var sometext = paper.text(100,100,"This is a test").attr({"text-anchor":"start"});
var bbox = sometext.getBBox();
alert("x: " + bbox.x + " y:" + bbox.y + " width:" + bbox.width + "height:" + bbox.height);
myrect = paper.rect(bbox.x,bbox.y,bbox.width ,bbox.height);The coordinates returned by IE7 in the alert looks like this:
x: 100 y:100 width:0 height:0Obviously the last 3 values are wrong (and therefore the box around the text
is not displayed at all).Also, even on other browsers the bounding box is slightly too tall (a few pixels above and below what I would expect).
Comments
Works for me in IE8 and Raphael 1.3.0dev in the playground.
Yet, there are indeed differences in bounding boxes between browsers, especially between VML and SVG.
This could help you as it fixes alignment and bounding box issues:
http://groups.google.com/group/raphaeljs/browse_thread/thread/daf44c4c1557b898
DmitryBaranovskiy
Tue Dec 29 17:07:15 -0800 2009
| link
Fixed in 1.3.0dev
-
3 votes
Transparent background color stopped working since 1.2.6
2 comments Created 12 days ago by denis-mvar c = Raphael(0, 0, 1000, 1000);
var r = c.rect(100,100,200,200);
r.attr("gradient", "90-#ff0000-transparent");draws fully transparent rectangle in all browsers except IE
Comments
DmitryBaranovskiy
Tue Dec 29 17:07:37 -0800 2009
| link
It have never been supported.
-
0 votes
Rendering glitches after fast typing in helvetica demo
1 comment Created 14 days ago by dleeThis glitch occurs under every browser.
Comments
DmitryBaranovskiy
Tue Dec 29 17:08:17 -0800 2009
| link
fixed in 1.3.0dev
-
The yellow center circle of the polar-clock demo is shifted to the left.
Comments
DmitryBaranovskiy
Tue Dec 29 19:53:30 -0800 2009
| link
fixed
-
Requirement in short, it would be good to have a feature such as
var shapeClone = shape.clone()Thanks
Details here
http://groups.google.com/group/raphaeljs/browse_thread/thread/e62e9533a6d7393dComments
Solved in 1.2.7 (only issue any scaling in the original shape is doubled in the copied shape) The workaround can be seen in the thread link above.
DmitryBaranovskiy
Tue Dec 29 17:09:02 -0800 2009
| link
fixed
-
I'm trying to use Raphaeljs to simplify the PHP code I use to generate SVG (for IE I used to convert to images the result).
However I couldn't find how to generate clip path with Raphael. Is it possible?
Here is for instance a sample SVG clip path:
<defs> <rect id="SVGID_1_" y="71.774" width="252.419" height="215.322"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <rect x="79.032" clip-path="url(#SVGID_2_)" width="89.516" height="358.064"/>Comments
DmitryBaranovskiy
Mon Dec 14 17:14:18 -0800 2009
| link
Raphaël support clipping rectangle, but not clipping path. That should be ok in your case.
http://raphaeljs.com/reference.html#attr-clip-rect
Soloren2001
Tue Dec 15 13:51:36 -0800 2009
| link
Thank you for your tip. Unfortunately I need to clip various shapes inside a shape that is not rectangular (the clipping shape is a Trapezoid with 2 sides which are not straigth but curved... and it may get a bit more complex in the future).
Can this be achieved in VML?
I understand pretty well SVG, but I am not familiar with VML. However, if this can be acheived, can I try and help with this?
Soloren2001
Tue Dec 15 14:08:24 -0800 2009
| link
Here is something closer top what I am trying to accomplish (except that the shape inside the clipping path may also be more complex than a rectangle... but I don't think that it matters?)
<defs> <path id="SVGID_1_" d="M554.544,316.379c-133.85,49.007-318.843,41.087-318.843,41.087L186.22,217.081l274.267-96.671 C460.486,120.409,591.405,144.341,554.544,316.379z"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <rect x="151.013" y="175.528" transform="matrix(0.9431 -0.3324 0.3324 0.9431 -43.0683 134.9409)" clip-path="url(#SVGID_2_)" fill="#1A171B" width="443.678" height="35.632"/>
DmitryBaranovskiy
Tue Dec 15 15:19:30 -0800 2009
| link
As I told, clipping path could only be a rectangle. Your example is not possible to reproduce in Raphaël.
Soloren2001
Tue Dec 15 15:30:28 -0800 2009
| link
I understood :-)
What I wanted to know if this is absolutely impossible because of VML constraints, or if it is feasible to imagine that Raphael could support this in the future.
If it can be done, I'd be happy to try and work on adding this feature to Raphael.
DmitryBaranovskiy
Tue Dec 15 15:42:55 -0800 2009
| link
I could be mistaken, but as far as I know it is absolutely impossible.
-
0 votes
Inconsistent gradient functionality Chrome V IE & FF
1 comment Created 16 days ago by chasbeen//Playground compatible: paper.ellipse(120, 250, 80, 95).attr({stroke: "none", fill: "r(.5,.9)#808-#0FF", opacity: 0});
paper.ellipse(320, 250, 80, 95).attr({stroke: "none", fill: "r(.5,.1)#808-#0FF", opacity: 0});
//Note that although ie and ff are similar showing inverted gradient //Chrome shows a central concentration of "dots" and there is no difference in appearance //for the two lines of code above..Comments
DmitryBaranovskiy
Mon Dec 14 17:08:35 -0800 2009
| link
Chrome SVG support bug. Will not fix.
-
this.events is null or not an object
Line 2047 in Raphael.js ver 1.2.6 should be something like this
ii = this.events ? this.events[length] : 0;
Comments
-
I'm using raphaeljs with batik to render graphs as PDF documents. In order to do this, the following patch needs to be added to raphaeljs 1.2.5:
* 1550,1555 ** --- 1550,1557 ----
var cnvs = paper.canvas; paper.width = width || 512; paper.height = height || 342;cnvs[setAttribute]("xmlns", "http://www.w3.org/2000/svg");cnvs[setAttribute]("version", "1.1"); cnvs[setAttribute]("width", paper.width); cnvs[setAttribute]("height", paper.height); if (container == 1) {
Comments
Hm, that didn't show up as expected:
around line 1552 in rapahel.js, add:
cnvs[setAttribute]("xmlns", "http://www.w3.org/2000/svg"); cnvs[setAttribute]("version", "1.1");
DmitryBaranovskiy
Wed Dec 09 21:24:14 -0800 2009
| link
fixed in 1.2.6
-
2 votes
Raphael 1.2.4: mouseover fires continuously in IE when toFront() called
1 comment Created 27 days ago by gvtRaphael version 1.2.4 has a bug where the mouseover event handler is called INFINITE times in the Internet Explorer browsers (confirmed in IE6; possibly an issue in IE7 and IE8).
This can be confirmed by running the following code in the Raphael playground (http://raphaeljs.com/playground.html)
var c = paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); c.mouseover(function(){ alert('on'); c.toFront() });Run this code in the playground (link above), and then put the mouse over the circle. On Windows in IE, you will see the alert continuously for as long as your mouse is over the circle. On the Mac platform -- Firefox and Safari -- you will see the alert box 1 time. Chrome on Windows is better, showing the alert box 2 times (which is still a bug, see other bug here http://github.com/DmitryBaranovskiy/raphael/issues/#issue/94). Firefox on Windows works correctly, showing the alert box 1 time.
Comments
DmitryBaranovskiy
Tue Dec 29 17:09:35 -0800 2009
| link
fixed
-
Raphael version 1.2.4 has a bug where the mouseover event handler is called TWO times in the Internet Explorer browsers (confirmed in IE6; possibly an issue in IE7 and IE8) and Chrome for Windows.
This can be confirmed by running the following code in the Raphael playground (http://raphaeljs.com/playground.html)
var c = paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); c.mouseover(function(){ alert('on') });Run this code, and then put the mouse over the circle. On Windows, in IE and Chrome, you will see the alert 2 times. On the Mac platform -- Firefox and Safari -- you will see the alert box 1 time. Firefox on Windows does work correctly, showing the alert box 1 time.
UPDATE: this bug may cause another bug which seems to be related: http://github.com/DmitryBaranovskiy/raphael/issues/#issue/95
Comments
DmitryBaranovskiy
Tue Dec 29 17:09:25 -0800 2009
| link
fixed
-
In playground:
paper.path("M100 50a20 20 0 1 0 20 20"); paper.path("M50 50a20 20 0 1 0 20 20").scale(-1, 1).attr('stroke', '#f00'); paper.path("M100 100a20 20 0 1 0 20 20").scale(1, -1).attr('stroke', '#0f0'); paper.path("M50 100a20 20 0 1 0 20 20").scale(-1, -1).attr('stroke', '#00f');Fine in SVG mode, breaks in VML.
Fix:
--- raphael.js- 2009-12-01 17:21:30.000000000 +0000 +++ raphael.js 2009-12-01 16:55:00.000000000 +0000 @@ -2490,7 +2490,7 @@ } else { skip = false; } - if (R.svg && P0 == "A") { + if (P0 == "A") { p[path[i][length] - 2] *= kx; p[path[i][length] - 1] *= ky; p[1] *= dirx * kx;I'd included this in the original patch, but maybe I just explained it poorly. Despite VML not handling arcs, for correct translation to cubic paths these values must be processed either like this, or with a VML specific catch and not just ignored (as is the case currently).
Think about it, if not svg but is an arc, the path is processed by the default handler. Such processing is clearly incorrect regardless of VML's capabilities.
Comments
DmitryBaranovskiy
Wed Dec 09 21:25:18 -0800 2009
| link
fixed in 1.2.5
-
var c = paper.circle(200,200,100).attr({fill:"red"});
var bBox = c.getBBox()
c.paper.rect(bBox.x,bBox.y,bBox.width,bBox.height);var c = paper.path("M140,240 L140,200 110,200 C110,110 190,110 190,200 L160,200 160,240");
var bBox = c.getBBox()
c.paper.rect(bBox.x,bBox.y,bBox.width,bBox.height);Comments
Solved with patch here
http://groups.google.com/group/raphaeljs/browse_thread/thread/39e1d0f22400073
Issue still not fully solved in 1.2.5, the bounding calculation goes for a toss when the shape is scaled to a particular level. see the thread above for details.
DmitryBaranovskiy
Wed Dec 09 21:24:30 -0800 2009
| link
fixed in 1.2.6
-
c1=paper.circle(320, 100, 60).attr({fill: "red"});
c2=paper.circle(320, 300, 60).attr({fill: "rhsb(0.47780834201297895, 1, .25)-hsb(0.47780834201297895, 1, .25)"});alert(c1.attr("fill"));
alert(c2.attr("fill"));
"c2" yields "none"Comments
DmitryBaranovskiy
Wed Dec 09 21:24:36 -0800 2009
| link
fixed in 1.2.6
-
There seems to be path issues in the latest version,
- The integration test HTML fails the path tests (in all these browsers IE 7, Chrome 3, Firefox 3, Safari 4)
- I had issues with bounding box calculation for a cubic curve
- Rounded corners does not work properly in IE
- Basic path methods fail such as the example below
c = paper.path({"fill": "red", "fill-opacity": 0.2}, "M 200 200 Q 150 300 100 300");
error as shown in FireFox and IE
Error: pathArray[0] is undefined
Source File: raphael.js
Line: 445I do not have any of these issues when i move back to 0.8 version of Raphael. Everything works as expected
Comments
- The integration test HTML fails the path tests (in all these browsers IE 7, Chrome 3, Firefox 3, Safari 4)
-
Here is some test code, which I have been trying at http://raphaeljs.com/playground.html
var target = paper.rect(10, 10, 100, 100, 10);
target.attr({y: 20, width: 200, height: 200, "stroke-dasharray": "- "});
target.remove();If you take any of the attribute updates out, or get rid of the radius, the rectangle is removed uccessfully, but in this case an error is thrown. (Only in IE).
There's a possible fix for it in my fork of the code on github:
http://github.com/jamesots/raphael/commit/70af89034027010af0a219dfa3b7fc8b5b2b77c8Comments
DmitryBaranovskiy
Sun Nov 29 16:51:45 -0800 2009
| link
duplicate of 83
-
0 votes
Mouse event not firing for rounded rectangle in IE7 when shape dimension changes
5 comments Created about 1 month ago by vswaminaA rounded rectangle in IE7 requires re-registering of shape mouse events after dimension changes
var c = paper.rect(200, 200, 200, 100, 15).attr("fill", "blue");
c.mousedown(getMouseDown()); //will not fire
c.mouseup(getMouseUp()); //will not fire
c.attr({"width":100, "height":50}); //due to thisthe same works if it is a normal rectangle or the rounded corner is set to 0
A rounded rectangle in IE7 requires re-registering of shape mouse events after dimension changes
To make it work the events have to be re-registered
var c = paper.rect(200, 200, 200, 100, 15).attr("fill", "blue");
c.mousedown(getMouseDown()); //will not fire
c.mouseup(getMouseUp()); //will not fire
c.attr({"width":100, "height":50}); //due to this
c.mousedown(getMouseDown()); //will fire now
c.mouseup(getMouseUp()); //will fire nowComments
same happens for any dimension change including scale function
DmitryBaranovskiy
Sun Nov 29 16:52:22 -0800 2009
| link
I know where problem is. Looking for fix.
I am experiencing a similar issue with Raphael version 1.2.4 -- mouse event (mouseover) does not fire in IE6
DmitryBaranovskiy
Wed Dec 09 21:25:45 -0800 2009
| link
fixed in 1.2.6
-
This line (1137 [v1.2.3]) creates an error when
xy[i]is equal to-1.xy = [-1, -1]; translate.call(o, (+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);
Step through:
translate.call(o, (-1 + 1 || 2) - 1, (-1 + 1 || 2) - 1); translate.call(o, (0 || 2) - 1, (0 || 2) - 1); translate.call(o, (2) - 1, (2) - 1); translate.call(o, 1, 1);
Comments
DmitryBaranovskiy
Sun Nov 29 16:51:27 -0800 2009
| link
fixed
-
0 votes
c.attr("hide") / c.attr("show") should return boolean
3 comments Created about 1 month ago by chasbeenvar c = paper.circle(10, 10, 10);
c.hide();
alert(c.attr("hide"));//returns "undefined"Comments
-
Only text and path
var canvas = Raphael(0, 0, 500, 500);
var p = canvas.path();
var t = canvas.text(100, 200, "aaaaaaaaaaaaa\nbbbbbbbbb");
redraw = function() {
p.attr("path", "M0,0 L100,200");
t.attr("x", 100).attr("y", 200);
}resize = function() {
canvas.setSize(800, 800);
}setTimeout(redraw, 100);
setTimeout(resize, 2000);
setTimeout(redraw, 2500);Comments
DmitryBaranovskiy
Wed Dec 09 21:24:59 -0800 2009
| link
fixed in 1.2.6
-
If the text contains multiple newlines, or ends with newline, it doesn't show up at all. Tested with google chrome 4.0.245.0 on macosx. The following code illustrates the problem, only the 3rd text is working properly.
var r = Raphael("holder", 800, 250);
var txt = {font: "12px Fontin-Sans, Arial", fill: "#000"};
var l = r.text(100, 50, "1\n\n2").attr(txt).show();
var l = r.text(150, 50, "1\n2\n").attr(txt).show();
var l = r.text(200, 50, "1\n2\n3").attr(txt).show();
Comments
DmitryBaranovskiy
Sun Nov 22 21:31:50 -0800 2009
| link
fixed in 1.2.2. Chrome is miserable.
-
Vertical positioning of elements created with raphael.print is not correct, as illustrated by
http://dl.getdropbox.com/u/223827/raphael/raphaelprinttest.html
where each colored element should be somewhere on the correspondingly colored line.The culprit seems to be the line:
out.scale(scale, scale, 0, y).translate(x, (size || 16) / 2);The "obvious" fix:
out.scale(scale, scale, 0, 0).translate(x, y);seems to produce a behaviour that is at least consistent, if not correct:
http://dl.getdropbox.com/u/223827/raphael/raphaelpatchedprinttest.htmlThere must however be some reason why the more "obvious" line is not what was written. What is the correct desired behaviour?
Comments
Another example is http://astrolin.com/zodiac - the Y coordinate for each symbol is the same as for every + mark, yet they grow further off with bigger Y values.
I have updated the above test case with the latest release. I don't understand what the introduced top and height are supposed to do, but I don't think it works.
Having re-read it I now think I understand. However, the precise positionning of text will be extremely difficult with this method. The alignment of glyphs in fonts is designed to be on the 0,0 coordinate and should not be on the top of the font bounding-box. Unless there is some spec which contradicts my claim...
DmitryBaranovskiy
Tue Nov 24 17:29:23 -0800 2009
| link
Raphaël aligns glyphs vertically to the middle of bounding box. It works fine for major cases. What alignment do you suggest?
I assume that the inter-glyph alignment is fine (although I wonder whether the baseline property should not be taken into account). However, I think the coordinate positioning should possibly be that of the baseline, otherwise, in order to precisely position a glyph, one must take into account the bbox property to "reverse" the work you have already done. (not that it matters too much at small font sizes, but at large font sizes, as the xy coord is that of the top/left of the font's bbox, the glyph itself may be postioned far from it). I will try to find some time to investigate further. What are the "major cases" you have tested against?
Thanks for taking the time to account for this stuff.
I have updated my test case using origin="baseline". Still broken - glyphs at different sizes are not aligned in a meaningful way. In the absence of font.baseline, the baseline should probably be considered as zero (i.e. top==0 and height == 0). Or do you have a test case where this is plainly incorrect behaviour?
I have stopped using the Raphael.print function as I only use it to print individual paths (which I obtain from a font as this is the easiest source of these paths for me). I now just print the paths and translate them. In absence of bug reports by others, don't worry too much about fixing this.
DmitryBaranovskiy
Sun Nov 29 16:53:30 -0800 2009
| link
Behaviour is very font dependent. Some fonts have wrong numbers, but majority are good.
-
var canvas = Raphael(0, 0, 500, 500);
var rect = canvas.rect(0, 0, 0, 0);
redraw = function() {
rect.attr("x", 100).attr("y", 100).attr("width", 150).attr("height", 150);
}resize = function() {
canvas.setSize(800, 800);
}setTimeout(redraw, 100);
setTimeout(resize, 2000);
setTimeout(redraw, 2500);
Comments
DmitryBaranovskiy
Sun Nov 22 21:31:27 -0800 2009
| link
fixed in 1.2.2
Not fixed for path and text
var canvas = Raphael(0, 0, 500, 500);
var p = canvas.path();
var t = canvas.text(100, 200, "aaaaaaaaaaaaa\nbbbbbbbbb");
redraw = function() {
p.attr("path", "M0,0 L100,200");
t.attr("x", 100).attr("y", 200);
}resize = function() {
canvas.setSize(800, 800);
}setTimeout(redraw, 100);
setTimeout(resize, 2000);
setTimeout(redraw, 2500); -
This fixes negative scaling about the point (cx, cy). Tested in FF3 and IE8/7.
Changes:
- kx = x / this._.sx, - ky = y / this._.sy; + kx = x, + ky = y;
Wasn't entirely sure why it was necessary to have the previous scale influence the current one, and it was causing problems (I can understand merging scales, but not when they might have completely different
cxandcyvalues) so it got stripped.
- ncx = cx + (rcx - cx) * dirx * kx, - ncy = cy + (rcy - cy) * diry * ky; + ncx = cx + (rcx - cx) * kx, + ncy = cy + (rcy - cy) * ky;
When
x < 0bothkxanddirxwould be negative and cancel out (breaking negative scaling). Sincedirxis always1or-1(and thus basically a flip bit) it got dropped.
- rx: a.rx * kx, - ry: a.ry * ky, - r: a.r * mmin(kx, ky), + rx: a.rx * dirx * kx, + ry: a.ry * diry * ky, + r: a.r * mmin(dirx * kx, diry * ky),
As I explained eariler,
kx * dirx === Math.abs(kx)and asrxshould always be positive (why would you have a negative radius?), this prevents weird results.
- if (R.svg && p[0].toUpperCase() == "A") { + if (p[0].toUpperCase() == "A") {Not sure why this check was here, as the special handling it contains is necessary in both SVG and VML. I assume it's from before Raphael started using SVG paths. Dropped.
- p[1] *= kx; - p[2] *= ky; + p[1] *= dirx * kx; + p[2] *= diry * ky;
Negative radius solution again, this time for arcs.
+ } else if (p[0].toUpperCase() == "H") { + for (var j = 1, jj = p[length]; j < jj; j++) { + p[j] *= kx; + }This stops
Hpaths being scaled bykywhen using the abnormal formH5 10 15which is legal, but pointless (same asH30).
+ } else if (p[0].toUpperCase() == "V") { + for (var j = 1, jj = p[length]; j < jj; j++) { + p[j] *= ky; + }This stops
Vpaths being scaled bykx, previouslyV5would have becomeV(5*kx).Patch:
--- raphael.js?raw=true 2009-10-28 09:48:50.000000000 +0000 +++ raphael.js 2009-10-30 16:03:56.000000000 +0000 @@ -2316,15 +2316,15 @@ window.Raphael = (function () { var bb = this.getBBox(), rcx = bb.x + bb.width / 2, rcy = bb.y + bb.height / 2, - kx = x / this._.sx, - ky = y / this._.sy; + kx = x, + ky = y; cx = (+cx || cx == 0) ? cx : rcx; cy = (+cy || cy == 0) ? cy : rcy; var dirx = ~~(x / Math.abs(x)), diry = ~~(y / Math.abs(y)), s = this.node.style, - ncx = cx + (rcx - cx) * dirx * kx, - ncy = cy + (rcy - cy) * diry * ky; + ncx = cx + (rcx - cx) * kx, + ncy = cy + (rcy - cy) * ky; switch (this.type) { case "rect": case "image": @@ -2344,9 +2344,9 @@ window.Raphael = (function () { case "circle": case "ellipse": this.attr({ - rx: a.rx * kx, - ry: a.ry * ky, - r: a.r * mmin(kx, ky), + rx: a.rx * dirx * kx, + ry: a.ry * diry * ky, + r: a.r * mmin(dirx * kx, diry * ky), cx: ncx, cy: ncy }); @@ -2361,12 +2361,20 @@ window.Raphael = (function () { } else { skip = false; } - if (R.svg && p[0].toUpperCase() == "A") { + if (p[0].toUpperCase() == "A") { p[path[i][length] - 2] *= kx; p[path[i][length] - 1] *= ky; - p[1] *= kx; - p[2] *= ky; + p[1] *= dirx * kx; + p[2] *= diry * ky; p[5] = +(dirx + diry ? !!+p[5] : !+p[5]); + } else if (p[0].toUpperCase() == "H") { + for (var j = 1, jj = p[length]; j < jj; j++) { + p[j] *= kx; + } + } else if (p[0].toUpperCase() == "V") { + for (var j = 1, jj = p[length]; j < jj; j++) { + p[j] *= ky; + } } else { for (var j = 1, jj = p[length]; j < jj; j++) { p[j] *= (j % 2) ? kx : ky;Comments
DmitryBaranovskiy
Tue Nov 24 19:13:07 -0800 2009
| link
Partially applied to 1.2.3
-
Demo 1:
var lineA = raph.path('M20 20H40').scale(1, 2); var lineB = raph.path('M20 20V40').scale(1, 2);Expected:
lineAremains unchanged.lineBdoubles in vertical length.Actual:
lineAremains unchanged.lineBremains unchanged.Demo 2:
var lineA = raph.path('M20 20H40').scale(2, 1); var lineB = raph.path('M20 20V40').scale(2, 1);Expected:
lineAdoubles in horizontal length.lineBremains unchanged.Actual:
lineAdoubles in horizontal length.lineBdoubles in vertical length.I've not had time to investiagte in detail, but if I had to guess I'd
say that there's no special case checks forHandVin the scale
method, and both get incorrectly treated as the first argument (x
coord) of a pair. i.e. the10inL10,20.Comments
Very quick hack, works at first glance but probably needs a looking over.
@@ -2369,7 +2371,7 @@ window.Raphael = (function () { p[5] = +(dirx + diry ? !!+p[5] : !+p[5]); } else { for (var j = 1, jj = p[length]; j < jj; j++) { - p[j] *= (j % 2) ? kx : ky; + p[j] *= (j % 2 && p[0].toUpperCase() != "V") ? kx : ky; } } }
DmitryBaranovskiy
Tue Nov 24 19:13:29 -0800 2009
| link
fixed in 1.2.3
-
"Unexpected value -Infinity parsing y attribute."
window.onload = function() {
var paper = Raphael("holder", 320, 200); var t = paper.text(50, 50, "Print this!"); };Circle and rect work fine.
the text still gets rendered just above the top of the canvas.
Comments
DmitryBaranovskiy
Tue Oct 27 15:43:49 -0700 2009
| link
Fixed.
-
Something i was working on is broken, and none of the "Paths" tests in test/integration.html are showing at all. The error message in Safari is "TypeError: Result of expression 'pathArray[0]' [undefined] is not an object". The error message in Firefox is "pathArray[0] is undefined". Both point to line 425 of raphael.js.
I'm using mac versions of Safari v4.0.2 and Firefox 3.5.3, with a freshly cloned copy of Raphaël.
Comments
Using the deprecated path methods seems to be the root cause. The integration tests need fixing.
DmitryBaranovskiy
Tue Oct 27 15:43:41 -0700 2009
| link
fixed
-
0 votes
Setting rect radius after scale causes gradient to vanish in IE 8
1 comment Created 2 months ago by DavidDurmantry this code (with Raphael 1.1) in IE 8 (in Firefox, Google Chrome it works fine):
var r = Raphael("world", 640, 380); var o = r.rect(200, 200, 50, 70, 5); o.attr({gradient: "90-#000-yellow:1-#fff"}); o.scale(2.0); o.attr("r", 1);Comments
DmitryBaranovskiy
Tue Oct 27 15:43:19 -0700 2009
| link
Fixed
-
I've just noticed when using setSize to change the size of the Raphael canvas in IE8 the contents of the drawing get stretched. This happens for both increasing and decreasing the size and in both Raphael 1 and 1.1. FF3.5 and Chrome both behave as you'd expect. I haven't been able to test IE7 or earlier. Any following objects are correctly drawn. My current solution is to remove and then redraw the content
Comments
DmitryBaranovskiy
Tue Oct 27 15:44:07 -0700 2009
| link
Can’t reproduce. Post some code examples.
-
paper.text(320, 240, "Hello World").animate({x: 100, y: 100},600)
It goes from the initial position, off the screen, and then after the duration is over, pops back up at the final location
Comments
DmitryBaranovskiy
Tue Oct 27 15:43:07 -0700 2009
| link
Fixed
-
1 vote
Text ending with \n does not display itself in Google Chrome
1 comment Created 2 months ago by DavidDurman(it works fine in Firefox 3). code:
var r = Raphael("world", 640, 380); r.text(100, 100, "foo\n");Comments
DmitryBaranovskiy
Thu Oct 15 19:39:02 -0700 2009
| link
Was a bug of WebKit. Fixed by workaround in 1.1
-
var txt = Raphael(0, 0, 900, 900).text(20, 50, "Test text");
txt.node.onmousedown = function() {alert('onmousedown');}Doesn't work in IE.
Comments
DmitryBaranovskiy
Thu Oct 15 19:39:58 -0700 2009
| link
Won’t fix. It is a bad habit to attach mouse events to text. Attach them to cover rect.
-
Hi, and thanks very much for this fantastic job.
Just wanted to report that the demos don't work when viewing them with Safari and page zoom level is other than 0.
I'm using Safari 4.0.3 (5531.9) on Mac OS X 10.5.8
Would like to have the knowledge to fix it myself, but I don't. By now :-)Thanks again.
Comments
DmitryBaranovskiy
Tue Oct 06 17:43:24 -0700 2009
| link
This is Safari rendering issue. Won’t fix.
-
In Raphael 1.0RC2 the drawing of sectors fail, see:
http://ludo.orbin.se/alt-min.htmlFF 3.0.14 says: "Z[0] is undefined". This problem also exists in IE7, and probably other browsers.
Comments
DmitryBaranovskiy
Tue Oct 06 17:42:57 -0700 2009
| link
This is not a bug. This is API changes in 1.0
-
I try to rotate the dice with every throw, but the with Raphael 0.8.6 the rotation is lost on translate http://ludo.orbin.se/alt.html, and with Raphael 1.0RC2 it doesn't translate in the right direction (more serious problem) http://ludo.orbin.se/alt-min.html, however, rotation is not lost.
Comments
DmitryBaranovskiy
Tue Oct 06 17:42:35 -0700 2009
| link
Create a simple test, because I can’t reproduce the bug.
I also get this bug when operating on sets. The rotation is applied after the translation. Or at least, is applied relative to the rotation rather than to the set.
var r = raph.set(); r.push( raph.path('M25 25L50 50L50 25L25 25').rotate(45, 75, 75) ); r.translate(30, 25);Seems the reason for this is because rotation calls are aggregated and set as a transformation on the element, where as transformations are applied directly to the values in the path.
As a result, the path is drawn with the pre-translated values, then rotated by the SVG/VML implementation.same problem here. And same cause : the translation is directly done on the path coordinates. Is there a good reason not to use transform for translations on path ?
DmitryBaranovskiy
Sun Nov 22 21:31:20 -0800 2009
| link
fixed in 1.2.2
Now is a new issue with 1.2.2. It gives an error in toBack() which might be due to that circle() doesn't return an object. The error is with the new Raphaël http://ludo.orbin.se/alt1.2.2.html and not in the old http://ludo.orbin.se/alt.html that has exactly the same code except that it uses 1.2.1. Maybe I should post this as a new issue.
-
Hi,
I get error in IE 8 with this code: (using Raphael 1.0 RC1.3)
var r = Raphael("world", 640, 480); var p = ["M", 100, 100, "S", 200, 100, 250, 120]; r.path(p.join(" "));in Google Chrome 4, Opera 10.0 and Firefox 3 everything works fine.
There seems to be problem with pathDimensions which returns dim object
with 'height' and 'y' properties equaled to NaN.Regards,
David
Comments
DmitryBaranovskiy
Thu Oct 01 16:34:58 -0700 2009
| link
Fixed in Raphaël 1.0 RC2. Please check the latest version before submitting a bug.
DavidDurman
Wed Oct 21 03:08:30 -0700 2009
| link
the same bug appeared again in 1.1
-
line 1683 of http://github.com/DmitryBaranovskiy/raphael/blob/9f6cf4979a0477d4c0eb6a4b407364f1fb6af5ab/raphael.js should be:
fill.colors && (fill.colors.value = clrs.join(","));Comments
DmitryBaranovskiy
Sun Nov 22 21:22:46 -0800 2009
| link
fixed in 1.2.2
-
sorry can't provide more details since i'm at work, but the radial gradients on the ball demo partly fail in Chrome nightly and FF nightly builds, not sure if it's a Raphael or browser bugs. thx.
Comments
DmitryBaranovskiy
Thu Oct 01 16:35:37 -0700 2009
| link
Do not care about nightly builds
-
In version 1.0RC5, calling the paper.text() function where the third argument is actually a number rather than a string throws an "object does not support this property or method" error. This only happens in IE though...
Comments
According to Raphael's documentation the label must be a string. Therefore the error message is correct. Therefore I do not think this should be fixed unless the API is modified.
DmitryBaranovskiy
Sun Nov 22 21:33:29 -0800 2009
| link
fixed in 1.2.2
-
If I inititalize Raphael with
var paper = Raphael($('container'), 200, 200);
it doesn't work because,
R.is(arguments[0], "object") in getContainer returns falseObject.prototype.toString.call(o) == [object HTMLDivElement]
Version: Raphael 1.0 RC1.4
Comments
DmitryBaranovskiy
Wed Sep 23 19:25:32 -0700 2009
| link
Fixed in RC1.5
-
When i'm trying to create smooth curve with something like curve.attr("path", "M50 50 T100 100 T50 200" the curve disappears in IE.
Comments
DmitryBaranovskiy
Wed Sep 23 19:25:18 -0700 2009
| link
Thank you for report. Fixed in RC1.5
-
rectangle should (in theory) disappear, but it doesn't
Comments
var r = Raphael(0, 0, 1000, 1000);
r.rect(100, 100, 200, 200).attr("gradient", "90-red-blue").attr("opacity", 0).attr("stroke-opacity", 100).attr("fill-opacity", 0);
DmitryBaranovskiy
Wed Sep 23 19:26:19 -0700 2009
| link
No this is how it is intended to work. Opacity applies to the last stop in gradient.
IlyaSemenov
Mon Sep 28 02:45:12 -0700 2009
| link
So, is there currently a way to make the red-blue gradient box in the given example to be 50% transparent?
DmitryBaranovskiy
Mon Sep 28 19:06:53 -0700 2009
| link
No.
DmitryBaranovskiy
Mon Sep 28 19:07:52 -0700 2009
| link
If I will find workaround for this in VML, I will make it possible, but for now…
-
diff --git a/inc/raphael.js b/inc/raphael.js index 050a70e..9100192 100644 --- a/inc/raphael.js +++ b/inc/raphael.js @@ -1619,7 +1619,8 @@ window.Raphael = (function () { a["font-size"] && (s.fontSize = a["font-size"]); a["font-weight"] && (s.fontWeight = a["font-weight"]); a["font-style"] && (s.fontStyle = a["font-style"]); - paper.span.innerHTML = res.node.string.replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br>"); + if(res.node.string) + paper.span.innerHTML = res.node.string.replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br>"); res.W = a.w = paper.span.offsetWidth; res.H = a.h = paper.span.offsetHeight; res.X = a.x; @@ -2120,8 +2121,8 @@ window.Raphael = (function () { } var c = paper.canvas = doc.createElement("div"), cs = c.style; - width = parseFloat(width) || "512px"; - height = parseFloat(height) || "342px"; + width = parseFloat(width) || "512"; + height = parseFloat(height) || "342"; paper.width = width; paper.height = height; paper.coordsize = width + " " + height;if res.node.string is not defined, IE will throw an error when calling .replace on an undefined value.
height and width need to be specified without the "px" because it will be added to it later.moritz
Comments
DmitryBaranovskiy
Wed Sep 23 19:27:31 -0700 2009
| link
Applied. Thanks.
-
Just test following code in Google Chrome (mine is 3.0.195.21):
<script type="text/javascript" src="scripts/raphael.js"></script> <script type="text/javascript" src="scripts/jquery.js"></script> <span id="container"> Hello!! </span> <script type="text/javascript"> $("#container").each( function() { var p = Raphael($(this).context, 10, 10) p.circle(5, 5, 5).attr({fill: "#F00"}) }) </script>Chrome throws error:
raphael.js:1365 Uncaught TypeError: Cannot read property 'container' of undefinedComments
DmitryBaranovskiy
Sun Sep 20 19:52:16 -0700 2009
| link
The code you posted has at least two errors that will prevent it from running properly in any browser.
But with previous RC this piece of code is working. I posted this issue, because I have broken project after updating from RC1.3 to RC1.4. What is wrong in my code or what was changed?
Regarding documentation Raphael it should be initialized like this:
Raphael(HTMLElement or string, width, height)In my example $(this).context returns exactly HTMLElement (checked with JS debugger), but initialization fails on calling Raphael()...
If you want to use only one item:
<span id="container"> Hello!! </span> <script type="text/javascript"> var p = Raphael("container", 10, 10); p.circle(5, 5, 5).attr({fill: "#ff0000"}); </script>and if you want to use more items, you should use the class attribute, not the id...
<span class="container"> Hello!! </span> <span class="container"> Hello!! </span> <script type="text/javascript"> $('.container').each( function () { var p = Raphael(this, 10, 10); p.circle(5, 5, 5).attr({fill: "#ff0000"}); }); </script>Yep. Example was little bit incorrect, but... :) I tested again. Following piece of code also doesn't work:
<html> <script src="jquery.js" type="text/javascript"></script> <script src="raphael.js" type="text/javascript"></script> <body> <div class="container"> Hello!! </div> <script type="text/javascript"> $(".container").each( function() { Raphael(this, 10, 10).circle(5, 5, 5).attr({fill: "#F00"}) }) </script> </body> </html>Did you check this? Is it works for you? For me not. Different browsers: IE6 - works, FF3.5.2 - no, Chrome 3 - no, Chrome 4 (dev) - no. Same error at the same line in Raphael. I'm again wrong? But why with IE it works? Same code...
Probably I have lost something in this code.. Something was done incorrectly... But what? Why RC1.3 worked Okay for me? Why IE6 works also Okay and any other not? It's unclear... Even on different PCs...
Please check RC1.4 with Chrome and FF:
<div id="cont"> Hello!! </div> <script type="text/javascript"> Raphael(document.getElementById("cont"), 10, 10).circle(5, 5, 5).attr({fill: "#F00"}); </script>I'm still observing error with this quite simple script. IE8 also works fine like IE6. Someone else can confirm same error? I hope this script is good enough and it's error free. :)
Дмитрий, я понимаю что Вы человек занятый (как и я впрочем), но нельзя же закрывать баги не проверив их. ;) Серьёзно.... не работает в хроме и фф даже такая простая конструкция.
Ok. I found the root of problem. It's within
R.is = function()
I found that this function works correctly only for IE, because after call ofObject.prototype.toString.call(o)IE always returns string[object Object]for any object, but in all others browsers this string is quite different and they return something like[object HTMLDivElement], therefore:
R.is(document.getElementById("MyDivElement"), "object")always will fail for non IE browsers... I think that regexp should be adapted for this cases.
that's all... :)
I have a troubles with github and with git client, so I put changes here:
remove
return Object.prototype.toString.call(o).replace(/^\[object\s+|\]$/gi, "").toLowerCase() == type;add
var t = Object.prototype.toString.call(o).replace(/^\[object\s+|\]$/gi, "").toLowerCase(); if( !t.indexOf("html") ) t = "object"; return t == type;this code simply adds check for all HTMLxxxxElement and replaces them with "object".
Now everything works well in all browsers.
DmitryBaranovskiy
Mon Sep 21 20:00:28 -0700 2009
| link
Fixed it. Will commit an update soon. Thank you for investigating.
-
- setSize() breaks vml canvas.
- Rectangles with rounded corners are not available with vml. Maybe use v:roundrect instead of v:rect?
- Radial gradients is not implemented, but both svg and vml have this feature
Напишу по-русски подробнее:
1) Достаточно сравнить результат двух скриптов в IE (проверял в IE7)
var canvas = Raphael(someDOMElement, 1000, 1000);
canvas.setSize(500, 500)
var circle = canvas.rect(10, 10, 200, 200);
И то же самое без setSize.
Пока удалось решить проблему, закомментировав все содержимое setSize() в vml секции, кроме строчки cs.clip = ...., как ни странно работает и после этого.
2) attr("rx", something) и attr("ry", something) не имеют никакого эффекта в IE
3) Не нашел стандартного способа задать радиальный градиент для объектовComments
DmitryBaranovskiy
Thu Sep 17 20:00:59 -0700 2009
| link
- Fixed in RC1.4
- Use “r” instead of “rx” & “ry”
- Radial gradients are not supported at the moment.
- setSize() breaks vml canvas.
-
The code for R.format near the bottom of raphael.js for 1.0 RC1.2 has the following line
return args[++i] || "";which will return 0 if args[++i] is 0.
While the workaround is to pass "0", changing the line as follows will make it work as expected:
//return args[++i] || ""; var arg = args[++i]; return (arg == null) ? "" : arg;Comments
I forgot to note that I encountered this while trying to use path with the formatted string arguments from 1.0RC1.x.
r.path("M{0},{1}L{2},{3}", a, b, c, d)If one of the arguments have a value of 0, then it will be skipped. This probably impacts elliptical arc curves the most. Specific use case: drawing a piechart.
DmitryBaranovskiy
Thu Sep 17 20:01:52 -0700 2009
| link
Fixed in RC1.4
-
0 votes
Order of Transformation Application Is Different Between VML and Canvas
1 comment Created 3 months ago by CerinIn IE, Raphael applies rotation before any translation. Whereas in Firefox, Raphael applies translation first and then rotation. This creates a noticeable difference in platform behavior, and breaks Raphael's otherwise good cross-platform support.
For a longer discussion and example source-code, please see the forum thread http://groups.google.com/group/raphaeljs/browse_thread/thread/2a90d182b453402f/76d7b370918ea411?lnk=gst
Comments
DmitryBaranovskiy
Sun Nov 22 21:22:27 -0800 2009
| link
fixed in 1.2.2
-
Seems that the first gradient to be defined overwrites subsequent gradients: This worked correctly in 0.8.6, but not 1.0 RC1
Tested in Firefox 3.5, 3.0 and Safari 4 Mac & Windows
Examples:Using 0.8.6
http://solsyslabs.com/raphaelbug/version_86.htmlUsing 1.0 RC1
http://solsyslabs.com/raphaelbug/version_1RC1.htmlCode in both files is identical, aside from the JS include and the page title.
Please let me know if you need additional examples or if you have any other questions.
Comments
DmitryBaranovskiy
Wed Sep 09 16:36:30 -0700 2009
| link
Raphaël doesn’t support radial gradients, yet.
-
0 votes
(stop) opacity ignored in gradient if offset is defined and != 0
2 comments Created 3 months ago by kfornerSomething like this does not work:
r2.attr({rx:15, ry:15, gradient: { type: 'linear', vector: [0,0,0,1], dots: [ { offset: '0.0', color: '#fff', opacity:'0.5' }, { offset: '0.33', color: '#fff', opacity:'0.25'}, { offset: '0.34', color: '#fff', opacity:'0'} ]}});In the generated svg there's no stop-opacity properties.
If you look lines 854-855 of raphael.js,
if (gradient.dots[i].offset) { isopacity = false;it explains why it is ignored : if there's an offset defined and != 0.
Is it expected ?
thanks
Comments
DmitryBaranovskiy
Thu Sep 03 21:52:36 -0700 2009
| link
This is not documented usage of gradient. There is no support for opacity of stops.
-
When using the getBBox() method on any object created with paper.text() with more than one line of text, I get all manner of different results.
IE gives what I'd expect; Firefox seems to always take the x parameter to be zero, and thus the width is offset from that; Safari and chrome seem to give a value for width something of the order of 2^32...
Any ideas? It works fine for text strings without any newlines in it, but I'd prefer not to have to create a new text object for every line.
CheersComments
DmitryBaranovskiy
Sun Aug 30 21:08:35 -0700 2009
| link
Can't reproduce. Found a bug in IE (fixed in 1.0 branch), but Safari & FF are working fine.
Ok no worries, probably just something weird in my JS then. Doesn't really matter anyway as I'm doing things a slightly different way now.
Keep up the good work :)
DmitryBaranovskiy
Thu Sep 03 21:52:51 -0700 2009
| link
Closing it then
This issue still appears as Unread, instead of Closed. It would be nice to get someone to manage (closing, verifying, assigning, etc...) these issues going forward so that Dimitry can concentrate on the coding. I'd be happy happy to help.
-
We've had serious issues with raphael in IE7 under both XP and Vista. Charts created with graphael only display skeletons, mouseovers leave ghost outlines and the div isn't resized properly (see http://img.skitch.com/20090828-dpeq2u6be68r5141yrjt9jr6ig.png)
Comments
DmitryBaranovskiy
Sun Aug 30 19:16:03 -0700 2009
| link
Could you create simple test for this?
DmitryBaranovskiy
Thu Sep 17 20:10:01 -0700 2009
| link
Can’t reproduce.
-
0 votes
Opacity overwrites fill-opacity and stroke-opacity in IE
1 comment Created 4 months ago by DmitryBaranovskiy -
0 votes
Setting fill after a rotation resets rotation
2 comments Created 4 months ago by antimatter15Steps:
http://raphaeljs.com/playground.html
paper.rect(100,100,100,100).rotate(42).attr("fill","blue")
Expected:
Rectangle should be tilted at 42deg.
Result:
Rectangle is not rotated
Affects:
I've tried Chromium nightly and Firefox 3.0.
Comments
DmitryBaranovskiy
Mon Aug 17 23:45:47 -0700 2009
| link
This is better. I fixed it in the next branch.
DmitryBaranovskiy
Thu Sep 17 20:09:35 -0700 2009
| link
fixed
-
This works on FF and IE
var rect_1250436797635 = paper.rect(400,100,100,100,0);
rect_1250436797635.rotate(218.13589547328468);Problems on FF with Cufon js fonts
myFontRef=paper.getFont('whoa');
myFont=paper.print(70, 150, 'Raphael with Cufon', myFontRef, 60);myFont[0].attr( {rotation: 218.13589547328468} );//Works in 0.86 for FF and IE
myFont[1].rotate(235.83932546062303);//Works in 0.86 for IE but not FFComments
DmitryBaranovskiy
Sun Aug 16 20:44:06 -0700 2009
| link
Can’t reproduce.
-
0 votes
Can't get text value of text element through attr() unless set by attr
1 comment Created 4 months ago by antimatter15shape = this.draw.text(x, y, this.prop['text']).attr('font-size',0)
shape.attr("text")
//null shape.attr("text",this.prop.text);
shape.attr("text")
//textComments
DmitryBaranovskiy
Thu Sep 17 20:09:25 -0700 2009
| link
fixed in 1.0
-
When I have a rotated shape, and I use .translate to move it, then the rotation is reset to 0.
Comments
DmitryBaranovskiy
Sun Aug 16 20:39:34 -0700 2009
| link
Can]t reproduce
antimatter15
Mon Aug 17 18:54:50 -0700 2009
| link
http://raphaeljs.com/playground.html
paper.rect(100,100,100,100).rotate(42).translate(30,30)While it's expected for the shape to be rotated, the resulting shape is not rotated on Chromium and Firefox 3.0
-
var shape = this.draw.ellipse(x, y, w, w).attr({
"stroke-width": 1, "stroke": "green", "fill": "white"}).mouseover(function(){
this.attr("fill", "red")})
When mouseover executes then the rotation is reset.
Comments
DmitryBaranovskiy
Sun Aug 16 20:39:19 -0700 2009
| link
Can’t reproduce.
-
Using shape.attr("src") on an image returns nothing.
Comments
DmitryBaranovskiy
Thu Sep 17 20:09:02 -0700 2009
| link
fixed in 1.0
-
I don't know if this is better classified as a feature request or a bug. Using shape.attr("rotation") does nothing.
Comments
I've noticed that if you haven't set any rotation then attr('rotation') will return null instead of the more intuitive 0. There's a similar bug with scale().
DmitryBaranovskiy
Thu Sep 17 20:07:32 -0700 2009
| link
What it should do?
It should return the current amount of rotation in degrees.
DmitryBaranovskiy
Sun Sep 20 19:54:15 -0700 2009
| link
It does for me. Put a test case when it doesn’t.
DmitryBaranovskiy
Sun Nov 22 21:33:36 -0800 2009
| link
fixed in 1.2.2
-
0 votes
Text doesn't work on Firefox 3.0 with Raphael 0.8.5
1 comment Created 4 months ago by antimatter15None of the text renders in Firefox 3.0 with Raphael 0.8.5 but it worked with 0.8.2. The text related demos don't work.
Comments
DmitryBaranovskiy
Wed Aug 12 16:19:27 -0700 2009
| link
fixed
-
D
other users are reporting this error:This code worked on 0.8.2
paper.circle(100, 170, 175).attr({
gradient: { type: "linear", dots: [{opacity: 0.5, color: "#900"}, {color: "#900", opacity:0.0}], vector: [0, 0, 0, "100%"]},
stroke: "none" });Specifically:
Error:
Line: 1778
Error: The Object do not support this attribute or methodWhich is this line in Raphael.js --> fill =
o.getElementsByTagName("fill");
part of var addGradientFill = function (o, gradient)
Comments
DmitryBaranovskiy
Wed Aug 12 16:19:20 -0700 2009
| link
fixed
-
0 votes
Patch for FF text getBBox error (a real one that works)
1 comment Created 4 months ago by pcwizdanIssue is calling getBBox even when we are using a text element, you'll notice my fix...which does work, tested in IE/FireFox/Opera
Element.prototype.getBBox = function () { var hide = false; if (!(this.node.style.display == "block")) { this.show(); hide = true; } var bbox = {}; if (this.type == "text") { bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0}; for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) { var bb = this.node.getExtentOfChar(i); (bb.y < bbox.y) && (bbox.y = bb.y); (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y); } } else { bbox = this.node.getBBox(); } if (hide) {this.hide();} return bbox; };Comments
DmitryBaranovskiy
Wed Aug 12 16:19:40 -0700 2009
| link
fixed
-
0 votes
Animation demo: one of the reverse transitions has a bug (FF 3.5)
2 comments Created 4 months ago by takamoriAt http://raphaeljs.com/animation.html
the reverse transition for the 2nd-down animation on the right side does not move all the way back to its original position. Repeatedly clicking on it will show the animation moving further and further to the right as it moves back and forth.The forward animation of it works just fine. I suspect the bug to be in the demo code, not in Raphael itself.
Comments
Ok, it only occurs when you don't let the animation complete before clicking on it again. The third-down on the right also has this issue; the others don't.
DmitryBaranovskiy
Wed Aug 12 16:20:13 -0700 2009
| link
not a bug
-
0 votes
reference links are broken at http://raphaeljs.com/reference.html
1 comment Created 4 months ago by takamoriAll the "#" anchor links are broken; they point to the main page instead of the anchors on reference.html. Probably because of
<base href="http://raphaeljs.com/"> at the top of the HTML on the website. I notice that's not the case for the version of reference.html checked into GitHub tho.Comments
DmitryBaranovskiy
Wed Aug 05 22:22:41 -0700 2009
| link
Fixed. Thanks.
-
Hi,
I wanted to make multiple rotations on element like that:
element.rotate(-20 , 0 , 0).rotate(90, 10, 10)To do that, I suggest the following code:
Replace at line 1126
if (this._.rt.deg) { this.transformations[0] = ("rotate(" + this._.rt.deg + " " + cx + " " + cy + ")"); } else { this.transformations[0] = ""; }By
if (!this.transformations[0]) this.transformations[0] = ""; if (this._.rt.deg) this.transformations[0] += ("rotate(" + this._.rt.deg + " " + cx + " " + cy + ")");Regards,
Cedric
Comments
DmitryBaranovskiy
Mon Jul 27 16:51:25 -0700 2009
| link
What will happen with IE users?
Sorry... I was not aware of this IE's problem (one more).
I will use a rotation matrix.Thanks,
CedricUsefull with "text"
Raphael.el.mrotate = function (angle,cx,cy) {
var rad= 3.1418/180; var cosa = Math.cos(-anglerad); var sina = Math.sin(-anglerad); var tx = parseFloat(this.attrs.x) - cx;
var ty = parseFloat(this.attrs.y) - cy;
var newx = tx cosa + ty sina; var newy = tx -sina + ty cosa;
newx = newx + cx; newy = newy + cy;
this.attr({x: newx, y: newy});
return this; };
-
Enter the following code into http://raphaeljs.com/playground.html
paper.text(200, 50, "Testing 1,2,3").attr({"font-family": "serif", "font-size": "20pt"});Note that on FireFox, the text has serifs, while on IE it does not. Also tried "Helvetica", "Times New Roman", "Comic Sans", "Verdana". Basically font-family is not applied in IE at all.
Comments
DmitryBaranovskiy
Wed Jul 22 22:17:39 -0700 2009
| link
Fixed in dev version. Workaround is to put another set of quotes around font name: attr({"font-family": '"Georgia"'});
-
0 votes
Unable to reset stroke-dasharray to a solid line
2 comments Created 5 months ago by takamoriOn Firefox (v3, on Linux), setting a box's dasharray using
box.attr("stroke-dasharray", "- ");
works fine. However, trying to reset it to be a solid line is impossible.
box.attr("stroke-dasharray", "");
results in the code in the if (value) block for the SVG-specific addDashes to skip once the value lookup in dasharray is determined to be undefined. I have not tested to see if this is an issue for VML as well; but it appears at first glance to not be (it defaults dashstyle to "" when the dasharray lookup fails). My suggestion to fix this is to either:
1) make addDashes set a value for stroke-dasharray even if the dasharray lookup is undefined; or
2) add a specific entry in support of solid lines to the dasharray for both VML and addDashes, and make the VML not have a default value in its current form.In the meantime, the only workaround (without modifying the library code) is to replace the created SVG object with one without having stroke-dasharray set (meaning- create a new box, set appropriate attributes, destroy the old one).
Comments
DmitryBaranovskiy
Wed Aug 05 19:07:00 -0700 2009
| link
Will be fixed in 0.8.6 or 0.9, whichever comes first.
DmitryBaranovskiy
Wed Aug 05 22:04:43 -0700 2009
| link
Fixed.
-
Using the following test code at http://raphaeljs.com/playground.html
var t0 = new Date(); for (var i = 0; i < 500; i ++) { paper.rect(Math.random()*400, Math.random()*400, 10, 10).attr({stroke: "#f88", fill: "#f88"}); } var t1 = new Date(); paper.text(100, 100, "Time: "+(t1-t0)+" ms");Here are my results over several trials:
Browser Time (ms) Chrome 2.0.172.37 100 Firefox 3.5 825 Firefox 3.5.1 525 IE 8.0.6001.18783 17,500 IE 6.0.2900.2180.xpsp_sp2_gdr.090206-1233 28,000 In other tests I have seen some improvement by creating the canvas in a new element that isn't in the DOM tree, and then moving the canvas into the DOM tree after the objects are created, but there are still big differences between the speeds.
Of course I'm sure it's impossible to get all browsers to perform identically, but I'm submitting this issue because I believe that the very high numbers for IE may be due to a bug in Raphael's VML processing. More research will be necessary to confirm this.
Comments
After some experimentation, I have found that the problem lies in the top-level vml group element that Raphael creates. IE tends to slow down when the group element contains large numbers of sub-elements.
I was able to improve speed greatly in simple test cases by removing the top-level group element entirely. So far I'm unable to patch Raphael to do this, because there's a lot of crazy group code in there that I don't understand.
sbj42
heres a cross reference to the issue. Maybe it ties in with your research?
http://github.com/DmitryBaranovskiy/raphael/issues/closed/#issue/13
DmitryBaranovskiy
Wed Aug 12 16:21:44 -0700 2009
| link
top level group has been removed. Didn’t notice any performance improvements. Not on this test anyway.
Raphael 0.8.6 resolves this issue for me. Running the test again, I get these results:
Browser Time (ms) Chrome 2.0.172.39 320 Firefox 3.5.2 185 IE 8.0.6001.18813 802 IE 6.0.2900.2180.xpsp_sp2_gdr.090206-1233 2,500 Note that the versions on most of those browsers are different from the original test, so this isn't a perfect re-test of the issue. I didn't mention it in my original post, but I think the Raphael version for the first test was 0.8.2.
DmitryBaranovskiy
Thu Sep 17 20:08:19 -0700 2009
| link
Improved in 1.0. It will never be perfect, but I will close issue.
-
0 votes
To Dmitry Baranovsky: Is Raphael Compatible with Adobe AIR?
3 comments Created 5 months ago by FlipOneHi Dmitry,
Does Raphael run well in Adobe AIR? If not, is this something you are or will work on soon?
Thanks!
Comments
DmitryBaranovskiy
Wed Jul 22 22:25:22 -0700 2009
| link
I have no idea.
I will not look into it any time soon. In Adobe AIR you have Flash™ anyway. You don’t need SVG then.Hi Dmitry,
I really thank you so much for your reply. I've been posting wherever I could to find out more about Raphael with Adobe AIR. At least now I know Raphael and AIR haven't been tested together by you.
I'm a Javascript programmer using Javascript/HTML/CSS, not ActionScript, in Adobe AIR. I'm evaluating a number of graphics libraries, including Raphael, for use in a commercial application currently in its pre-alpha development phase. Why Javascript? This commercial application also targets iPhone and Android as deployment platforms, where Javascript code can be reused.
I hope you'll be able to find time to enhance Raphael so that it will be compatible and will work with Adobe AIR. There are many HTML/CSS/Javascript developers now developing apps for Adobe AIR. If Raphael can work smoothly in Adobe AIR, I'm sure you'll have a huge user-base for Raphael.
Thanks again for responding to my message. I really appreciate it.
All the best,
Oscar
DmitryBaranovskiy
Wed Aug 05 19:08:46 -0700 2009
| link
It looks like Adobe AIR Webkit doesn’t have support for SVG. In this case there no way to make Raphaël work there.
-
Running Graffle sample app in Adobe AIR generates the error "TypeError: Value undefined does not allow function calls" on line 2137 of the UN-minified Raphael 0.8.2, AND "ReferenceError: Can't find variable: Raphael".
Comments
DmitryBaranovskiy
Wed Aug 05 18:57:40 -0700 2009
| link
Adobe AIR is not supported.
-
Dmitry,
I hope your not phased by the Google initiative on SVG...Any way, the below did not have an affect on "font-size" when run in FF 3.0.11 but works as expected in IE
var text1 = paper.text(200,100,'Version 2',60);
text1.attr({fill:'black', 'font-size':60, rotation:340, 'stroke-width':2, stroke:'red', x:200, y:100 });var text2 = paper.text(200,150,'Version 2',60);
text2.attr({fill:'black', 'font-size':60, 'stroke-width':2, stroke:'red', x:200, y:100 });Comments
I believe this is not a bug. You should use a unit when you specify the font-size, as in "60pt" or "60px".
It looks like when you fail to provide a unit in IE , it assumes "px", whereas in Firefox it ignores the setting.
DmitryBaranovskiy
Wed Aug 05 18:46:22 -0700 2009
| link
fixed
-
When dragging objects in Firefox 3.5, the first attempt at dragging is successful. Subsequent attempts at dragging the same object fail however: rather than dragging an object, a "ghosted" square is pulled away from the object. When the mouse button is released, the object then snaps to the position of the mouse cursor and will be dragged around. The mouse button must then be clicked again to release the object.
This occurs in all Raphael examples hosted on the Raphael site that involve any sort of dragging. I noticed this in Firefox 3.5 on Mac OSX 10.5.7. Cannot reproduce the problem in Safari 4.
Comments
Dmitry,
this might help..
http://groups.google.com.au/group/raphaeljs/browse_thread/thread/c6f636ac7c366d5?hl=en-GB
DmitryBaranovskiy
Wed Aug 05 18:58:04 -0700 2009
| link
This is demo script bug, not library bug. Fixed.
-
0 votes
Rotated Path in FF AND IE needs to be synchronised
1 comment Created 6 months ago by chasbeenWow Rap 0.8.2
Now your talking, so it occurs to me this might be ok, however I just tested in playground and if thats looking at the latest version. It's not..Run this in playground in IE and FF
paper.path({"fill": Raphael.getColor(), "stroke": "none"}).moveTo(150,200).arcTo(50, 50, 0, 0, 250, 200).andClose();
paper.path({"fill": Raphael.getColor(), "stroke": "none"}).moveTo(150,200).arcTo(50, 50, 0, 0, 250, 200).andClose().attr("rotation",180);Comments
DmitryBaranovskiy
Wed Jul 22 22:55:40 -0700 2009
| link
Duplicate of issue 1
-
I'm finding it difficult to get consistent results from Raphael paths in FF and IE. Consider the following test script:
<script type="text/javascript" src="raphael.js"></script> <body> <div id="x" style="width: 200px; height: 200px"> </div> <script type="text/javascript"> var r = Raphael("x", 60, 60); r.rect(-10, -10, 80, 80).attr("fill", "#ddd"); r.path({"stroke-width": 1}, "M 1 1 L 50 1"); r.path({"stroke-width": 1}, "M 1.5 5.5 L 50.5 5.5"); r.path({"stroke-width": 2}, "M 1 10 L 50 10"); r.path({"stroke-width": 2}, "M 1.5 15.5 L 50.5 15.5"); r.path({"stroke-width": 3}, "M 1 20 L 50 20"); r.path({"stroke-width": 3}, "M 1.5 25.5 L 50.5 25.5"); </script>The semantics of lines are not specified in the Raphael documentation, and they appear to be different for SVG and VML. I would expect Raphael to smooth out these differences. For instance, is a line centered on the pixel boundaries (i.e. on the top-left corner of the pixel), or is it centered in the center of the pixel. Every line looks different between FF and IE:
r.path({"stroke-width": 1}, "M 1 1 L 50 1");- In FF: two half-pixel lines from 1,0 and 1,1 to 49,0 and 49,1
- In IE: a full pixel line from 3,2 to 50,2, with two partial pixels at 2,2 and 51,2
r.path({"stroke-width": 1}, "M 1.5 5.5 L 50.5 5.5");- In FF: a full pixel line from 2,5 to 49,5, with two partial pixels at 1,5 and 50,5
- In IE: a full pixel line from 4,7 to 51,7, with two partial pixels at 3,7 and 52,7
r.path({"stroke-width": 2}, "M 1 10 L 50 10");- In FF: two full-pixel lines from 1,9 and 1,10 to 49,9 and 49,10
- In IE: a full pixel from 3,11 to 50,11, with partial pixels all around it
...and so on. Try running that code above in different browsers and blow up the screenshots to see what I mean.
There appear to be a few problems:
- In IE, the Raphael object is 61x61 (not 60x60) and all the positions are offset by +1,+1 (could this be padding in the top-level VML element?).
- In IE, all pixel positions are rounded to the nearest integer.
- In both IE and FF, the lines appear to be centered around the top-center edge of the pixel.
So if you want a solid full-pixel line in FF, you need to add 0.5 to the y coordinate (after accounting for half the stroke width), and if you want the same in IE you just can't have it. All these issues apply as well to the rect function, I did not test circle/ellipse/text/image.
I believe this is a bug in Raphael, that it doesn't present a consistent API for putting lines where you want them.
Comments
Note: I believe this can be improved by adding a "transform: translate(0,0.5)" to the top-level SVG element in the Raphael code. That will help FF integer-based lines match up with IE.
In my own non-raphael code I use translate(0.5,0.5), but Raphael appears to have some other coordinate wackiness that I don't yet understand.
DmitryBaranovskiy
Wed Aug 05 19:00:32 -0700 2009
| link
The problem is big. I would say IE has a lot of issues with it rounding problem. Not all of them cold be fixed. In theory I could make Raphaël look consistently ugly in all browsers, but I prefer to leave ugliness for IE only.
-
0 votes
Scaling text doesn't work unless it's changing directions
2 comments Created 6 months ago by gyoshikiHi,
Thanks for cool library.
I wanted to do something like paper.text(0, 0, "foo").scale(1, 0.5); to scale the height of font to half but I found out Raphael doesn't do anything for text.scale unless either dirx or diry is -1. So I hacked it a little bit to make it do what I wanted it to do.
The patch is against Raphael v 0.8. It worked for me on Firefox 3.5RC3 and Safari 4.0. I don't know what I should do when transform is false so that part of the code is not in this patch.
--- raphael.js~ 2009-06-27 19:53:37.000000000 +0900 +++ raphael.js 2009-06-28 10:43:15.000000000 +0900 @@ -2438,7 +2438,7 @@ this.attr({path: path.join(" ")}); break; } - if (this.type in {text: 1, image:1} && (dirx != 1 || diry != 1)) { + if (this.type == "image" && (dirx != 1 || diry != 1)) { if (this.transformations) { this.transformations[2] = "scale(".concat(dirx, ",", diry, ")"); this.node.setAttribute("transform", this.transformations.join(" ")); @@ -2453,7 +2453,18 @@ ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')"); s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || ""); } - } else { + } else if (this.type == "text") { + this.transformations[2] = "scale(".concat(x, ",", + y, ")"); + this.node.setAttribute("transform", this.transformations.join(" ")); + dx = a.x / x; + dy = a.y / y; + dx = (dirx == -1) ? dx - (neww || 0) : dx; + dy = (diry == -1) ? dy - (neww || 0) : dy; + this.attr({x: dx, y: dy}); + a.fx = dirx - 1; + a.fy = diry - 1; + } else { if (this.transformations) { this.transformations[2] = ""; this.node.setAttribute("transform", this.transformations.join(" "));Comments
DmitryBaranovskiy
Wed Jul 22 22:58:18 -0700 2009
| link
What about IE?
-
0 votes
Newer gradient syntax? Appears more compatible But..
2 comments Created 6 months ago by chasbeenD
//Works in ie AND ff NO PROBLEM var c = paper.circle(150,350,60);
c.attr({stroke:'none',gradient: "90-black-red"})//Works in ie but black in ff var c = paper.circle(150,350,60);
c.attr({stroke:'none',gradient: "90-#fff[-red[:50%]]-#000"});Comments
DmitryBaranovskiy
Wed Jul 22 22:28:39 -0700 2009
| link
Use it without brackets:
paper.circle(150,350,60); c.attr({stroke:'none',gradient: "90-#fff-red:50%-#000"});
-
I'm not sure if you are fully supporting this syntax but here goes..
With ie you get a verticle gradient and with ff it's horizontal..var c = paper.circle(150,350,60);
c.attr({stroke:'none', gradient:{ type:"linear", dots:[{ offset:"10%", color:"#f5f5f5" },{ offset:"40%",
color:"#e5e5e5" },{offset:"90%", color:"#d5d5d5" }] }});Also if you replace "linear" with "radial" you get a partial gradient but the centre is blank in ie (works in ff)
Comments
DmitryBaranovskiy
Wed Jul 22 22:30:49 -0700 2009
| link
This syntax is not documented, so it is not exists. :)
-
Firefox 3.0.11
i am loading both prototype and jquery libraries prior to loading raphael 0.8. jquery is in noconflict mode. i don't know if any of that matters, but providing it just in case.i'm using the uncompressed raw file for ease of hunting down issues.
when i load up 0.8 in FF i get this error:
Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://local.www.sqibl.com/js/raphael.0.8.js :: anonymous :: line 1135" data: no]
Source File: http://local.www.sqibl.com/js/raphael.0.8.js
Line: 1135when i click through, the offending line it takes me to is actually line 1136 which is:
var bbox = this.node.getBBox();Comments
My guess is that this is happening because you haven't added the node to the DOM tree yet. Make sure that the element you have put Raphael in is attached to the document before you call getBBox.
Could you show how to fix this in http://raphaeljs.com/analytics.html ?
Unfortunately, no. I ran it and saw the error, but I can't get a stack trace to see who is calling getBBox. I think it's in the jquery code which is obfuscated. Basically I would suggest coming up with a simpler test case.
After reducing the code to something simpler, it appears that the error happens when changing the attr of a text which is hidden. After retrying is different browsers, the error seems to happen both on Firefox, and webkit (epiphany), but not on IE (so discard my previous comment about IE).
Here is a simple snippet for http://raphaeljs.com/playground.html :
var txt = {"font": '12px "Arial"', stroke: "none", fill: "#000"};var label = [];
label[0] = paper.text(60, 10, "text 0").attr(txt).hide();
label[1] = paper.text(60, 30, "text 1").attr(txt).hide();
label[2] = paper.text(60, 50, "A pity").attr(txt);
label[0].show().attr({text: "text 0 works" });
label[1].attr({text: "text 1 does not work" }).show();
label[2] = paper.text(60, 70, "really a pity").attr(txt);
This may or may not be a bug in Firefox, but I believe the following change works around this issue:
In Raphael 0.8.2, replace lines 1085 and 1086 with these lines:
// In Firefox, getBBox fails if the node is hidden var oldDisplay = node.style.display; node.style.display = "block"; var bb = el.getBBox(), dif = a.y - (bb.y + bb.height / 2); node.style.display = oldDisplay;Another possibility might be to convert the show()/hide() functions so that they use node.style.visibility ("hidden" / "visible") instead of node.style.display ("block" / "none"). I haven't tested that, but it might work.
DmitryBaranovskiy
Wed Aug 05 18:46:00 -0700 2009
| link
I applied the fix, but it still cause an error if the whole canvas is display:none. Not sure how can I workaround this.
Issue is calling getBBox even when we are using a text element, you'll notice my fix...which does work, tested in IE/FireFox/Opera
Element.prototype.hide = function () { this.node.style.display = "none"; //this.node.style.visibility = "hidden"; return this; }; Element.prototype.show = function () { this.node.style.display = "block"; //this.node.style.visibility = "visible"; return this; }; Element.prototype.IsVisible = function () { return this.node.style.display == "block"; } Element.prototype.remove = function () { this.node.parentNode.removeChild(this.node); }; Element.prototype.getBBox = function () { var hide = false; if (!this.IsVisible()) { this.show(); this.node.style.display = "block"; hide = true; } var bbox = {}; if (this.type == "text") { bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0}; for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) { var bb = this.node.getExtentOfChar(i); (bb.y < bbox.y) && (bbox.y = bb.y); (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y); } } else { bbox = this.node.getBBox() } if (hide) {this.hide(); this.node.style.display = "none"} return bbox; }; -
0 votes
I am currently studying all these attributes on all the primitives, so this is similar to the rounded corners for rectangles.
PLAYGROUND CODE BELOW
ellipse = paper.ellipse(300,150,30,40);
ellipse.animate({'rx': 50, 'ry': 70, 'x': 400, 'y': 350},2000);
circle = paper.circle(100, 200, 45);
circle.animate({'r': 45, 'cx': 200, 'cy': 300},2000);Comments
This one is sort of expected. You can animate a circle to move but not an ellipse currently.
DmitryBaranovskiy
Sun Jun 21 19:12:02 -0700 2009
| link
You should use “cx” and “cy” for ellipse. Not “x” and “y”.
-
0 votes
animate not working for attribute x and y on ellipse
1 comment Created 6 months ago by chasbeenI am currently studying all these attributes on all the primitives, so this is similar to the rounded corners for rectangles.
PLAYGROUND CODE BELOW
ellipse = paper.ellipse(300,150,30,40);
ellipse.animate({'rx': 50, 'ry': 70, 'x': 400, 'y': 350},2000);
circle = paper.circle(100, 200, 45);
circle.animate({'r': 45, 'cx': 200, 'cy': 300},2000);Comments
-
0 votes
Rectangle with height=0 causes "Out of memory" error in IE
1 comment Created 6 months ago by netnicholsUsing the 0.8 branch, creating a rectangle with height=0 causes an "Out of memory" error in IE.
canvas.rect(0, 0, 10, 0);The seems to be the result of infinite recursion in the function
Element.prototype.setBoxComments
DmitryBaranovskiy
Wed Aug 05 18:57:09 -0700 2009
| link
Can’t reproduce. Hopefully fixed.
-
v8Text=paper.text(200, 200, 'Version 8.0?').attr('font-size',70).attr('fill','black').attr('stroke','red').attr('stroke-width',2);
v8Text.node.onclick = function () { alert('hi - No message from ie/vml'); };Comments
DmitryBaranovskiy
Wed Jun 10 23:16:32 -0700 2009
| link
It is bad idea to attach events to text in general. In some implementations you could click through the letters. Try v8Text.textpath instead of node for IE.
DmitryBaranovskiy
Wed Aug 05 18:53:30 -0700 2009
| link
as said
-
The second line works in playground but lines 1 & 3 seem to ignore the "r" attribute..
paper.rect(100, 100, 365,200,10).attr('stroke', "blue").attr('r', 20)
paper.circle(280, 200, 45).attr('stroke', "red").attr('r', 20);
paper.rect(100, 100, 365,200,20).attr({r: 30}); // using params objectC
Comments
DmitryBaranovskiy
Wed Jun 03 22:25:02 -0700 2009
| link
Fixed on 0.8 branch
-
The second line works in playground but lines 1 & 3 seem to ignore the "r" attribute..
paper.rect(100, 100, 365,200,10).attr('stroke', "blue").attr('r', 20)
paper.circle(280, 200, 45).attr('stroke', "red").attr('r', 20);
paper.rect(100, 100, 365,200,20).attr({r: 30}); // using params objectC
Comments
-
I appears that the line:
R.type = (window.SVGAngle ? "SVG" : "VML");
is failing on Safari 3.0.4 (OSX 10.4.11), causing all sorts of problems, as Raphael treats it as supporting VML instead of SVG.I've changed the line to:
R.type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
as suggested here:
http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
which seems to be working well so far, will test some more & provide a patch unless anyone has any better ideas?Comments
lindsayevans
Wed May 20 22:24:07 -0700 2009
| link
I've forked Raphael & applied my fix:
http://github.com/lindsayevans/raphael/commit/11cc8e9349ba400c7812f5cdfabcfbb2261aa257Beeing that my Git-Fu is weak, I have no idea what I'm meant to do with it now :p
Tested in:
Safari 3.0.4, OSX 10.4.11
Safari 3.2.1, OSX 10.4.11
Safari 3.2.1, Windows XP
Firefox 3.0.10, Windows XP
Firefox 2.0.0.20, Windows XP
Opera 9.6.4, Windows XP
Internet Explorer 6.0.2900, Windows XP
Internet Explorer 7.0.5730, Windows XP
Internet Explorer 8.0.6001, Windows XP
Internet Explorer 8.0.6001, Windows XP (in Compatibility View)
DmitryBaranovskiy
Wed Jun 03 22:23:29 -0700 2009
| link
Applied
-
I was using Raphael to draw more than 40 shapes (circles, rectangles,paths...) and noticed that in IE the screen took close to 2 sec to render meanwhile in any other browser using SVG it took only about 100ms or so. The 2 sec is a very long time so I decided to investigate more. I created a test page where I drew 40 rectangles using raphael js and another page producing exactly same result and identical markup using directly VML and the result was around 700ms in Raphael and around 120 ms in the VML. So I looked into the implementation of Raphael to see if the performance of the VML code could be improved. I realized that majority of the time was spent in the setBox method while setting the width, height,top,left styles for the shape and the group element. After comparing my test code with the Raphael.js I realized that by first setting the styles (calling the setBox) and afterwards appending the group and shape to the DOM tree the rendering time gets cut by at least 60%. What that boiled down to was just in all the methods (theCircle, theRect,theEllipse ... ) moving the following statements:
g.appendChild(o);
vml.canvas.appendChild(g);
after the call to the setBox method (res.setBox(...)).
This first enables to set the dimensions and positioning to the style before adding the shape to the DOM and seems to improve the performance by a significant amount, unfortunately nowhere close the other browsers( using the SVG) but 1 sec in my case is better than 2 seconds. Haven't done any further investigation so far but there could possibly be other places where similar approach could be taken to shave off few more milliseconds.Comments
I don't think theres a better example than this than the world map I did.
It's currently been hit at least 500 times and therefore asttempts to draw 500 tiny circles.
The rendering time is at least 15 seconds for ie and nearly nothing with FF ETC
If this can be fixed by (what seems) to be a small change then that would be wonderful..
Thanks guys
http://www.irunmywebsite.com/raphael/worldmap.html
DmitryBaranovskiy
Sun Jun 21 19:12:41 -0700 2009
| link
This is applied in 0.8
-
0 votes
opacity : 0 leaves remnents when used in the below animation in ie6 and probably 7
1 comment Created 7 months ago by chasbeenD
It leaves little red lines which are the bottom of the g's and 'j'.
This happens in ie6 and I think it's like that in 7. Not tested in 8 yet...var txt = paper.text(400, 100, 'Drag and Drop Selected Objects').attr('fill', '#f00').attr("font-size",30);
txt.animate({opacity : 0},3000);Comments
DmitryBaranovskiy
Wed Aug 05 18:52:23 -0700 2009
| link
Looks like some rendering issue in IE. Too small to bother.
-
paper.path({stroke: "red"}).moveTo(200, 300).qcurveTo(250,300,400,500);
Comments
Don't know why this is looks "closed", it's still broken.
I think it has to do with the "qb" path command not working in IE's VML
DmitryBaranovskiy
Wed Jul 22 22:52:32 -0700 2009
| link
It is broken. There is huge bug in VML. Can’t find workaround so far.
I believe it can be resolved by converting the quadratic curve into a cubic one.
The quick-and-dirty workaround would be to just use the single control point twice. This would not be correct, but it would be better to draw an incorrect curve than no curve at all.
The complete fix can be done by computing the two control points for the cubic. See the "Transforming a quadratic Bezier in a cubic Bezier" part of this page: http://caffeineowl.com/graphics/2d/vectorial/bezierintro.html
The formula is basically:
C1 = 2/3•C + 1/3•P1 C2 = 2/3•C + 1/3•P2 -
I was implementing a variation of the graffle drag and drop and this one concerns the functionality where the shape darkens once it has been selected and then "looses" it's colour once it's dropped.
It is quite easy to see on a white background although you can see the difference with the black background at when comparing FF with IE
http://raphaeljs.com/graffle.html
The area of code in the script is...
document.onmouseup = function () { isDrag && isDrag.animate({"fill-opacity": 0}, 500);Comments
DmitryBaranovskiy
Wed Aug 05 18:49:58 -0700 2009
| link
Default fill is different between SVG and VML. When you say fill: "none" and then change fill-opacity it uses default values.
-
I did an acid test which indicated the problem
paper.circle(450,350,100).attr("fill", "red").attr("fill-opacity", 0.2);
paper.circle(450,450,100).attr("fill", "red");The bug is not in the SVG syntax support, but on the path interpretation on IE.
Users are using arcTo which is not yet documented as a work around.
paper.path({"fill": "red", "fill-opacity": 0.2}).moveTo(450,250).arcTo(180, 180, 1, 0, 0, 200).andClose();
Vincent originally did a bit on this..
Comments
DmitryBaranovskiy
Thu Apr 23 18:20:07 -0700 2009
| link
Fixed. 0.7.4
-
Try the below in the "Playground" on the website in IE7 (Not tested in 6). It will only print out a small part of the string (203 characters). I tried many strings this one gets as far as "Image
controlled"paper.text(200, 100, "Discription: 360º Rotated image appearing from within 'path drawn' image...\nComponents:Box drawn using path, image alpha channel for varied background.\nFeatures:Box drawn using paths. Image controlled using translate(x px,y px),\nrotate(nº) and object 'layering' using object1.insertAfter(object2).......\nCode:\nboxSide1 = paper.path({fill: ~#d7d7ff~}, );\nboxSide2 = paper.path({fill: ~#afafde~}, );\nboxSide3 = paper.path( {fill:~#8686bf~}, ); \n/Group the 'Sides'/\nvar st = paper.set();\nst.push(boxSide1); \nst.push(boxSide2);\nst.push(boxSide3);\n/Place Box as a single unit/\nst.translate(309, 166);\nPerformance:\nSmooth on IE6+,Safari 3.2+ and Minor flow problems on Firefox 3.0.7+ Opera 9.6.3+\nNot recommended for IE <=5.5 and <=Firefox 2.3");
Comments
DmitryBaranovskiy
Thu May 07 21:39:53 -0700 2009
| link
Probably was fixed. Can’t reproduce.
-
Below is a test I was running to discover the details of a path that I
am moving. It looks like IE (at least 6) produces an "undefined"
before the path detail.Base Test
prompt("path",ePath.attr("path"));FF3.0.8
M350.000 273.301 L375.000 316.603IE6
undefinedM350,273.30127018922195L375,316.60254037844384Comments
DmitryBaranovskiy
Thu Apr 23 18:19:30 -0700 2009
| link
Can’t reproduce. Could you give me whole code?
D
Run the below code in playground in IE 6 OR 7.
Notice that the Green path text is prefixed with "undefined" when you click the dial face.function getRadians(angle) { return ((angleMath.PI) / 180); }
var clickCount=0;
var degreeIncrement=30;
var radius1=10; //For the hypotenuse of the right angled triangle of the inner radius
var radius2=100; //For the hypotenuse of the right angled triangle of the outer radius
var nextDegrees=0, width = 5, cx = 325,cy = 200;
var innerRadiusX=0.00,innerRadiusY=0.00,outerRadiusX=0.00,outerRadiusY=0.00;
/Redrawn (Green path) preparation:-Use trigonometry to work out the path data/ var pathParams = {stroke: "GREEN", "stroke-width": width, "stroke-linecap": "round"};
nextDegrees=clickCountdegreeIncrement;
innerRadiusX = radius1 Math.cos(getRadians(nextDegrees));
innerRadiusY = radius1 Math.sin(getRadians(nextDegrees));
outerRadiusX = radius2 Math.cos(getRadians(nextDegrees));
outerRadiusY = radius2 Math.sin(getRadians(nextDegrees));
reDreawnP=paper.path(pathParams).moveTo(cx + innerRadiusX , cy + innerRadiusY).lineTo(cx + outerRadiusX , cy + outerRadiusY).rotate(0,cx,cy);var clickedShow=paper.text(325, 20, "Count : " + clickCount).attr("font-size", 20).attr("fill", "BLUE");
var pathMessage=paper.text(325, 50, "Red Path:").attr("font-size", "12").attr("fill", "RED");
var pathMessage2=paper.text(325, 60, "Green Path:").attr("font-size", "12").attr("fill", "GREEN");function setNextView()
{ clickCount++;clickedShow.remove();clickedShow=paper.text(325, 20, "Count : " + clickCount).attr("font-size", 20).attr("fill", "BLUE");
P1.rotate(20*clickCount,325,200);
pathInfo=P1.attr("path");
var pathInfo = pathInfo.replace("undefined", "");
pathMessage.remove();pathMessage=paper.text(325, 50, "Red Path:" + pathInfo).attr("font-size", "12").attr("fill", "BLUE");nextDegrees=clickCountdegreeIncrement;
innerRadiusX = radius1 Math.cos(getRadians(nextDegrees));innerRadiusY = radius1 Math.sin(getRadians(nextDegrees));
outerRadiusX = radius2 Math.cos(getRadians(nextDegrees));outerRadiusY = radius2 Math.sin(getRadians(nextDegrees));
reDreawnP.remove();reDreawnP=paper.path(pathParams).moveTo(cx + innerRadiusX , cy + innerRadiusY).lineTo(cx + outerRadiusX , cy + outerRadiusY);
pathInfo=reDreawnP.attr("path");
/***IE bug removes the undefined from the return string of the NEW path
var pathInfo = pathInfo.replace("undefined", "");*****/ pathMessage2.remove();pathMessage2=paper.text(325, 60, "Green Path:" + pathInfo).attr("font-size", "12").attr("fill", "GREEN");
} P1=paper.path({stroke: "RED", "stroke-width": 5, "stroke-linecap": "round"}).moveTo(325, 200).lineTo(225, 200);
C1=paper.circle(325, 200, 10).attr("fill", "RED");
C2=paper.circle(325, 200, 100).attr("stroke","RED").attr("fill", "YELLOW");
paper.text(325, 380,"Click the dial to rotate the indicators.\nThe red one is 'rotated', the green one is replaced each time.\nThat's why the path information for the green indicator changes after each click.").attr("fill", "RED").attr("font-size", 16);
C2.insertBefore(P1);
C2.insertBefore(reDreawnP);
P1.insertBefore(C1);
C1.node.onclick = function () { setNextView() }
C2.node.onclick = function () { setNextView() }The above does not look easy to read better would be to follow the below steps:
(1)http://www.irunmywebsite.com/raphael/perfora.html (2)Click the "Path Indicator guage" yellow box. (3)Click the Orange "Execute this Code" (4)Comment out the following code line and rerun the script. var pathInfo = pathInfo.replace("undefined", "");
(5)Look at the green path information at the top of the demo -
0 votes
Re: 0.7.3 over 0.7.2 introduced bug with getBBox
2 comments Created 8 months ago by chasbeenThis is simplified code as you can see it makes a pretty yellow
background for any text.This worked consistently cross browser with 0.7.2 but went South with 0.7.3
(FF does it ok still but IE noooo)var t = paper.text(300, 230, "Out of the box ");
var x=t.getBBox().x;
var y=t.getBBox().y;
var c = paper.rect(x, y, t.getBBox().width , t.getBBox().height, 10);
c.attr({fill : "yellow"});
c.insertBefore(t);Comments
DmitryBaranovskiy
Thu Apr 23 18:18:59 -0700 2009
| link
Fixed. 0.7.4
Worked on testing upgraded website:
http://www.irunmywebsite.com/raphael/raphaelsource.html
-
To fix it, just add it in available attributes:
@@ -15,7 +15,7 @@ return create.apply(R, arguments); }, paper = {}, - availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0}, + availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-weight": "normal", gradient: 0, height: 0, href: "http:// raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke- miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", 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: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"}, events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"]; R.version = "0.7.3";Comments
DmitryBaranovskiy
Thu Apr 23 18:18:50 -0700 2009
| link
Applied. 0.7.4 +font-style
-
0 votes
Patch to fix text bounding box computation on IE.
1 comment Created 8 months ago by vjauneauThis patch avoid some problems on bbox computation when you got style
on span element.
e.g:
http://vincentjauneau.com/raphael/tests/span.html@@ -1628,6 +1628,10 @@ if (res.type == "text") { var span = doc.createElement("span"), s = span.style; + s.padding = 0; + s.margin = 0; + s.lineHeight = 1; + s.display = "inline"; res.attrs.font && (s.font = res.attrs.font); res.attrs["font-family"] && (s.fontFamily = res.attrs ["font-family"]); res.attrs["font-size"] && (s.fontSize = res.attrs ["font-size"]);Comments
DmitryBaranovskiy
Thu Apr 23 18:18:31 -0700 2009
| link
Applied. 0.7.4
-
Please check this example:
http://vincentjauneau.com/raphael/tests/test.htmlIt's really frustrating to try to align texts with other elements
cause it's not well placed.Comments
I made quick and dirty fix that make better text positioning:
@@ -996,11 +996,7 @@ height += fontSize * leading; } } - height -= fontSize * (leading - 1); - var dif = height / 2 - fontSize; - if (dif) { - element.node.setAttribute("y", element.attrs.y - dif); - } + element.node.setAttribute("y", element.attrs.y + element.getBBox ().height); @@ -1638,7 +1638,8 @@ res.W = res.attrs.w = span.offsetWidth; res.H = res.attrs.h = span.offsetHeight; res.X = res.attrs.x; - res.Y = res.attrs.y + Math.round(res.H / 2); + res.attrs.y += Math.round(res.H / 3); + res.Y = res.attrs.y;
DmitryBaranovskiy
Thu Apr 23 18:18:00 -0700 2009
| link
This patch wouldn’t work if text has multiple lines. Also, Vincent, it would be awesome if you just fork the project and apply patches this way.
DmitryBaranovskiy
Wed Jun 03 22:23:59 -0700 2009
| link
This is fixed on 0.8 branch
-
example:
http://vincentjauneau.com/raphael/tests/path-bb.htmlIn this example, the path is a blue half circle and the bounding box
representation is in transparent green.In the source code in thePath() method the setBox() method call is
commented.Comments
DmitryBaranovskiy
Sun Aug 23 20:27:14 -0700 2009
| link
Is fixed in 1.0
DmitryBaranovskiy
Thu Sep 17 20:07:48 -0700 2009
| link
fixed
){kind=link}
In my graphic library I often use points variables - i.e. [x, y] -.
It helps in many cases, to pass parameters to functions but also to swap x and y without a temporary variable when working on graphs regardless of rendering orientation.
Now for Raphael that would be a major API change. I would not be opposed to it but other people may disagree. The dilemma could be solved with some compatibility mode - e.g. if an array is passed as a parameter assume a point, otherwise coordinates as before -.
What if you have [x,y,width,height]? What if you have {x:x, y:y} or {x:x, y:y, width: width, height: height} ? Too many cases, too much code. I will leave it as is.
I agree with you Dmitry, there are many more important issues.