Develop Reference

Raphael.js function getBBox give back NAN/NAN/NAN in IE8

using Raphaël 2.1.4 - JavaScript Vector Library
do something like that:
var textDummy = paper.text(50,500, 'hello world').attr({fill: 'transparent', 'font-size': 14});
var textBox = textDummy.getBBox();
with chrome and firefox everything is fine,
but in IE8 it give back NaN/NaN/NaN,
par exemple textBox.height is NaN.
how i can fix this?

i found a workaround solution from this answer to the question
"Raphael JS and Text positioning"
If i use _getBBox() instead of getBBox() everything is working in ie 8 also.
_getBBox() is undocumented but used internally by Raphael itself, and it works!

I had the same problem in Rapahel 2.2.0 and 2.2.1, and using ._getBBox() didn't fix it for me.
What did fix it for me is falling back to .auxGetBBox() if it's defined and regular .getBBox() doesn't work, like this:
var bbox = path.getBBox( );
// Workaround for apparent bug in Raphael's VML module's getBBox() override
if( isNaN( bbox.x ) && path.auxGetBBox ){
bbox = path.auxGetBBox();
}
I don't have a fix for the underlying bug, but I have found the source of it.
In VML mode, Raphael takes the initial getBBox() function, saves it as auxGetBBox() on the element prototype, then replaces it with a function that appears to be broken.
It has calculations based on a variable defined as var z = 1/this.paper._viewBoxShift.scale;, which clearly expects _viewBoxShift.scale to be some factor of the scale of the current viewbox compared to the initial viewbox , but actually _viewBoxShift.scale is an object like this which appears to come from paperproto.getSize():
{ height: someNumber, width: someNumber }
This is where all the NaNs are coming from. Cannae divide by an object.
So this workaround works fine if no zoom is applied using a viewbox, but may give incorrect results if a zoom has been applied (something I can't get to work at all in recent versions of raphael in VML mode, but that's a seperate question). Fixing that will involve digging deep into Raphael's VML module to pipe a proper zoom factor into this z variable.

Collision detection using a collision array inside html5 canvas

I am trying to detect if a character and an object inside an image collide. I am using a function that can parse the image and creates a collision array and another function that can detect if there is a collision or not in a specific location. My problem is that the isCollision function is never executed that's my jsfiddle : http://jsfiddle.net/AbdiasSoftware/UNWWq/1/
if (isCollision(character.x, character.y)) {
alert("Collision");
}
Please help me to fix my problem.

Add this in the top of your init() method and it should work:
FieldImg.crossOrigin = '';
As you are loading the image from a different origin CORS kicks in and you need to request cross-origin usage when using getImageData() (or toDataURL()).
See modified fiddle here.
Note: in you final code this is probably not gonna be necessary though as you probably want to include the images in the same domain as the page itself - in these cases you need to remove the cross-origin request unless your server is setup to handle this. Just something to have in mind for later if what worked suddenly don't...

Ok i found it :
You are loading a huge background image, and you draw part of it on a much smaller canvas.
You do visual collision detection using a binary view on the display canvas that you build in the process() function.
The issue comes when you want to test : to compute the pixel position of the player within the binary view, you are using y*width + x, but with the wrong width, that of the background image when it should be that of the view (cw).
function isCollision(x, y) {
return (buffer8[y * cw + x] === 1);
}
.
move right and look in the console with this fiddle :
http://jsfiddle.net/gamealchemist/UNWWq/9/

Why doesn't createRadialGradient work on Firefox?

I'm working with the canvas tag of HTML5 and JavaScript to access the canvas methods and properties.
This code works on Chrome but it doesn't work on Firefox: http://jsfiddle.net/thirtydot/BD3xA/.
Does anyone know why?

createRadialGradient works on Firefox, but addColorStop does not work completely - and will throw an exception if you pass in a transparency along with your color.
For example, after you create a radial gradient:
var grad = ctx.createRadialGradient(centerX,centerY,outRadius,centerX,centerY,outRadius+pad);
var colorOut="rgba(100,200,100,0.7)";
grad.addColorStop(0,'rgba(0,0,0,0)');
grad.addColorStop(0.01,colorOut);
The above works great on chrome, but will not work on FF because of the 0.7 in the rgba color.
So, I use something like:
colorOut= ($.browser.mozilla)?'#D88':'rgba(200,100,100,0.7);';
This doesn't make gradients look quite so nice on FF, but functions.
Of course, you should cache that $.browser.mozilla earlier - make a var IS_MOZILLA = $.browser.mozilla; and then just use that (so that you minimize class calls... as saving every computation in complex drawing calls is important).

Point in Polygon Hit Test in JavaScript (Chrome bug)

I am working on a game written in javaScript / jQuery. Part of my code draws a random polygon (an island) on a tile grid. I need to check if a point is inside the polygon.
I am using a point-in-polygon intersection script which I found in several places on Stack Overflow (original here). This works fine in Firefox. In Chrome, there are points inside the polygon which the script says are not inside it.
In Firefox:
In Chrome (the island is different because they are randomly generated):
Please take a look at the source here, particularly the pointPolygonIntersect function:
Point in Polygon Hit Test
Can anyone figure out why this is happening? The original script is in C, and I am using a JavaScript version - could this be causing the problem?

Pick an island and stick with it. Trace the code in both browsers and see where they differ. There's no reason to fight against the randomness that you can easily remove...

I gave it a quick look. Couldn't track the app flow, but what seems strange is the
c = !c;
line of code. Why dont you just set it to true, or directly return true, if you meet the conditions the first time? I'm assuming, that chrome goes to "true" and then inverts it the next time its within the x/y bounds.
I'm not familiar with Raphael or SVG, but it seems your polygons are squares, thus you could do a simple within test
//original found here http://www.gamedev.net/topic/483716-point-inside-of-rectangle/
function inside( x, y, l, r, b, t ){ //x,y are the point, l,r,b,t are the extents of the rectangle
return x > l && x < r && y > b && y < t;
}

raphael question - using animateAlong

I am using raphael to do some SVG animation and cannot seem to get the function animateAlong to work. I continue to get the error "attrs[0] is undefined" referencing line 3450 of the un-compressed raphael code.
Basically, I create a circle with a given center and then want to animate an image around that path. Here is that simple code:
var circle = paper.circle(circleCenterX, circleCenterY, circleRadius);
I then clone an image (since I plan to have a number of these on this path) and place at the edge of the circle:
var wheelClone = wheel.clone();
var wheelRadius = parseInt(wheel8ImageWidth/2);
wheelClone
.translate((circleCenterX + circleRadius)-3, circleCenterY-wheelRadius);
where I init circleCenterX earlier with circleCenterX = circle.attr(cx);
This all works fine with image placed correctly - but it errors on animateAlong.
I have studied as many examples as i can find and have dissected the documentation but cannot get the hang here.
So, I simply try to call the function but have no earthly idea what the documentation is referring to. The documentation animates a dot around a path but refers to two variables - rx and ry which I cannot suss out - both in an init function and then with the callback.
Here is what I have - - where the rx and ry and just made up as I have no idea what they refer to.
var wheelAttr = {
rx: 5,
ry: 3
};
wheelClone.attr(wheelAttr).animateAlong(circle, 2000, true, function() {
wheel.attr({rx: 4, ry: 4});
});
My current jsFiddle is a bit of a mess at the moment and I can clean it up, but I suspect that there is some obvious thing here?
Thanks to all
S

I don't think a circle is actually a valid path (i.e, something you can pass to animateAlong()). I think you need to create a path that is circular. See the following:
svg-animation-along-path-with-raphael
Hopefully, it will help.