Rounded rect proto probs

[juststeve]

I've picked up a prototype from layer51 (http://proto.layer51.com/d.aspx?f=635) that fairly simply draws a rounded rectangle according to args passed in. (Full proto below)

I'm able to use this proto on _root but I can't get box to display from a child clip.

This works:

_root.lineStyle(0);
_root.beginFill(0x6699ff,100);
_root.rBox(50,50,300,300,10,10,10,10);
_root.endFill();

This doesn't:
[/code]
_root.lineStyle(0);
_root.beginFill(0x6699ff,100);
this.rBox(50,50,300,300,10,10,10,10);
_root.endFill();
[/code]


I've put trace(this + " called rBox); into the proto and it returns correct info for either test...i just don't get any box to display from any clip execpt _root.


any help appreciated

//Nothing special here - just combination of known code to paint a rounded box. 
//The curveTo algorithm is taken from http://actionscript-toolbox.com/
//Variables are self-explanatory: 
//x,y - coordinates, w,h - dimensions, r - corner radius of the box.

MovieClip.prototype.rBox = function(x,y,w,h,r) {

	var a = Math.tan(22.5 * Math.PI/180);
	var midX = r*Math.cos(45*Math.PI/180);
	var midY = r*Math.sin(45*Math.PI/180);

//left up corner
	this.moveTo(x, y + r);
	var x0 = x + r;
	var y0 = y + r;
	var endx = x0 - midX;
	var endy = y0 - midY;
	var cx = x0 - r;
	var cy = y0 - r*a;
	this.curveTo(cx, cy, endx, endy);
	var endx = x + r;
	var endy = y;
         var cx = x0 - r*a;
	var cy = y0 - r;
	this.curveTo(cx, cy, endx, endy);
	this.lineTo(x + w - r, y);

//right up corner
	var x0 = x + w - r;
	var y0 = y + r;
	var endx = x0 + midX;
	var endy = y0 - midY;
	var cx = x0 + r*a
	var cy = y0 - r;
	this.curveTo(cx, cy, endx, endy);
	var endx = x + w;
	var endy = y + r;
	var cx = x0 + r;
	var cy = y0 - r*a;
	this.curveTo(cx, cy, endx, endy);
	this.lineTo(x+w,y+h-r);

//right down corner
	var x0 = x + w - r;
	var y0 = y + h - r;
	var endx = x0 + midX;
	var endy = y0 + midY;
	var cx = x0 + r;
	var cy = y0 + r*a;
	this.curveTo(cx, cy, endx, endy);
	var endx = x + w - r;
	var endy = y + h;
	var cx = x0 + r*a;
	var cy = y0 + r;
	this.curveTo(cx, cy, endx, endy);
	this.lineTo(x+r,y+h)
	
//left down corner
	var x0 = x + r;
	var y0 = y + h - r;
	var endx = x0 - midX;
	var endy = y0 + midY;
	var cx = x0 - r*a;
	var cy = y0 + r;
	this.curveTo(cx, cy, endx, endy);
	var endx = x;
	var endy = y + h - r;
	var cx = x0 - r;
	var cy = y0 + r*a;
	this.curveTo(cx, cy, endx, endy);
}

//updated version
//all corners are independent and may 
//have different radiuses - cool for paint effects!

MovieClip.prototype.rBox = function(x,y,w,h,r1,r2,r3,r4) {

	var a = Math.tan(22.5 * Math.PI/180);
	var midX1 = r1*Math.cos(45*Math.PI/180);
	var midY1 = r1*Math.sin(45*Math.PI/180);
	var midX2 = r2*Math.cos(45*Math.PI/180);
	var midY2 = r2*Math.sin(45*Math.PI/180);
	var midX3 = r3*Math.cos(45*Math.PI/180);
	var midY3 = r3*Math.sin(45*Math.PI/180);
	var midX4 = r4*Math.cos(45*Math.PI/180);
	var midY4 = r4*Math.sin(45*Math.PI/180);

//left up corner
	this.moveTo(x, y + r1);
	var x0 = x + r1;
	var y0 = y + r1;
	var endx = x0 - midX1;
	var endy = y0 - midY1;
	var cx = x0 - r1;
	var cy = y0 - r1*a;
	this.curveTo(cx, cy, endx, endy);
	var endx = x + r1;
	var endy = y;
	var cx = x0 - r1*a;
	var cy = y0 - r1;
	this.curveTo(cx, cy, endx, endy);
	this.curveTo(x + w - r2, y, x + w - r2, y);

//right up corner
	var x0 = x + w - r2;
	var y0 = y + r2;
	var endx = x0 + midX2;
	var endy = y0 - midY2;
	var cx = x0 + r2*a
	var cy = y0 - r2;
	this.curveTo(cx, cy, endx, endy);
	var endx = x + w;
	var endy = y + r2;
	var cx = x0 + r2;
	var cy = y0 - r2*a;
	this.curveTo(cx, cy, endx, endy);
	this.curveTo(x + w, y + h - r3, x + w, y + h - r3);

//right down corner
	var x0 = x + w - r3;
	var y0 = y + h - r3;
	var endx = x0 + midX3;
	var endy = y0 + midY3;
	var cx = x0 + r3;
	var cy = y0 + r3*a;
	this.curveTo(cx, cy, endx, endy);
	var endx = x + w - r3;
	var endy = y + h;
	var cx = x0 + r3*a;
	var cy = y0 + r3;
	this.curveTo(cx, cy, endx, endy);
	this.curveTo(x + r4, y + h, x + r4, y + h)

//left down corner
	var x0 = x + r4;
	var y0 = y + h - r4;
	var endx = x0 - midX4;
	var endy = y0 + midY4;
	var cx = x0 - r4*a;
	var cy = y0 + r4;
	this.curveTo(cx, cy, endx, endy);
	var endx = x;
	var endy = y + h - r4;
	var cx = x0 - r4;
	var cy = y0 + r4*a;
	this.curveTo(cx, cy, endx, endy);
	this.curveTo(x, y + r1, x, y + r1);
}

[the_protectot]

have you tried...

this.lineStyle(0);
this.beginFill(0x6699ff,100);
this.rBox(50,50,300,300,10,10,10,10);
this.endFill();

[juststeve]

umm...err...i hadn't but that would appear to make all kinds of sense.

...thankx

[jvegan]

Does anyone know if it is possible to get a drop shadow on this rounded box?

[derekcfoley]

Nice bit of code, but I think the corner radius doesn't quite meet up, it looks a bit rough where the curves join up with the horizontal and vertical edges of the rectangle...

Does anyone have any better examples of how to code this that looks better?