I'm drawing text on canvas with this code:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
Rect bounds = new Rect();
paint.setColor(Color.BLACK);
paint.setTextSize(50);
paint.getTextBounds(first, 0, first.length(), bounds);
canvas.drawText(first, (canvas.getWidth() - bounds.width()) / 2, 50, paint);
}
Here is result:
But I want the text to have bigger height, I want something like this:
I don't want to change the font size, only the height of this text. How can i do this ?
I found solution for this:
// Closing hardware acceleration
setLayerType(LAYER_TYPE_SOFTWARE, paint);
paint.getTextBounds(first, 0, first.length(), bounds);
float posX = (canvas.getWidth() - bounds.width()) / 2; // center
float posY = ((canvas.getHeight() - bounds.height()) / 2); // center
canvas.scale(1, 10, posX, posY);
canvas.drawText(first, posX, posY, paint);
Related
I am new to android programming and trying to create 5 rectangles(two on the right side of the screen and three on the left side of the screen) on android using the canvas drawRect method, but it only shows the top left rectangle only. What am I doing wrong here? Thanks for your help.
Here's my RectAngle class:
public class RectAngle extends View {
public RectAngle(Context context) {
super(context);
setFocusable(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float x = getWidth();
float y = getHeight();
Paint topLeftRect = new Paint();
Paint bottomLeftRect = new Paint();
Paint topRightRect = new Paint();
Paint midRightRect = new Paint();
Paint bottomRightRect = new Paint();
// Draw the top left rectangle
topLeftRect.setStyle(Paint.Style.FILL);
//topLeftRect.setColor(Color.WHITE);
topLeftRect.setColor(Color.parseColor("#FFFF99"));
// canvas.drawPaint(topLeftRect);
canvas.drawRect(0, 0, x / 2, y / 2, topLeftRect);
//Draw the bottom left rectangle
bottomLeftRect.setStyle(Paint.Style.FILL);
//bottomLeftRect.setColor(Color.WHITE);
// canvas.drawPaint(bottomLeftRect);
bottomLeftRect.setColor(Color.parseColor("#FFFF99"));
canvas.drawRect(0, y / 2, x / 2, 0, bottomLeftRect);
//Draw the top tight rectangle
topRightRect.setStyle(Paint.Style.FILL);
//topRightRect.setColor(Color.WHITE);
topRightRect.setColor(Color.parseColor("#FF6600"));
//canvas.drawPaint(topRightRect);
canvas.drawRect(x / 2, 0, 0, y / 3, topRightRect);
// Draw the middle right rectangle
midRightRect.setStyle(Paint.Style.FILL);
//midRightRect.setColor(Color.WHITE);
midRightRect.setColor(Color.parseColor("#66FFFF"));
// canvas.drawPaint(midRightRect);
canvas.drawRect(x / 2, 0, 0, y / 3, midRightRect);
//Draw the bottom right rectangle
bottomRightRect.setStyle(Paint.Style.FILL);
//bottomRightRect.setColor(Color.WHITE);
bottomRightRect.setColor(Color.parseColor("#CCCC00"));
// canvas.drawPaint(bottomRightRect);
canvas.drawRect(x/2, y/3, 0, 0, bottomRightRect);
}
}
Here's my main activity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new RectAngle(this));
//setContentView(R.layout.activity_main);
}
Here's an image of my emulator. I am only getting one colored rectangle and it should be 4 more on the bottom left, top right, middle right, and bottom right of the screen.
Emulator image
public class RectAngle extends View {
public RectAngle(Context context) {
super(context);
setFocusable(true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float x = getWidth();
float y = getHeight();
Paint topLeftRect = new Paint();
Paint bottomLeftRect = new Paint();
Paint topRightRect = new Paint();
Paint midRightRect = new Paint();
Paint bottomRightRect = new Paint();
// Draw the top left rectangle
topLeftRect.setStyle(Paint.Style.FILL);
//topLeftRect.setColor(Color.WHITE);
topLeftRect.setColor(Color.parseColor("#FFFF99"));
// canvas.drawPaint(topLeftRect);
canvas.drawRect(0, 0, x / 2, y / 2, topLeftRect);
//Draw the bottom left rectangle
bottomLeftRect.setStyle(Paint.Style.FILL);
//bottomLeftRect.setColor(Color.WHITE);
// canvas.drawPaint(bottomLeftRect);
bottomLeftRect.setColor(Color.parseColor("#FF5599"));
canvas.drawRect(0, y / 2, x / 2, y, bottomLeftRect);
//Draw the top tight rectangle
topRightRect.setStyle(Paint.Style.FILL);
//topRightRect.setColor(Color.WHITE);
topRightRect.setColor(Color.parseColor("#FF6600"));
//canvas.drawPaint(topRightRect);
canvas.drawRect(x / 2, 0, x, y / 3, topRightRect);
// Draw the middle right rectangle
midRightRect.setStyle(Paint.Style.FILL);
//midRightRect.setColor(Color.WHITE);
midRightRect.setColor(Color.parseColor("#66FFFF"));
// canvas.drawPaint(midRightRect);
canvas.drawRect(x / 2, y/3, x, 2*y / 3, midRightRect);
//Draw the bottom right rectangle
bottomRightRect.setStyle(Paint.Style.FILL);
//bottomRightRect.setColor(Color.WHITE);
bottomRightRect.setColor(Color.parseColor("#CCCC00"));
// canvas.drawPaint(bottomRightRect);
canvas.drawRect(x/2, 2*y/3, x, y, bottomRightRect);
}
}
How can i cut a circle from a different shapes of bitmap in android.
I tried this code, but some images are stretched:
public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
int targetWidth = 240;
int targetHeight = 200;
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
targetHeight,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addCircle(((float) targetWidth - 1) / 2,
((float) targetHeight - 1) / 2,
(Math.min(((float) targetWidth),
((float) targetHeight)) / 2),
Path.Direction.CCW);
canvas.clipPath(path);
Bitmap sourceBitmap = scaleBitmapImage;
canvas.drawBitmap(sourceBitmap,new Rect(0, 0, sourceBitmap.getWidth(),
sourceBitmap.getHeight()),
new Rect(0, 0, targetWidth, targetHeight), null);
return targetBitmap;
}
If you want a circular cut of an image, you need to find the largest square that centers the image. Considering this, following line fixes your stretching problem:
Bitmap bitmap = ThumbnailUtils.extractThumbnail(bitmap, radius, radius, ThumbnailUtils.OPTIONS_RECYCLE_INPUT);
This method creates a circular cut of the target bitmap:
private Bitmap getCircularBitmap(int radius, Bitmap bitmap) {
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap bmp = Bitmap.createBitmap(radius, radius, conf);
Canvas canvas = new Canvas(bmp);
// creates a centered bitmap of the desired size
bitmap = ThumbnailUtils.extractThumbnail(bitmap, radius, radius, ThumbnailUtils.OPTIONS_RECYCLE_INPUT);
BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);
RectF rect = new RectF(0, 0, radius, radius);
canvas.drawRoundRect(rect, radius, radius, paint);
return bmp;
}
One approach would be to use a BitmapShader.
The idea is to use a Paint with a BitmapShader to draw a texture using the bitmap. Then you just draw a circle on the canvas.
Here is an excellent example of using the BitmapShader. In this example, a rectangle with rounded corners is drawn, but it could just as easily be a circle.
Android Recipe #1, image with rounded corners
Im trying to create a vignette effect for my app. I've been searching a lot for help achieving this but was unable to find anything.
I recently found this tutorial.
And i tried to implement it in my app with this code:
public int[] drawBitmap(Bitmap originalBitmap){
Bitmap mask;
Paint paint = new Paint();
mask = convertToAlphaMask(BitmapFactory.decodeResource(context.getResources(), R.drawable.spot_mask));
Shader shader = createShader(mask);
paint.setShader(shader);
Bitmap tempBit = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(tempBit);
canvas.drawBitmap(originalBitmap, 0, 0,paint);
tempBit.getPixels(pixels, 0, tempBit.getWidth(), 0, 0, tempBit.getWidth(), tempBit.getHeight());
return pixels;
}
private static Bitmap convertToAlphaMask(Bitmap input) {
Bitmap a = Bitmap.createBitmap(input.getWidth(), input.getHeight(), Bitmap.Config.ALPHA_8);
Canvas c = new Canvas(a);
c.drawBitmap(input, 0.0f, 0.0f, null);
return a;
}
private static Shader createShader(Bitmap b) {
return new BitmapShader(b, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
}
But the effect of this looks like this:(the only change is at the top of the image)
http://postimg.org/image/rrivq28v1/
What have I done wrong?
Also, are there any other alternatives for applying a vignette effect on a bitmap?
Thanks!
After long time i found it
public Bitmap vignett(Bitmap bm, int p){
Bitmap image = Bitmap.createBitmap(bm.getWidth(),bm.getHeight(), Bitmap.Config.ARGB_8888);
int rad;
Canvas canvas = new Canvas(image);
canvas.drawBitmap(bm, 0, 0, new Paint());
if(bm.getWidth()<bm.getHeight()){
int o = (bm.getHeight()*2)/100;
rad = bm.getHeight() - o*p/3;
}else{
int o = (bm.getWidth()*2)/100;
rad = bm.getWidth() - o*p/3;
}
Rect rect = new Rect(0, 0, bm.getWidth(), bm.getHeight());
RectF rectf = new RectF(rect);
int[] colors = new int[] { 0, 0, Color.BLACK };
float[] pos = new float[] { 0.0f, 0.1f, 1.0f };
Shader linGradLR = new RadialGradient(rect.centerX(), rect.centerY(),rad, colors, pos, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(linGradLR);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setAlpha(255);
canvas.drawRect(rectf, paint);
return image;
}
here int p is standard value of seekbar from 1 to 100;
for intensity of effect u can set paint.setAlpha 0 to 255!!!
My first answer got deleted because i pointed to my solution via link. So I'll answer your question right here. The trick is to use 4 linear gradients. Applying them will give you a result that comes pretty close to a true Vignette effect. And it's freaking fast too ;) So here's part of my solution.
First you must create a canvas:
Canvas canvas = new Canvas(bitmapOut);
canvas.drawBitmap(mVignette.getBitmapIn(), 0, 0, null);
Then you define how far the effect should reach into your image:
int tenthLeftRight = (int)(width/5);
int tenthTopBottom = (int)(height/5);
Now you create your four shaders:
// Gradient left - right
Shader linGradLR = new LinearGradient(0, height/2, tenthLeftRight/2, height/2, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
// Gradient top - bottom
Shader linGradTB = new LinearGradient(width/2, 0, width/2, tenthTopBottom, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
// Gradient right - left
Shader linGradRL = new LinearGradient(width, height/2, (width-tenthLeftRight), height/2, Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
// Gradient bottom - top
Shader linGradBT = new LinearGradient(width/2, height, width/2, (height - tenthTopBottom), Color.BLACK, Color.TRANSPARENT, Shader.TileMode.CLAMP);
Now all that's left to do is to draw on the canvas:
Paint paint = new Paint();
paint.setShader(linGradLR);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setAlpha(125);
// Rect for Grad left - right
Rect rect = new Rect(0, 0, tenthLeftRight, height);
RectF rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
// Rect for Grad top - bottom
paint.setShader(linGradTB);
rect = new Rect(0, 0, width, tenthTopBottom);
rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
// Rect for Grad right - left
paint.setShader(linGradRL);
rect = new Rect(width, 0, width - tenthLeftRight, height);
rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
// Rect for Grad bottom - top
paint.setShader(linGradBT);
rect = new Rect(0, height - tenthTopBottom, width, height);
rectf = new RectF(rect);
canvas.drawRect(rectf, paint);
How could I fill the green portion between two arcs shown below using the paint and canvas methods?
Here is how I draw the two arcs, I also could figure out how to connect them with lines but I don't know how I can fill the inner area.
// set to stroke black
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth((float) STROKE_WIDTH);
// outside arc
RectF arc_oval_outside = new RectF((float) (getX()), (float) (getY()),
(float) (getX() + getWidth()), (float) (getY() + getHeight()));
canvas.drawArc(arc_oval_outside, (float) (0.0), (45.0) (ARC_SWEEP), false, paint);
// inside arc
RectF arc_oval_inside = new RectF((float) (getX() + ARC_WIDTH), (float) (getY() + ARC_WIDTH),
(float) (getX() + getWidth() - ARC_WIDTH), (float) (getY() + getHeight() - ARC_WIDTH));
canvas.drawArc(arc_oval_inside, (float) (0.0), (float) (ARC_SWEEP), false, paint);
Here is a simple way to draw filled arc with border:
Point center = new Point(canvas.getWidth()/2, canvas.getHeight()/2);
int inner_radius = 100;
int outer_radius = 150;
int arc_sweep = 90;
int arc_ofset = 30;
RectF outer_rect = new RectF(center.x-outer_radius, center.y-outer_radius, center.x+outer_radius, center.y+outer_radius);
RectF inner_rect = new RectF(center.x-inner_radius, center.y-inner_radius, center.x+inner_radius, center.y+inner_radius);
Path path = new Path();
path.arcTo(outer_rect, arc_ofset, arc_sweep);
path.arcTo(inner_rect, arc_ofset + arc_sweep, -arc_sweep);
path.close();
Paint fill = new Paint();
fill.setColor(Color.GREEN);
canvas.drawPath(path, fill);
Paint border = new Paint();
border.setStyle(Paint.Style.STROKE);
border.setStrokeWidth(2);
canvas.drawPath(path, border);
(The Path and Paint allocation is made to be clear not optimal)
I Know it could be a little bit late but I came with this approach from a iOS project, first draw contour and then draw the filling arc
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float width = (float)getWidth();
float height = (float)getHeight();
float radius;
//Get radius from the bigger size
if (width > height){
radius = height/2;
}else{
radius = width/2;
}
//Create Paint Object
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setFilterBitmap(true);
paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.STROKE);
//Create Contour Object
Path path = new Path();
float center_x, center_y;
center_x = width/2;
center_y = height/2;
//Configure rect for the outer ring
final RectF oval = new RectF();
oval.set(center_x - radius + 5,
center_y - radius + 5,
center_x + radius - 5,
center_y + radius - 5);
//Add outer arc
path.addArc(oval, 0, 90);
//Configure rect for the inner ring
oval.set(center_x - radius + 30,
center_y - radius + 30,
center_x + radius - 30,
center_y + radius - 30);
//Add inner arc to the path but draw counterclockwise
path.arcTo(oval, -270, -90);
//close path
path.close();
//Create Paint Object
Paint fillPaint = new Paint();
fillPaint.setColor(Color.YELLOW);
fillPaint.setFilterBitmap(true);
fillPaint.setAntiAlias(true);
fillPaint.setStrokeWidth(21);
fillPaint.setStyle(Paint.Style.STROKE);
//Create Contour Object
Path fillPath = new Path();
//Configure rect for the fill ring
oval.set(center_x - radius + 17,
center_y - radius + 17,
center_x + radius - 17,
center_y + radius - 17);
//Add fill arc
fillPath.addArc(oval, 0, 90);
//draw fill path
canvas.drawPath(fillPath,fillPaint);
//draw outer path
canvas.drawPath(path, paint);
}
A helpfull link: http://www.programering.com/a/MDO1czNwATE.html where addarc maths are quite well explained
Just posting another option using drawArc only. Basically we first draw the outer filled arc and then we draw the smaller inner arc using PorterDuff.Mode.CLEAR to erase and achieve the asked above.
Bitmap b = Bitmap.createBitmap(1200, 1200, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(b);
int radius = 40;
float startAngle = 45f; // your start angle
float sweepAngle = 90f; // your sweep angle
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.rgb(37, 181, 215));
paint.setStyle(Paint.Style.FILL);
// draw outer arc
RectF oval = new RectF(0, 0, canvas.getWidth(), canvas.getHeight());
canvas.drawArc(oval, startAngle, sweepAngle, true, paint);
// draw inner arc
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
oval = new RectF((canvas.getWidth() / 2) - radius, (canvas.getHeight() / 2) - radius, (canvas.getWidth() / 2) + radius, (canvas.getHeight() / 2) + radius);
canvas.drawArc(oval, startAngle, sweepAngle, true, paint);
ImageView.setImageBitmap(b);
Hope it helps someone.
I'm trying to rotate an image, but it's getting slightly messed up when I'm rotating it, and it looks like it's not rotating it on center. So if I go around it looks like it's being truncated. Is there a better method to get the "center" of the image?
public void RotateImageLeft() {
try {
BufferedImage newImage = new BufferedImage(originalImage.getWidth(), originalImage.getHeight(), originalImage.getType());
AffineTransform tx = new AffineTransform();
tx.rotate(Math.toRadians(-90.0), originalImage.getWidth() / 2, originalImage.getHeight() / 2);
Graphics2D g2 = newImage.createGraphics();
g2.drawImage(originalImage, tx, null);
originalImage = newImage;
this.repaint();
g2.dispose();
} catch (Exception ex) {
ex.toString();
}
//g2d.drawImage(getResImage(), rescale, x, y);
}
For full code disclosure, here's more code. Here's my painComponent overridden method:
public void paintComponent(Graphics g) {
super.paintComponent(g);
resizeImage();
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(getResImage(), rescale, x, y);
}
Here's the resizeImage() method that gets called:
public void resizeImage() {
Graphics g = getResImage().getGraphics();
g.setColor(Color.WHITE);
g.fillRect(0, 0, getResImage().getWidth(), getResImage().getHeight());
int scaledWidth = (int) ((getOriginalImage().getWidth() * getHeight()
/ getOriginalImage().getHeight()));
if (scaledWidth < getWidth()) {
int leftOffset = getWidth() / 2 - scaledWidth / 2;
int rightOffset = getWidth() / 2 + scaledWidth / 2;
g.drawImage(getOriginalImage(),
leftOffset, 0, rightOffset, getHeight(),
0, 0, getOriginalImage().getWidth(), getOriginalImage().getHeight(),
null);
} else {
int scaledHeight = (getOriginalImage().getHeight() * getWidth())
/ getOriginalImage().getWidth();
int topOffset = getHeight() / 2 - scaledHeight / 2;
int bottomOffset = getHeight() / 2 + scaledHeight / 2;
g.drawImage(getOriginalImage(),
0, topOffset, getWidth(), bottomOffset,
0, 0, getOriginalImage().getWidth(), getOriginalImage().getHeight(),
null);
}
}
I'm using the ResizeImage method since I want any image to fit correctly on my 720/432 panel.
Here's some example pictures.
Pre-rotated
Post-rotated:
New code: (new image is the correct height/width of rotated image, still getting black bars. Screens below.
public void RotateImageLeft() {
try {
BufferedImage newImage = new BufferedImage( originalImage.getHeight(),originalImage.getWidth(), originalImage.getType());
AffineTransform tx = new AffineTransform();
tx.rotate(Math.toRadians(-90.0), newImage.getWidth() / 2, (newImage.getHeight() / 2));
Graphics2D g2 = newImage.createGraphics();
g2.drawImage(originalImage, tx, null);
originalImage = newImage;
this.repaint();
g2.dispose();
} catch (Exception ex) {
ex.toString();
}
}
Post rotate:
From my answer to another similar question
If you're rotating then this will work for 90 degrees.
move image so centered "around" the origin
plain rotate() call with no extra parameters
Move image back into the center remembering that now width = old height and height = old width.
Also remember the affine transform steps work in reverse order.
AffineTransform tx = new AffineTransform();
// last, width = height and height = width
tx.translate(originalImage.getHeight() / 2,originalImage.getWidth() / 2);
tx.rotate(Math.PI / 2);
// first - center image at the origin so rotate works OK
tx.translate(-originalImage.getWidth() / 2,-originalImage.getHeight() / 2);
If you want to rotate an image without cropping you need to add black bars around it first, since a rotated rectangle will always have a bigger bounding box than an axis-aligned one (exception: rotating a square by multiples of 90 degrees).
So what you want to do is do some trigonometric calculations beforehand to decide the maximum Width/Height of the rotated image, and combine that with the original Width/Height. Resize your image (centering it) using those dimensions, rotate it, and then crop it back to the Width/Height of the rotated image.