How can I draw rectangle at start and end points but still maintain the same width? ie 10 pixels width.
Rect simplr = new Rect();
simplr.set(start.x, start.y, end.x, end.y);
thank you
Thickness is normally something you set in the Paint, not in the Rect.
See http://developer.android.com/reference/android/graphics/Paint.html#setStrokeWidth(float)
Related
I can't just seem to figure it out. I am trying to draw a segmented circle (what looks like circle inside a circle). However I want the segments to have specific colors and to be transparent inside the smaller circle. Preferably , I would like to make the color of the segmented lines different than the circle
Here are the solutions I had in mind:
1- Draw arc with fill color for the bigger circle and draw a circle for the small circle. 2 problems with this. First one is that the inner circle area is no longer transparent as it takes the color from the bigger one. Second problem is that the segmentation lines of the outer circle is going all the way to the center (not only to the inner circle perimeter)
2) Draw arcs for the bigger outer circle and draw circle for the inner circle. Set it to be color filled but don't show strokes. Then draw another outer circle on top with no fill just to show strokes. And then draw lines between the inner and outer circle using the calculations ( angle and radius) to determine where the lines are... Very convoluted solution, there has to be another way. Even with this solution, still have problem with the color showing in the center but maybe playing with gradient can help.
I read so much on SO but I couldn't figure the right answer as many answers would remove the control of circle parameters
HEELP!!!
#Override
public void draw(Canvas canvas) {
float size = Math.min(getWidth(),getHeight());
paint.setStrokeWidth(size/4);
paint.setStyle(Paint.Style.STROKE);
final RectF oval = new RectF(0, 0, getWidth(), getHeight());
oval.inset(size/8,size/8);
paint.setColor(Color.RED);
Path redPath = new Path();
redPath.arcTo(oval, 0, 120, true);
canvas.drawPath(redPath, paint);
paint.setColor(Color.GREEN);
Path greenPath = new Path();
greenPath.arcTo(oval, 120, 120, true);
canvas.drawPath(greenPath, paint);
paint.setColor(Color.BLUE);
Path bluePath = new Path();
bluePath.arcTo(oval, 240, 120, true);
canvas.drawPath(bluePath, paint);
paint.setStrokeWidth(2);
paint.setColor(0xff000000);
canvas.save();
for(int i=0;i<360;i+=40){
canvas.rotate(40,size/2,size/2);
canvas.drawLine(size*3/4,size/2,size,size/2,paint);
}
canvas.restore();
final RectF ovalOuter = new RectF(0, 0, getWidth(), getHeight());
ovalOuter.inset(1,1);
canvas.drawOval(ovalOuter,paint);
final RectF ovalInner = new RectF(size/4, size/4, size*3/4,size*3/4);
canvas.drawOval(ovalInner,paint);
}
I'm drawing arcs using the Path class and strokes. Style.STROKE gives arcs without filling. Stroke width is set to size/4 which is a quarter of the view. Half of that stroke width goes outside and the second half goes inside, like this:
xxxxxxxx outer border of the arc of width 5
xxxxxxxx
------------ stroke
xxxxxxxx
xxxxxxxx inner border of the arc
That's why I'm using insets - I need to offset the stroke a bit in order to fit it in the view. Without insets the arcs are cut by all four sides of the view.
And why canvas rotation? Because it's easier to rotate the canvas with built-in methods than calculate lines manually. Rotation uses trigonometric functions and quickly becomes quite complex, hard to read and error prone. Basically I'm rotating the paper and drawing straight lines.
I want to be able to draw text and rectangles to the canvas after I have rotated them along their center. So I am making a test case where I have a blue square that does not get rotated, and a red square that should be rotated. THey are the same size, and should share the same center "pivot point". I have the following code:
Paint p = new Paint();
p.setColor(Color.CYAN);
p.setAlpha(200);
canvas.drawRect(new Rect(100,100,300,300), p);
canvas.save();
canvas.rotate(45,250,250);// 250,250 is the center of the blue rectangle
p.setColor(Color.RED);
p.setAlpha(100);
canvas.drawRect(new Rect(100,100,300,300), p);
canvas.restore();
It gives me a result close to what I want, but I am missing some math, because it looks like the canvas also needs a translation applied. Here is the result:
What I am missing so that I can rotate the red rectangle along the center of the blue one, and they end up sharing the same center point like this:
The center of the blue rectangle is wrong.
center(x,y) = (left + (width/2), top + (height/2))
Note: width = 200, height = 200 so, center(x,y) = (200,200)
Change to this, and it works:
canvas.rotate(45,200,200);// 200,200 is the center of the blue rectangle
I am drawing an arc with a border by painting two arcs, one over the other the first being slightly larger.
The issue is with "slightly larger" this can end up with the border not always being even all the way round.
Both the arcs I am drawing have the same radius, I simply make it larger by adding a degree to the start and two degrees to the end (necessary to ensure the borders on either end of the arc are equal) and increasing the stroke width.
In the supplied picture the thicker border edge is the smallest I can possibly make it while it is still visible. (-1 degree off the inner arc)
I have considered drawing the arc outline with four separate calls two straight lines for either end and two arcs. This seems quite inefficient for what I want to achieve.
I am wondering if anyone has any suggestions about how else I could draw a border thats even, minimizing the number of draw/canvas rotation calls if possible.
Relevant code sample for current solution:
Paint mOutlinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint mFillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mFillPaint.setStyle(Style.STROKE);
mFillPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
mFillPaint.setColor(Color.TRANSPARENT);
mFillPaint.setStrokeWidth(mValueWidth);
mOutlinePaint.setStyle(Style.STROKE);
mOutlinePaint.setStrokeWidth(mBorderWidth);
mOutlinePaint.setColor(Color.WHITE);
mRect.set(mHalfXSubRadius, mHalfYSubRadius, mHalfXAddRadius, mHalfYAddRadius);
canvas.drawArc(mRect, ARC_START-1, MAX_ARC+2, false, mOutlinePaint);
canvas.drawArc(mRect, ARC_START, MAX_ARC, false, mFillPaint);
U shouldnt make your arc bigger, instead try to draw the same sized arc (in white), X pixel right,down,up,left,corners as well (total of 8 drawings).
where X is the border size u want.
after that draw the main arc (in gray) in the middle.
psuedo code:
paint=white;
drawArc(x,y+2);
drawArc(x,y-2);
drawArc(x+2,y+2);
drawArc(x+2,y-2);
drawArc(x-2,y+2);
drawArc(x-2,y+2);
drawArc(x+2,y);
drawArc(x-2,y);
paint=gray;
drawArc(x,y);
I'm trying to draw a simple Rect on a Canvas that is at the X coordinate of 360, and the Y coordinate of 0. I can draw my Rect if I make the X coordinate to 0, but when I make it 360, the square becomes distorted and becomes a rectangular shape rather than a square anymore. My screen size is 640px wide, so there should be no problem here. I can draw Bitmaps with the same specifications and it will draw normally. Why is it that Rects don't draw correctly? Is it somehow that the X coordinate is only in DP rather than PX? Then why does that affect the actual size of the Rect? I'm really confused.
Rect square6 = new Rect();
square6.set(360, 0, 60, 60);
You should read the reference to the Rect in Android, The set func of Rect is public void set (int left, int top, int right, int bottom), you set your rect start from (360, 0) and ends at (60, 60), you should change the parmas to (360, 0, 420, 60). It will work.
In a custom view, is there a way I can set the center of a drawable at a certain point on the canvas? (I don't want to deal with figuring out rectangular bounds for the drawable...)
When you make the call to draw the Bitmap, draw it at a point with it's left and top attributes set to the position minus half the image's width and height, respectively. That will center it at the point you want.
IE.
canvas.drawBitmap(bitmap, xPos - bitmap.getWidth()/2, yPos - bitmap.getHeight()/2, new Paint());