Re: [Flashcoders] geometry // oval around text
Hello Andreas,
your CatmullRomSpline is really impressive, but it draws not a real
ellipse. If it would, this code should produce a circle, right?
var points:Array = new Array(
{x: 0, y: 0},
{x: 0, y: 50},
{x:50, y: 50},
{x:50, y: 0},
{x: 0, y: 0});
var spline:CatmullRomSpline = new CatmullRomSpline(points);
var approxLineLength:Number = 3;
spline.plotAll(mc, approxLineLength);
How is the bend of the curve defined?
Matthias
2006/10/5, Andreas Weber [EMAIL PROTECTED]:
Instead of re-inventing the wheel (which can be a lot of fun!) you might
find it easier to use an already existing Spline class, e.g. my CatmullRom
Spline:
http://www.motiondraw.com/md/as_samples/t/CatmullRomSpline/closedShape.html
The advantage is that you can just pass in the corner points of the
textfield (or, if you want some 'padding', it's easy to calculate the
corners of the outer rectangle) - the spline will automatically curve
through these points.
If you are interested in the Math of Splines, don't miss the in-depth
tutorials by Jim Armstrong:
http://www.2112fx.com/
hth
--
Andreas Weber
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matthias
Dittgen
Sent: Donnerstag, 5. Oktober 2006 09:41
To: Flashcoders mailing list
Subject: [Flashcoders] geometry // oval around text
Hello,
I need a tipp for drawing an oval around a dynamic textfield with variable
line numbers and variable width? Perhaps, someone can point me to a good
tutorial dealing with such geometry questions. The drawOval methods I am
using have width and height as parameters, but of course I can't use width
and height of the textfield without a
padding. How can I calculate an i appropriate padding?
The drawOval methods:
public function drawOval_Old(x:Number, y:Number, width:Number,
height:Number):Void {
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x,y+height/2);
movieClip.curveTo(x,y,x+width/2, y);
movieClip.curveTo(x+width,y,x+width, y+height/2);
movieClip.curveTo(x+width,y+height, x+width/2, y+height);
movieClip.curveTo(x,y+height, x, y+height/2);
}
public function drawOval(x:Number, y:Number, width:Number,
height:Number):Void {
x+=width/2;
y+=height/2;
width/=2;
height/=2;
var j:Number = width * 0.70711;
var n:Number = height * 0.70711;
var i:Number = j - (height - n) * width/height;
var m:Number = n - (width - j) * height/width;
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x+width, y);
movieClip.curveTo(x+width, y-m, x+j, y-n);
movieClip.curveTo(x+i, y-height, x, y-height);
movieClip.curveTo(x-i, y-height, x-j, y-n);
movieClip.curveTo(x-width, y-m, x-width, y);
movieClip.curveTo(x-width, y+m, x-j, y+n);
movieClip.curveTo(x-i, y+height, x, y+height);
movieClip.curveTo(x+i, y+height, x+j, y+n);
movieClip.curveTo(x+width, y+m, x+width, y);
}
Thanks,
Matthias
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
RE: [Flashcoders] geometry // oval around text
Sorry, wasn't aware that you were looking for a real ellipse, I thought
something nicely ovalish, kind-of-roundish would do :-)
You'll find a bit more on CatmullRom here:
http://www.mvps.org/directx/articles/catmull/
hth
--
Andreas Weber
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matthias
Dittgen
Sent: Freitag, 6. Oktober 2006 13:10
To: Flashcoders mailing list
Subject: Re: [Flashcoders] geometry // oval around text
Hello Andreas,
your CatmullRomSpline is really impressive, but it draws not a real ellipse.
If it would, this code should produce a circle, right? var points:Array =
new Array(
{x: 0, y: 0},
{x: 0, y: 50},
{x:50, y: 50},
{x:50, y: 0},
{x: 0, y: 0});
var spline:CatmullRomSpline = new CatmullRomSpline(points);
var approxLineLength:Number = 3;
spline.plotAll(mc, approxLineLength);
How is the bend of the curve defined?
Matthias
2006/10/5, Andreas Weber [EMAIL PROTECTED]:
Instead of re-inventing the wheel (which can be a lot of fun!) you
might find it easier to use an already existing Spline class, e.g. my
CatmullRom
Spline:
http://www.motiondraw.com/md/as_samples/t/CatmullRomSpline/closedShape
.html
The advantage is that you can just pass in the corner points of the
textfield (or, if you want some 'padding', it's easy to calculate the
corners of the outer rectangle) - the spline will automatically curve
through these points.
If you are interested in the Math of Splines, don't miss the in-depth
tutorials by Jim Armstrong: http://www.2112fx.com/
hth
--
Andreas Weber
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Matthias Dittgen
Sent: Donnerstag, 5. Oktober 2006 09:41
To: Flashcoders mailing list
Subject: [Flashcoders] geometry // oval around text
Hello,
I need a tipp for drawing an oval around a dynamic textfield with
variable line numbers and variable width? Perhaps, someone can point
me to a good tutorial dealing with such geometry questions. The
drawOval methods I am using have width and height as parameters, but
of course I can't use width and height of the textfield without a
padding. How can I calculate an i appropriate padding?
The drawOval methods:
public function drawOval_Old(x:Number, y:Number, width:Number,
height:Number):Void {
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x,y+height/2);
movieClip.curveTo(x,y,x+width/2, y);
movieClip.curveTo(x+width,y,x+width, y+height/2);
movieClip.curveTo(x+width,y+height, x+width/2, y+height);
movieClip.curveTo(x,y+height, x, y+height/2);
}
public function drawOval(x:Number, y:Number, width:Number,
height:Number):Void {
x+=width/2;
y+=height/2;
width/=2;
height/=2;
var j:Number = width * 0.70711;
var n:Number = height * 0.70711;
var i:Number = j - (height - n) * width/height;
var m:Number = n - (width - j) * height/width;
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x+width, y);
movieClip.curveTo(x+width, y-m, x+j, y-n);
movieClip.curveTo(x+i, y-height, x, y-height);
movieClip.curveTo(x-i, y-height, x-j, y-n);
movieClip.curveTo(x-width, y-m, x-width, y);
movieClip.curveTo(x-width, y+m, x-j, y+n);
movieClip.curveTo(x-i, y+height, x, y+height);
movieClip.curveTo(x+i, y+height, x+j, y+n);
movieClip.curveTo(x+width, y+m, x+width, y);
}
Thanks,
Matthias
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training http://www.figleaf.com
http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
Re: [Flashcoders] geometry // oval around text
You don't need to excuse, Andreas! This way I found your really cool
implementations of some very useful spline algorithm. I really like
the LineGeneralization
(http://www.motiondraw.com/md/as_samples/t/LineGeneralization/demo.html),
that's awesome!
I'll try Danny's suggestions after the weekend.
Matthias
2006/10/6, Andreas Weber [EMAIL PROTECTED]:
Sorry, wasn't aware that you were looking for a real ellipse, I thought
something nicely ovalish, kind-of-roundish would do :-)
You'll find a bit more on CatmullRom here:
http://www.mvps.org/directx/articles/catmull/
hth
--
Andreas Weber
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matthias
Dittgen
Sent: Freitag, 6. Oktober 2006 13:10
To: Flashcoders mailing list
Subject: Re: [Flashcoders] geometry // oval around text
Hello Andreas,
your CatmullRomSpline is really impressive, but it draws not a real ellipse.
If it would, this code should produce a circle, right? var points:Array =
new Array(
{x: 0, y: 0},
{x: 0, y: 50},
{x:50, y: 50},
{x:50, y: 0},
{x: 0, y: 0});
var spline:CatmullRomSpline = new CatmullRomSpline(points);
var approxLineLength:Number = 3;
spline.plotAll(mc, approxLineLength);
How is the bend of the curve defined?
Matthias
2006/10/5, Andreas Weber [EMAIL PROTECTED]:
Instead of re-inventing the wheel (which can be a lot of fun!) you
might find it easier to use an already existing Spline class, e.g. my
CatmullRom
Spline:
http://www.motiondraw.com/md/as_samples/t/CatmullRomSpline/closedShape
.html
The advantage is that you can just pass in the corner points of the
textfield (or, if you want some 'padding', it's easy to calculate the
corners of the outer rectangle) - the spline will automatically curve
through these points.
If you are interested in the Math of Splines, don't miss the in-depth
tutorials by Jim Armstrong: http://www.2112fx.com/
hth
--
Andreas Weber
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Matthias Dittgen
Sent: Donnerstag, 5. Oktober 2006 09:41
To: Flashcoders mailing list
Subject: [Flashcoders] geometry // oval around text
Hello,
I need a tipp for drawing an oval around a dynamic textfield with
variable line numbers and variable width? Perhaps, someone can point
me to a good tutorial dealing with such geometry questions. The
drawOval methods I am using have width and height as parameters, but
of course I can't use width and height of the textfield without a
padding. How can I calculate an i appropriate padding?
The drawOval methods:
public function drawOval_Old(x:Number, y:Number, width:Number,
height:Number):Void {
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x,y+height/2);
movieClip.curveTo(x,y,x+width/2, y);
movieClip.curveTo(x+width,y,x+width, y+height/2);
movieClip.curveTo(x+width,y+height, x+width/2, y+height);
movieClip.curveTo(x,y+height, x, y+height/2);
}
public function drawOval(x:Number, y:Number, width:Number,
height:Number):Void {
x+=width/2;
y+=height/2;
width/=2;
height/=2;
var j:Number = width * 0.70711;
var n:Number = height * 0.70711;
var i:Number = j - (height - n) * width/height;
var m:Number = n - (width - j) * height/width;
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x+width, y);
movieClip.curveTo(x+width, y-m, x+j, y-n);
movieClip.curveTo(x+i, y-height, x, y-height);
movieClip.curveTo(x-i, y-height, x-j, y-n);
movieClip.curveTo(x-width, y-m, x-width, y);
movieClip.curveTo(x-width, y+m, x-j, y+n);
movieClip.curveTo(x-i, y+height, x, y+height);
movieClip.curveTo(x+i, y+height, x+j, y+n);
movieClip.curveTo(x+width, y+m, x+width, y);
}
Thanks,
Matthias
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training http://www.figleaf.com
http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
RE: [Flashcoders] geometry // oval around text
Hello, I need a tipp for drawing an oval around a dynamic textfield with variable line numbers and variable width? Perhaps, someone can point me to a good tutorial dealing with such geometry questions. The drawOval methods I am using have width and height as parameters, but of course I can't use width and height of the textfield without a padding. How can I calculate an i appropriate padding? Hi, Assuming your bezier curve is at least an approximate ellipse (I haven't done the maths to be sure), here's how you can find an ellipse that contains a particular rectangle. Suppose the rectangle has half-width w and half-height h. You want an ellipse of half-width a and half-height b such that the point (w,h) lies on it (assume it's centred on (0,0): you can add the x,y coordinates at the end). The locus of a point P on an ellipse aligned with the axes is: P = (a * cos(t), b * sin(t)), where t lies between 0 and 2*pi (we only need to think about t between 0 and pi/2, though). So we need to find a and b such that a*cos(t) = w and b*sin(t) = h, for some t. Notice that since we've got three variables and two equations, there are an infinite number of possible solutions. If you pick any value of t between 0 and pi/2, you can simply read off the values of a and b as a = w/cos(t), b = h/sin(t). So the only tricky bit is choosing a value of t that makes your ellipse fit the rectangle reasonably tightly. I think I'd do it ideally by trying to minimise the value of (a-w)^2 + (b-h)^2, thus minimising the distance of the extremes from the rectangle edges, but that's a bit ugly. In practice, I think you could do it by choosing t based on the ratio w/h (try w*(pi/4)/h if wh, pi/4 + h*(pi/4)/w if wh as a first thought, but I haven't tried it) HTH Danny ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] geometry // oval around text
Hello Danny, thank you, that sounds great. I'll take a closer look at your formulas. I also thought of a nearing solution that uses the ratio of textfieldWidth and textfieldHeight. I was drawing different rectangles on a paper in front of me and surrounding them with ovals. :-) I don't want a mathematical perfect solution, I just need a good approximation. Thank you, Matthias ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
RE: [Flashcoders] geometry // oval around text
Instead of re-inventing the wheel (which can be a lot of fun!) you might
find it easier to use an already existing Spline class, e.g. my CatmullRom
Spline:
http://www.motiondraw.com/md/as_samples/t/CatmullRomSpline/closedShape.html
The advantage is that you can just pass in the corner points of the
textfield (or, if you want some 'padding', it's easy to calculate the
corners of the outer rectangle) - the spline will automatically curve
through these points.
If you are interested in the Math of Splines, don't miss the in-depth
tutorials by Jim Armstrong:
http://www.2112fx.com/
hth
--
Andreas Weber
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matthias
Dittgen
Sent: Donnerstag, 5. Oktober 2006 09:41
To: Flashcoders mailing list
Subject: [Flashcoders] geometry // oval around text
Hello,
I need a tipp for drawing an oval around a dynamic textfield with variable
line numbers and variable width? Perhaps, someone can point me to a good
tutorial dealing with such geometry questions. The drawOval methods I am
using have width and height as parameters, but of course I can't use width
and height of the textfield without a
padding. How can I calculate an i appropriate padding?
The drawOval methods:
public function drawOval_Old(x:Number, y:Number, width:Number,
height:Number):Void {
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x,y+height/2);
movieClip.curveTo(x,y,x+width/2, y);
movieClip.curveTo(x+width,y,x+width, y+height/2);
movieClip.curveTo(x+width,y+height, x+width/2, y+height);
movieClip.curveTo(x,y+height, x, y+height/2);
}
public function drawOval(x:Number, y:Number, width:Number,
height:Number):Void {
x+=width/2;
y+=height/2;
width/=2;
height/=2;
var j:Number = width * 0.70711;
var n:Number = height * 0.70711;
var i:Number = j - (height - n) * width/height;
var m:Number = n - (width - j) * height/width;
movieClip.lineStyle(lw, lc, la);
movieClip.moveTo(x+width, y);
movieClip.curveTo(x+width, y-m, x+j, y-n);
movieClip.curveTo(x+i, y-height, x, y-height);
movieClip.curveTo(x-i, y-height, x-j, y-n);
movieClip.curveTo(x-width, y-m, x-width, y);
movieClip.curveTo(x-width, y+m, x-j, y+n);
movieClip.curveTo(x-i, y+height, x, y+height);
movieClip.curveTo(x+i, y+height, x+j, y+n);
movieClip.curveTo(x+width, y+m, x+width, y);
}
Thanks,
Matthias
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
Re: [Flashcoders] geometry // oval around text
Hello Andreas, thank you a lot for your open sources! Your work with splines is impressive. I asked my question here on the list, BECAUSE I don't want to re-invent the wheel. So I am happy now to find the solution. Hello Ivan, thank you for the link. Matthias ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
