How to draw rectangle with 1 rounded corner and fill it with color please?
I am trying to use the method arcTo with the following code:
this.bgGraphics.beginFill(0xFFCC00, 1);
this.bgGraphics.moveTo(0, 0);
this.bgGraphics.lineTo(45, 0);
this.bgGraphics.arcTo(45, 0, 60, 15, 15);
this.bgGraphics.lineTo(60, 60);
this.bgGraphics.lineTo(0, 60);
this.bgGraphics.endFill();
I.e. I am drawing a 60 x 60 rectangle and then trying to use arcTo from point 45, 0 to 45, 15 with radius 15.
But instead of the rounded corner on the right top it cuts it off:
The arcTo() method is a bit confusing. The (x1,y1) coordinates is not the start point of the curve. Think of it more like points for the bezier handles. In order to get the arc you want, you need to pull a bezier handle straight along the x axis. So your method should actually look like this:
this.bgGraphics.arcTo(60, 0, 60, 15, 15);
Since it's all one color, how about drawing a rounded rect with Graphics.drawRoundedRect and then drawing over the rounded parts that you don't want? You would draw a rounded rect the full size, and then cover up the corners that you want square with normal rects, like this:
I agree with Karmacon. I just wanted to add that sometimes it's easier to
use quadraticCurveTo(), as it has fewer options. You specify the Bezier control point x and y, and the end point x and y. However, you don't get the convenience of a radius parameter.
this.bgGraphics.quadraticCurveTo(60, 0, 60, 15);
Here's a comparison:
- arcTo(x1,y1,x2,y2,r);
x1 The x-coordinate of the first tangent
y1 The y-coordinate of the first tangent
x2 The x-coordinate of the second tangent
y2 The y-coordinate of the second tangent
r The radius of the arc
- quadraticCurveTo(cpx,cpy,x,y);
cpx The x-coordinate of the Bézier control point
cpy The y-coordinate of the Bézier control point
x The x-coordinate of the ending point
y The y-coordinate of the ending point
It's hugely useful to see images of the above but I can't post them yet. Have a look on W3Schools or developer.mozilla.org for some good images of how the parameters work.
Related
I have a point on a sphere that needs to be rotated. I have 3 different degrees of rotation (roll, pitch, yaw). Are there any formulas I could use to calculate where the point would end up after applying each rotation? For simplicity sake, the sphere can be centered on the origin if that helps.
I've tried looking at different ways of rotation, but nothing quite matches what I am looking for. If I needed to just rotate the sphere, I could do that, but I need to know the position of a point based on the rotation of the sphere.
Using Unity for an example, this is outside of unity in a separate project so using their library is not possible:
If the original point is at (1, 0, 0)
And the sphere then gets rotated by [45, 30, 15]:
What is the new (x, y, z) of the point?
If you have a given rotation as a Quaternion q, then you can rotate your point (Vector3) p like this:
Vector3 pRotated = q * p;
And if you have your rotation in Euler Angles then you can always convert it to a Quaternion like this (where x, y and z are the rotations in degrees around those axes):
Quaternion q = Quaternion.Euler(x,y,z);
Note that Unity's euler angles are defined so that first the object is rotated around the z axis, then around the x axis and finally around the y axis - and that these axes are all the in the space of the parent transform, if any (not the object's local axes, which will move with each rotation).
So I suppose that the z-axis would be roll, the x-axis would be pitch and the y axis would be yaw.You might have to switch the signs on some axes to match the expected result - for example, a positive x rotation will tilt the object downwards (assuming that the object's notion of forward is in its positive z direction and that up is in its positive y direction).
Here some examples of twisted triangle prisms.
I want to know if a moving triangle will hit a certain point. That's why I need to solve this problem.
The idea is that a triangle with random coordinates becomes the other random triangle whose vertices all move between then
related: How to determine point/time of intersection for ray hitting a moving triangle?
One of my students made this little animation in Mathematica.
It shows the twisting of a prism to the Schönhardt polyhedron.
See the Wikipedia page for its significance.
It would be easy to determine if a particular point is inside the polyhedron.
But whether it is inside a particular smooth twisting, as in your image, depends on the details (the rate) of the twisting.
Let's bottom triangle lies in plane z=0, it has rotation angle 0, top triangle has rotation angle Fi. Height of twisted prism is Hgt.
Rotation angle linearly depends on height, so layer at height h has rotation angle
a(h) = Fi * h / Hgt
If point coordinates are (x,y,z), then shift point to z=0 and rotate (x,y) coordinates about rotation axis (rx, ry) by -a(z) angle
t = -a(z) = - Fi * z / Hgt
xn = rx + (x-rx) * Cos(t) - (y-ry) * Sin(t)
yn = ry + (x-rx) * Sin(t) - (y-ry) * Cos(t)
Then check whether (xn, yn) lies inside bottom triangle
I am trying to reconstruct original graphics primitives from Postscript/SVG paths. Thus an original circle is rendered (in SVG markup) as:
<path stroke-width="0.5" d="M159.679 141.309
C159.679 141.793 159.286 142.186 158.801 142.186
C158.318 142.186 157.925 141.793 157.925 141.309
C157.925 140.825 158.318 140.432 158.801 140.432
C159.286 140.432 159.679 140.825 159.679 141.309" />
This is an approximation using 4 Beziers curves to create a circle.In other places circular arcs are approximated by linked Bezier curves.
My question is whether there is an algorithm I can use to recognize this construct and reconstruct the "best" circle. I don't mind small errors - they will be second-order at worst.
UPDATE: Note that I don't know a priori that this is a circle or an arc - it could be anything. And there could be 2, 3 4 or possibly even more points on the curve. So I'd really like a function of the sort:
error = getCircleFromPath(path)
where error will give an early indication of whether this is likely to be a circle.
[I agree that if I know it's a circle it's an easier problem.]
UPDATE: #george goes some way towards answering my problem but I don't think it's the whole story.
After translation to the origin and normalization I appear to have the following four points on the curve:
point [0, 1] with control point at [+-d,1] // horizontal tangent
point [1, 0] with control point at [1,+-d] // vertical tangent
point [0, -1] with control point at [+-d,-1] // horizontal tangent
point [-1, 0] with control point at [-1,+-d] // vertical tangent
This guarantees that the tangent at each point is "parallel" to the path direction at the point. It also guarantees the symmetry (4-fold axis with reflection. But it does not guarantee a circle. For example a large value of d will give a rounded box and a small value a rounded diamond.
My value of d appears to be about 0.57. This might be 1/sqrt(3.) or it might be something else.It is this sort of relationship I am asking for.
#george gives midpoint of arc as;
{p1,(p1 + 3 (p2 + p3) + p4)/8,p4}
so in my example (for 1,0 to 0,1) this would be:
[[1,0]+3[1,d]+3[d,1]+[0,1]] / 8
i.e.
[0.5+3d/8, 3d/8+0.5]
and if d =0.57, this gives 0.71, so maybe d is
(sqrt(0.5)-0.5)*8./3.
This holds for a square diamond, but for circular arcs the formula must be more general and I'd be grateful if anyone has it. For example, I am not familiar with Bezier math, so #george's formula was new to me
enter code here
Without doing all the math for you.. this may help:
there are always 4 control points on a bezier.
Your curve is 4 beziers linked together with points 1-4 , 4-7 , 7-10 , and 10-13 the control points
for each part. Points 1 , 4 , 7 and 10 (&13==1) lie exactly on the curve. To see if you have a nice circle calculate:
center = ( p1+p7 )/2 =( {159.679, 141.309} + {157.925, 141.309} ) / 2
= {158.802, 141.309}
verify you get the same result using points 4+10 -> {158.801, 141.309}
Once you know the center you can sample points along the curve and see if you have a constant distance.
If you only have a single bezier arc with 4 points a useful formula is that the midpoint is at
(p1 + 3 (p2 + p3) + p4)/8. So you can find the circle passing through three points:
{p1,(p1 + 3 (p2 + p3) + p4)/8,p4}
and again sample other points on the curve to decide if you indeed have a near circular arc.
Edit
the bezier formula is this:
x=(1-t)^3 p1 + 3 (1-t)^2 t p2 + 3 (1-t) t^2 p3 + t^3 p4 with parameter 0 < t < 1
so for example at t=1/4 you have
x=( 27 p1 + 27 p2 + 9 p3 + 1 p4 ) / 64
so once you find the center you can readily check a few points and calculate their distance.
I suspect if you only want to detect nearly exact circular arcs then checking two extra points with a tight tolerance will do the job. If you want to detect things that are approximately circular I would compute a bunch of points and use the average error as a criteria.
If all your elements are circle-like then you can just get the dimensions through path.getBBox() and generate a circle from there. In this case I'm considering ellipses, but you can easily translate it to actual circle elements:
var path = document.getElementById("circle_path");
var bbox = path.getBBox();
var rx = bbox.width/2;
var ry = bbox.height/2;
var cx = bbox.x + rx;
var cy = bbox.y + ry;
var ellipse = document.createElementNS(xmlns, "ellipse");
ellipse.setAttribute("fill", "none");
ellipse.setAttribute("stroke", "red");
ellipse.setAttribute("stroke-width", 0.1);
ellipse.setAttribute("cx", cx);
ellipse.setAttribute("cy", cy);
ellipse.setAttribute("rx", rx);
ellipse.setAttribute("ry", ry);
svg.appendChild(ellipse);
You can see a demo here:
http://jsfiddle.net/nwHm6/
The endpoints of the Bézier curves are probably on the circle. If so, it's easy to reconstruct the original circle.
Another possibility is to take the barycenter of the control points as the center of the circle because the control points are probably laid out symmetrically around the center. From the center, you get the radius as the average distance of the four control points closest to the center.
One can define an ellipse as a unit circle centred on (0,0), translated (2 params), scaled (2 params), and rotated (1 param). So on each arc take five points (t=0 ¼ ½ ¾ 1) and solve for these five parameters. Next take the in-between four points (t=⅛ ⅜ ⅝ ⅞), and test whether these lie on the same transformed circle. If yes, whoopee!, this is (part of) a transformed circle.
Immediately before and after might be another arc or arcn. Are these the same ellipse? If yes, and the subtended angles touch, then join together your descriptions of the pieces.
I have a circle, say radius of 10, and I can find the outer bounding rect easy enough since its width and height is equal to the radius, but what I need is the inner bounding rect. Does anyone know how to calculate the difference in size from the outer and inner bounding rectangles of a circle?
Here's an image to illustrate what I'm talking about. The red rectangle is the outer bounding box of the circle, which I know. The yellow rectangle is the inner bounding rectangle of the circle, which I need to find the difference in size from the outer rectangle.
My first guess to find the difference is to find one of the four points of the inner rectangle by finding that point along the circumference of the circle, each point being at a 45 degree offsets, and then just find the different from that point and the related point in the larger rect.
EDIT: Based off of the solution given by Steve B. I've come up with the algorithm to get what I want which is the following:
r*2 - sqrt(2)*r
If the radius is r, the outer rectangle size will be r*2.
The inner rectangle will have size equals to 2*sqrt(2*r).
So the diff will be equals to 2*(r-sqrt(2*r^2)).
You know the size of the radius and you have a triangle with a corner of 90 degrees with one point as the center of your circle and another two as two corners of your inner square.
Now if you know two sides of a triangle you can use Pythagoras:
x^2 = a^2 + b^2
= 2* r^2
So
x = sqrt(2 * r^2)
With r the radius of the circle, x the side of the square.
It's simple geometry: Outer rectangle has length of edge equal to 2*R, inner - diagonal equal to 2*R. So the edge of inner rectangle is equal to sqrt(2)*R. The ratio of edges of outer rectangle divided by inner is obviously sqrt(2).
The problem is draw arc with two pints on bitmap with radius and clockwise direction.
From your one-sentence question, I'm gonna assume you're ok with drawing Bezier curves. If not, there is plenty of information about them out there.
Anyway, you cannot create a perfect circular arc with Bezier curves (or splines). What you can do is approximating a circle to a level where the eye won't be able to see the difference. This is usually done with 8 quadratic Bezier curve segments, each covering 1/8th of the circle. This is i.e. how Adobe Flash creates circles.
If you're after a plain parametrization using sin and cos, it's way easier:
for (float t = 0; t < 2 * Math.PI; t+=0.05) {
float x = radius * sin(t);
float y = radius * cos(t);
}