Issues with 1.2.4 version?

[vswamina]

Hi,

I have posted the following issue http://github.com/DmitryBaranovskiy/raphael/issues/#issue/87
do others face similar issue with 1.2.4 version?

Everything works normal and as expected in 0.8.

[Dmitry Baranovskiy]

There was a significant change in API in version 1.0

2009/11/30 vswamina <vignesh...@gmail.com>:

--
Best regards,
Dmitry Baranovskiy
http://dmitry.baranovskiy.com

[vswamina]

Thanks Dmitry, I have altered accordingly works fine now.

There are just three issues more, it would be great if you can check
them out as well.

1. Bounding box for a path with curve is not calculated correctly (all
browsers), the following code can show

c = paper.path("M140,240 L140,200 110,200 C110,110 190,110 190,200
L160,200 160,240");
c.paper.rect(c.getBBox().x,c.getBBox().y,c.getBBox().width,c.getBBox
().height);
(or)
c = paper.path("M50,250 Q-30,100 50,150 100,230 150,150 230,100 150,50
100,-30 50,50");
c.paper.rect(c.getBBox().x,c.getBBox().y,c.getBBox().width,c.getBBox
().height);

Notice that the bounding rectangle does not cover the shape fully


2. For IE7 (have not checked in IE8), the rounded rect does not seem
to apply the stroke parameter.

3. For IE7 a rounded rect when scaled continously say based on mouse
action, at some point loses the rounded corner and becomes a normal
rectangle.

Thanks

On Nov 30, 5:11 am, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:

> There was a significant change in API in version 1.0
>

> 2009/11/30 vswamina <vignesh.swam...@gmail.com>:
>
>
>
> > Hi,
>
> > I have posted the following issuehttp://github.com/DmitryBaranovskiy/raphael/issues/#issue/87

[vswamina]

Also checked out the stroke issue, it works.

Only the bounding rect seems to be now the only problem.

Thanks

[gvt]

So what was the API change?
I have having this issue also

[charles thomas]

http://raphaeljs.com/reference.html#path --- On Mon, 11/30/09, gvt <greg...@gmail.com> wrote:

The new Internet Explorer® 8 - Faster, safer, easier. Optimized for Yahoo! Get it Now for Free!

[vswamina]

The bounding box is still an issue. Try the following code in the
Raphael playground

http://raphaeljs.com/playground.html

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

The issue seems to be in the curveDim function at line 620

Is there a better way to get the dimensions of any shape than use the
getBBox() function?

Thanks

[charles thomas]

V getBBox does work with conventional primitives but does not with paths containing quadratic/cubic curves (1.2.4), WORKS 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);

I entered it as a bug, Unless someone else has an idea how to work out the bounding box with the path data? --- On Mon, 11/30/09, vswamina <vignesh...@gmail.com> wrote:

From: vswamina <vignesh...@gmail.com> Subject: Re: Issues with 1.2.4 version? To: "Raphaël" <raph...@googlegroups.com>

All new Yahoo! Mail - Get a sneak peak at messages with a handy reading pane.

[vswamina]

Thanks Charles

It works perfectly well for everything else including polygons with
straight lines, as you said the issue seems to be only with curves.
This was/is working perfectly as expected in 0.8.6 though.

It is great to see this forum so active, I hope I will soon be able to
contribute than just ask

V

[vswamina]

Ok, I think I have my first contribution! The getBBox() problem is
solved. The patch below to pathDimensions function does the trick. I
have tested successfully in IE7, Ch3, FF3, Sf4. I am not a JS guru so
hope you guys can perfect it.

Issues:
1. In pathDimensions function, always the first point in the path was
passed to curve dim as x1,y1 where curveDim takes
(x1,y1,c1x,c1y,c2x,c2y,x2,y2). This has to be changed to x2,y2 of the
previous curve.
2. curveDim function calculation is wrong I guess. I have replaced
that by determining the right points by using the formula to draw a
cubic bezier from this link
http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/

Here is the changed function,

var pathDimensions = cacher(function (path) {
if (!path) {
return {x: 0, y: 0, width: 0, height: 0};
}
path = path2curve(path);
var x = 0,
y = 0,
X = [],
Y = [],
x0 = 0,
y0 = 0;
;
for (var i = 0, ii = path[length]; i < ii; i++) {
if (path[i][0] == "M") {
x = path[i][1];
y = path[i][2];
X[push](x);
Y[push](y);
} else {
//var dim = curveDim(x, y, path[i][1], path[i][2], path
[i][3], path[i][4], path[i][5], path[i][6]);
var x0, y0;
if(x0 == 0 && y0 == 0){
x0 = x;
y0 = y;
}else{
x0 = path[i-1][5];
y0 = path[i-1][6];
}
var dim = _curveDim(x0, y0, path[i][1], path[i][2],
path[i][3], path[i][4], path[i][5], path[i][6]);
X = X[concat](dim.min.x, dim.max.x);
Y = Y[concat](dim.min.y, dim.max.y);
}
}

var xmin = mmin[apply](0, X),
ymin = mmin[apply](0, Y);

return {
x: xmin,
y: ymin,
width: mmax[apply](0, X) - xmin,
height: mmax[apply](0, Y) - ymin
};

function _curveDim(x1,y1,c1x,c1y,c2x,c2y,x2,y2) {
var xPosArr = new Array(), yPosArr = new Array(), u;

for (u = 0; u <= 1; u += 1/100) {
xPosArr[Math.floor(u*100)] = Math.pow(u,3)*(x2+3*(c1x-c2x)-
x1)+3*Math.pow(u,2)*(x1-2*c1x+c2x)+3*u*(c1x-x1)+x1;
yPosArr[Math.floor(u*100)] = Math.pow(u,3)*(y2+3*(c1y-c2y)-
y1)+3*Math.pow(u,2)*(y1-2*c1y+c2y)+3*u*(c1y-y1)+y1;
}
xPosArr.sort(_sortNum);
yPosArr.sort(_sortNum);

var xArr = [x1,xPosArr[0],xPosArr[xPosArr.length-2],x2];
xArr.sort(_sortNum);
var yArr = [y1,yPosArr[0],yPosArr[yPosArr.length-2],y2];
yArr.sort(_sortNum);

return {min:{x:xArr[0],y:yArr[0]},max:{x:xArr[xArr.length-1], y:yArr
[yArr.length-1]}}
}

function _sortNum(a,b){return a - b;}
}

[Lachlan Hardy]

Cool!

I was all going to tell you to add it to Issues, when I saw you already had :)

