Smooth curves...no not a female?

1

Using the lineto property, how can I create a simple rectanglar box with smooth round curves at the edges? Small piece of code will be nice.

thanks

2

hmm use Math.cos and maybe Math.sin

Found this @ actionscript.org


speed = 5;
r = 200;
xc = 150;
yc = 150;
angle = 0;
delta = Math.PI/180;
	createEmptyMovieClip("circle", 1);
	with (circle) {
		lineStyle(0, 0x666666, 50);
		moveTo(r+xc*Math.cos(angle*delta),r+xc*Math.sin(angle*delta))
	}
onEnterFrame = function () {
	x = r+xc*Math.cos(angle*delta);
	y = r+yc*Math.sin(angle*delta);
	angle += speed;
	if (angle>359) {
		angle -= 360;
	}
	circle.lineTo(x, y);
};

Maybe you can use it.

3

http://proto.layer51.com/d.aspx?f=635

4

That proto looks very nice :slight_smile: Here’s my try at it, shorter, but much more approximative:

//w : width, h: height, r: radius of the edge, col: color of the fill
MovieClip.prototype.roundedBox = function (w, h, r, col) {
	var aPoints = [{x:r, y:0},{x:w-r, y:0},{x:w, y:r},{x:w, y:h-r},{x:w-r, y:h},
				   {x:r, y:h},{x:0, y:h-r},{x:0, y:r}] ;
	this.lineStyle(2*r, col, 100) ;
	this.moveTo(r, r) ;
	this.lineTo(r+.45, r+.15) ;
	this.moveTo(r, h-r) ;
	this.lineTo(r+.45, h-r+.15) ;
	this.moveTo(w-r, h-r) ;
	this.lineTo(w-r+.45, h-r+.15) ;
	this.moveTo(w-r, r) ;
	this.lineTo(w-r+.45, r+.15) ;
	this.lineStyle(0, 0, 0) ;
	this.beginFill(col, 100) ;
	for (var i=0; i < aPoints.length; i++) this[(!i) ? "moveTo" : "lineTo"](aPoints*.x, aPoints*.y) ;	
	this.endFill() ;
}
this.createEmptyMovieClip("box", 0) ;
box.roundedBox(300, 400, 30, 0xff0000) ;

pom :slight_smile: