I want to draw subparts of a bitmap, but at a different size. If the size is bigger than the source rectangle in the bitmap, then I want that section of the bitmap to tile to fill the destination area. However, instead of getting tiled they are getting stretched.
I set up all the variables as follows:
Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.image);
Rect srcRect = ...
Rect dstRect = ...
Paint p = new Paint();
p.setShader(new BitmapShader(b, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));
And then in the draw() method I draw as follows:
canvas.drawBitmap(b, srcRect, dstRect, p);
What am I doing wrong? How should I draw srcRect to dstRect such that my subpart of the bitmap gets tiled?
I discovered the problem, put succinctly: shaders on bitmaps don't work that way.
To draw a rectangle tiled with a specific Bitmap you have to use Canvas.drawRect(), with a Paint that has a BitmapShader. However, Android dev can't ever be as simple as that.
First you have to cut out the srcRect to a separate Bitmap (caching this somewhere since I don't think this is a cheap operation), like so:
Bitmap t = Bitmap.createBitmap(b, srcRect.left, srcRect.top, srcRect.right-srcRect.left, srcRect.bottom-srcRect.top);
Then you have to create the Paint and the BitmapShader:
BitmapShader bs = new BitmapShader(t, TileMode.REPEAT, TileMode.REPEAT);
Paint p = new Paint();
p.setShader(bs);
Then you can finally draw to the destination rectangle, but first you have to set up a translation matrix for the shader or else it won't start from the correct place and might bugger up completely if your tile mode is CLAMP:
Matrix m = new Matrix();
m.postTranslate(dstRect.left, dstRect.right);
p.getShader().setMatrix(m);
canvas.drawRect(dstRect, p);
Related
I'm trying to get cut a jigsaw puzzle piece out of an image, creating a new Bitmap image. I'm using a Path object to do this. This is the current result.
And how I achived this
Path path = new Path();
// Multiple path methods to create shape of puzzle piece...
path.close();
Bitmap source = BitmapFactory.decodeResource(getResources(), R.drawable.flowers);
Bitmap workingCopy = source.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(workingCopy);
path.setFillType(Path.FillType.INVERSE_WINDING);
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawPath(path, paint);
((ImageView) findViewById(R.id.myImage)).setImageBitmap(workingCopy);
I wish I could have it transparent instead of black and cut out everything outside the bounds of path.
I've tried it using a PNG-file with transparancy, and the background is transparent in stead of black.
I'm using the mask a bitmap with another. The operation succeeds well, unfortunately the result of masking seen a slight black border, as you can see in the image:
How do I remove this border? in the source image is not there.
I'll post the code I'm using:
public Bitmap mask(Bitmap source) {
Bitmap targetBitmap = Bitmap.createBitmap(getWidth(),getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
paint.setAntiAlias(true);
paint.setDither(true);
canvas.drawBitmap(source, 0, 0, null);
canvas.drawBitmap(getMask(), 0, 0, paint);
paint.setXfermode(null);
return targetBitmap;
}
where getMask () returns the Bitmap that represents the figure of the Puzzle.
I hope to receive your help, thank you all
Sorry for my english :-)
UPDATE:
the black border is what I point out in this picture:
UPDATE:
place the sequence of transformation. The third image would be identical to the first but without color. The problem is the black edge of the puzzle.
I hope to be more clear:
The way I draw images with mask is kind of the other way around from what you do.
public Bitmap mask(Bitmap source) {
Bitmap targetBitmap = Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
// paint.setAntiAlias(true); // you've already set this in the constructor
paint.setDither(true);
canvas.drawBitmap(getMask(), 0, 0, null);
canvas.drawBitmap(source, 0, 0, paint);
// paint.setXfermode(null); // no need for this
return targetBitmap;
}
Note that PorterDuff.Mode is set to SRC_IN (not DST_in) and that the mask is drawn first and then the image on top of that mask. With this approach you can also draw the previous source as the base mask, add the new (puzzle) mask and then draw the final source/image on top of that with SRC_IN paint to add new puzzle pieces each time.
If that doesn't solve the black border, check that your mask doesn't have feathered (transparent) edges that might be causing these problems.
Also, ANTI_ALIAS_FLAG doesn't do anything on textures. If you want smoothly scaled textures use paint.setFilterBitmap(true);
I have written the code to draw the text on image its working fine I am capturing the image in potrait mode but application crashes when I am capturing the image in landscape mode,I am getting exception Java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor
Canvas canvas = new Canvas(photo);
Typeface tf = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Style.FILL);
paint.setTypeface(tf);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(12);
canvas.drawBitmap(photo, 0, 0, paint);
canvas.drawText(topaste, 10, 115, paint);
image.setImageBitmap(photo);
Basically the canvas object needs a fresh bitmap to draw to, passing in your immutable image defeats the point of the later draw operation. The following code creates a new bitmap for the canvas. You will need to replace the width and height variables to match your use case:
Bitmap b = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
Canvas canvas = new Canvas(photo);
Paint p = new Paint();
p.setAntiAlias(true);
p.setColor(Color.DKGRAY);
int y=getWindowManager().getDefaultDisplay().getWidth();
Config conf = Bitmap.Config.RGB_565;
Bitmap bmp =Bitmap.createBitmap(y,y,conf);
Canvas c = new Canvas(bmp);
c.drawCircle(y/2 ,y/2, y/3, p);
iv.setBackgroundDrawable(new BitmapDrawable(bmp));
By this code i do get circle ,which is looking as:-
Now the problem is that it doesnt look like a true circle ,and it looks like an oval shape..
So what should i do ??
Thanks in advance,....
iv.setBackgroundDrawable(new BitmapDrawable(bmp));
use setImageBitmap(), instead of setBackgroundDrawable(), and setScaleType() to FIT_CENTER
I need to overlay two images in live wallpaper. The overlay images is the jpg which needs to be set to "additive" overlay. it adds the pixel value rather than calculating the transparency. how can i achieve this in android ?
You can make use of Android's Bitmap and Drawable classes mixed with Canvas, and try something like in this snippet:
public static Drawable mergeImage(Drawable orig, Drawable over, int left, int top) {
Bitmap original = ((BitmapDrawable)orig).getBitmap();
Bitmap overlay = ((BitmapDrawable)over).getBitmap();
Bitmap result = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(result);
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(original, 0, 0, paint);
canvas.drawBitmap(overlay, left, top, paint);
return new BitmapDrawable(result);
}
I've coded a photo image gridview overlayered with "online status" using the above lines. Hope that it works for you too.
A more general approach may be to create a PorterDuffXfermode with your wanted PorterDuffMode and then set it on the Paint object that you use with your canvas, as referenced in mthama's answer but substituting some lines. This allows you to use other Porter-Duff modes as wanted/needed.
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(original, 0, 0, paint);
paint.setXferMode(new PorterDuffXferMode(PorterDuff.Mode.OVERLAY));
canvas.drawBitmap(overlay, left, top, paint);
Mind you, I haven't tried this, so go with mthama's answer. :)