Neat!

[vswamina]

Thanks Lachlan, glad to help

I see that the getBBox is now fixed in 1.2.5, I really needed it.
Thanks guys!

[vswamina]

Hi, I am back. There still seems to be something missing in curveDim
function even in 1.2.5. The problem is that the function returns
erratic values as well as causes other strange behavior. Try the
following code in the Raphael PG. It tries to simulate scaling of a
shape by say mouse drag by an user using a timed linear scale.

When you run it, you will see that at a specific scale, the bounding
box (in red) goes awry, disappears completely and also the shape
starts to jump and move its X, Y position. Wait for sometime to notice
it. The behaviour is consistent in all browsers.

This behaviour is not there when I use my version of curveDim that I
posted above.

var c = paper.path("M310,250 C310,210 350,210 350,250");
var bBox = c.getBBox();
c.boundingBox = c.paper.rect(bBox.x,bBox.y,bBox.width,bBox.height).attr
({stroke:"red"});
setTimeout(simulateUserScale(c), 100);
var scaleX = 1, scaleY = 1;

function simulateUserScale(shape)
{
return function(){
shape.boundingBox.hide();
shape.scale(scaleX+=0.1, scaleY+=0.1);
var bBox = shape.getBBox();
shape.boundingBox.attr({x:bBox.x, y:bBox.y, width:bBox.width,
height:bBox.height});
shape.boundingBox.show();
setTimeout(simulateUserScale(shape), 100);
};
}

ps. A similar behaviour also occurs for rounded rectangle in IE7, at a
point of minimal scale the rounded rect loses its rounded corner,
never to gain it again even when scaled back to original position.

regards
Vignesh

[vswamina]

Ok, a two line pure Raphael code to reproduce the problem of curve
dimensions in 1.2.4 and 1.2.5. It is in the curveDim function but i am
not able to locate where.

Run the two line code below to see the shape jump out of position as
the animation progresses.

var c = paper.path("M110,200 C110,160 150,160 150,200");
c.animate({scale:"0.5,20"}, 5000);

It consistently occurs at almost the same iteration step of the
animation.

The problem is critical as any path shape with curves starts to jump
on automated or user based scaling.

thanks
Vignesh

[vswamina]

A different one round rect scales irregularly in IE7, reproducible by
running the following code in Raphael PG

//c = paper.rect(310,250,100,50); //runs as expected
c = paper.rect(310,250,100,50,10); //unexpected results
c.animate({scale:"2,2.5"}, 1000);

Thanks
Vignesh

[vswamina]

Fixed in 1.2.6, Thank you Dmitry!