I have a custom view where I override the onDraw method and drawn a circle. Now I want to draw a line from the center of the circle to the top of the circle.
Here is my code..
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(0, 0, getWidth(), getHeight(), backgroundPaint);
canvas.drawCircle(centerX, centerY, outerRadius, outerCirclePaint);
double angleRadians = Math.toRadians(0);
double x = (outerRadius * Math.cos(angleRadians)) + centerX;
double y = (outerRadius * Math.sin(angleRadians)) + centerY;
canvas.drawLine((float)x, (float)y, centerX, centerY, innerCirclePaint);
}
centerX and centerY are the center of the circle
outerRadius is the radius for the circle
When i run this the line is drawn from the center to the right at 90 degrees instead of the top of the circle 0 degrees, even though I have told it the angle is 0
This is confusing me and can't seem what I am doing wrong.
If anyone has any ideas on this I would be very grateful
In mathematics, 0 degrees (also 0 radians) for the unit circle start at the right of the circle.
Unit circle
Add 90 degrees or pi/2 radians to start at the top.
Related
I'm playing with custom views and I want to build a rounded rectangle using path.lineTo() and path.arcTo() methods.
So, the rectangle I want to get:
Normally I draw this with this block of code:
RectF backReftf = new RectF();
Path path = new Path();
int width = getWidth();
int height = getHeight();
float curve = (float) (0.1 * height);
RectF backReftf = new RectF();
backReftf.left = 0;
backReftf.top = 0;
backReftf.right = width;
backReftf.bottom = height;
path.addRoundRect(backReftf, curve, curve, Path.Direction.CW);
canvas.drawPath(path, paint);
But I want to draw this with path.lineTo() and path.arcTo().
According to Docs about arcTo():
Append the specified arc to the path as a new contour. If the start of the path is different from the path's current last point, then an automatic lineTo() is added to connect the current contour to the start of the arc. However, if the path is empty, then we call moveTo() with the first point of the arc.
So theoretically my arc should start there, where line ends, so if I drew a line (left side of rectangle):
float curve = (float) (0.1 * height);
path.moveTo(0,0);
path.lineTo(0, height - curve);
then my arc should start from this point (0, height - curve), but where do I pass those arguments when arcTo() has following parameters: arcTo (float left,
float top,
float right,
float bottom,
float startAngle,
float sweepAngle,
boolean forceMoveTo)
?
Plus how do I calculate in this case startAngle and sweepAngle?
Thanks in advance!
When drawing an arc, you need to specify the full bounding box for that arc, and the start and sweep angle. I try to see them visually, like so:
E.g. when going clock wise, the start angle is positioned 180degrees from the origin. And from the startAngle, if you sweep 90 degrees clock wise, you'll end up at the desired end position.
Take note where the origin, startAngle and sweepAngle are in this graphic.
In kotlin, it can look something like this:
// Given some radius, viewWidth and viewHeight
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
path.apply {
moveTo(radius, 0F)
lineTo(viewWidth - radius, 0F)
arcTo(viewWidth - 2 * radius, 0F, viewWidth, 2 * radius, -90F, 90F, false)
lineTo(viewWidth, radius)
arcTo(viewWidth - 2 * radius, viewHeight - 2 * radius, viewWidth, viewHeight, 0F, 90F, false)
lineTo(radius, viewHeight)
arcTo(0F, viewHeight - 2 * radius, 2 * radius, viewHeight, 90F, 90F, false)
lineTo(0F, radius)
arcTo(0F, 0F, 2 * radius, 2 * radius, 180F, 90F, false)
}
canvas?.drawPath(path, linePaint)
}
And the result will be something like this:
I want to draw texts on the sides of a circle and another one below it. I edited the code in this answer but the problem is that the circle and arc are taking the whole space of the rect, which makes no space for the text to be drawn.
Here is my code
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// getHeight() is not reliable, use getMeasuredHeight() on first run:
// Note: mRect will also be null after a configuration change,
// so in this case the new measured height and width values will be used:
if (mRect == null) {
// take the minimum of width and height here to be on he safe side:
centerX = getMeasuredWidth() / 2;
centerY = getMeasuredHeight() / 2;
radius = Math.min(centerX, centerY);
// mRect will define the drawing space for drawArc()
// We have to take into account the STROKE_WIDTH with drawArc() as well as drawCircle():
// circles as well as arcs are drawn 50% outside of the bounds defined by the radius (radius for arcs is calculated from the rectangle mRect).
// So if mRect is too large, the lines will not fit into the View
int startTop = STROKE_WIDTH / 2;
int startLeft = startTop;
int endBottom = 2 * radius - startTop;
int endRight = endBottom;
mRect = new RectF(startTop, startLeft, endRight, endBottom);
}
// subtract half the stroke width from radius so the blue circle fits inside the View
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, mBasePaint);
// Or draw arc from degree 192 to degree 90 like this ( 258 = (360 - 192) + 90:
// canvas.drawArc(mRect, 192, 258, false, mBasePaint);
// draw an arc from 90 degrees to 192 degrees (102 = 192 - 90)
// Note that these degrees are not like mathematical degrees:
// they are mirrored along the y-axis and so incremented clockwise (zero degrees is always on the right hand side of the x-axis)
canvas.drawArc(mRect, 270, mTemp * 6, false, mDegreesPaint); // Each degree in the temp scale = 6 degrees on circle
canvas.drawArc(mRect, 270 + mSeparator * 6, 3, false, mSeparatorPaint); // The separator size = 3 degrees
// subtract stroke width from radius so the white circle does not cover the blue circle/ arc
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, mCenterPaint);
drawCenter(canvas, mTextPaint, mTemp + "°");
canvas.drawText("Temp 1", mRect.centerX(), radius * 2, mTextPaint);
}
This code produces what I need as an arc and circles, but I'm not able to draw degrees on the circle sides and a text below it
Any help??
Hi im having difficulties on drawing dots on arc's both ends (start and end)
Although I can draw arc on canvas. Heres my sample code for drawing arc.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float width = (float) getWidth();
float height = (float) getHeight();
float radius;
if (width > height) {
radius = height / 4;
} else {
radius = width / 4;
}
float center_x, center_y;
final RectF oval = new RectF();
center_x = width / 2;
center_y = height / 2;
oval.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
float percent = 25;
float arcRadius = 360;
float angle = arcRadius * (percent/100);
canvas.drawArc(oval, 270, 360, false, trackpaint);
canvas.drawArc(oval, 270, angle, false, arcPaint);
}
the only missing is putting circles on start and end points of the arc. I've tried this link but it doest work Calculate Arc Center Point, Knowing It's Start and End Degrees. Any help will be much appreciated. Thank you
the coordinate of the start point is:
double startX = Math.cos(Math.toRadians(270)) * radius + center_x;
double startY = Math.sin(Math.toRadians(270)) * radius + center_y;
the coordinate of the end point is:
double endX = Math.cos(Math.toRadians(270 + angle)) * radius + center_x;
double endY = Math.sin(Math.toRadians(270 + angle)) * radius + center_y;
and then you can draw circle using the start point and end point:
canvas.drawCircle(startX, startY, 10, paint);
canvas.drawCircle(endX, endY, 10, paint);
Get path from the ARC
Use PathMeasure class to retrieve Path length and path TAN, using starting or Ending X and Y coordinates of the ARC
Use this X and Y coordinates to draw circle.
Example for circle at the start of the ARC:
final Path mPath = new Path();
mPath.addArc(oval, startAngle, sweepAngle);
PathMeasure pm = new PathMeasure(mPath, false);
float[] xyCoordinate = { arcStarting.x , arcStarting.y };
float pathLength = pm.getLength();
pm.getPosTan(0, xyCoordinate, null);//"0 for starting point"
PointF point = new PointF(xyCoordinate[0], xyCoordinate[1]);
canvas.drawCircle(point.x, point.y, 10, YourPaintHere)
Can someone explain exactly how rotation of the canvas about a point works ?
I have lines and I want to draw text parallel to each line. I have worked out the trigonometry required to calculate the angle of the line and it`s centre point.
When I try rotate the canvas about the start point of the line, then draw the text and restore, I am always getting strange offsets which obviously means I do not quiet get how the rotation is working ...
Can someone explain what happens when you rotate the canvas about a point and how the then drawing on co-ords X,Y translates back ?
see the following class:
class V extends View {
private Paint mPaint;
public V(Context context) {
super(context);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(0xffeeeeee);
mPaint.setTextSize(24);
}
#Override
protected void onDraw(Canvas canvas) {
float x = 100;
float y = 50;
float dx = 60;
float dy = 40;
canvas.drawLine(x, y, x + dx, y + dy, mPaint);
canvas.save();
float degrees = (float) (180 * Math.atan2(dy, dx) / Math.PI);
canvas.rotate(degrees, x, y);
canvas.drawText("text", x, y, mPaint);
canvas.restore();
}
}
now i hope everything should be clear how canvas rotation works...
I have following code:
protected void onDraw(Canvas canvas)
{
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
xRatio = getWidth()*1.0f / picWidth;
yRatio = getHeight()*1.0f / picHeight;
canvas.drawBitmap( sourceImage, null , new Rect(0,0,getWidth(),getHeight()),paint);
for (int i = 0; i < eyesMidPts.length; i++)
{
if (eyesMidPts[i] != null)
{
// where x and y are eyes mid point coordinates
float x = eyesMidPts[i].x*xRatio;
float y = eyesMidPts[i].y*yRatio;
float radius = (float) (eyesDistance[i]);
float left = x - radius;
float right = x + radius;
float top = y - radius;
// we want to increase the bottom radius by double to get other half of the face.
float bottom = (float) (y + radius * 2);
paint.setStrokeWidth(eyesDistance[i] /20);
RectF ovalBounds = new RectF();
ovalBounds.set(left, top, right, bottom);
canvas.drawOval(ovalBounds, paint);
}
}
}
Code encompass full face if face is straight. But does not get complete circle around if face is tilted. I am not sure how euler angels work but am hoping it is to get tilt on the face detection. Can someone please help me with this show me some example code so that circle encompasses whole face.
Why do you use RectF to draw a circle? Is it a 'true' circle, or is it really oval / ellipse?
If it's just a circle, why don't you use this.
canvas.drawCircle(x, y, radius, paint);
So you won't need to transform Rectf's points if it's tilted :)
update:
I believe this should work, I don't have an android workflow setup with me to really test it; sorry if it's a miss.
Matrix m = new Matrix(); //creates identity matrix
m.setRotate(tilt_angle); //rotate it by the tilt angle
m.mapRect(ovalBounds); //transform the rect
// RectF face: face position and dimentions
// Create Bitmap where to draw an oval
Bitmap ovalBmp = Bitmap.createBitmap( face.width(), face.height(), config );
canvasBmp = new Canvas(ovalBmp); // Get a canvas to draw an oval on the Bitmap
canvasBmp.drawOval( new RectF( 0, 0, face.width(), face.height ), paint );
// Create transformation matrix
transforMatrix = new Matrix();
// Rotate around center of oval
transforMatrix.postRotate( tilt_angle, face.width() / 2, face.height() / 2 );
transforMatrix.postTranslate( face.left, face.top );
canvas.drawBitmap( ovalBmp, transforMatrix, null );
ps: I assume by tilt angle you mean roll, where pitch is rotation around X axis, yaw is rotation around Y axis and roll is rotation around Z axis.