So I seem to have a conundrum. I need to add multiple custom views to a framelayout. The code for this is working just fine. However, I wish to access the underlying bitmap that the canvas uses in the views onDraw method. Like this one (in a class that extends View):
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawARGB(Color.alpha(bgColor), Color.red(bgColor),
Color.green(bgColor), Color.blue(bgColor));
m.reset();
m.setTranslate(imgPosX - ((float) userImage.getWidth() / 2.0f), imgPosY
- ((float) userImage.getHeight() / 2.0f));
m.postRotate(angle);
m.postScale(1.0f, 1.0f);
canvas.drawBitmap(userImage, m, null);
}
I wish to erase certain pixels essentially. Now, I know I can do this via the setPixel method which is fine but it is exceptionally slow and not satisfactory. I have a working ndk function that does exactly what I want, but it passes in a bitmap. I know I can use a SurfaceView instead of a View to access the bitmap like that, however as mentioned here multiple SurfaceViews in a FrameLayout isn't an option. So, I would think I need to manipulate the bitmap itself used by the canvas in the onDraw method. How would I go about doing this? or alternatively I don't mind creating another bitmap, passing it into the ndk function and returning/drawing that, however would I do a canvas.drawBitmap with transparent pixels?
Have you looked into setting the PorterDuff mode on a Paint object?
use paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR)) then draw over the pixels that you want to erase
edit: What exactly are you trying to clear? There are multiple modes and you may need to select a different one depending on what you are trying to do. Here is an example of a function I currently use to crop Bitmaps to a circle.
public static Bitmap crop_circle_center(Bitmap bitmap) {
final int diameter = Math.min(bitmap.getWidth(), bitmap.getHeight());
Bitmap output = Bitmap.createBitmap(diameter,
diameter, Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
rect.offset(-(bitmap.getWidth()-diameter)/2, -(bitmap.getHeight()-diameter)/2);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(diameter/ 2, diameter/ 2,
diameter / 2, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, null, rect, paint);
return output;
}
Related
I basically have an ImageView which got modified with Canvas and looks like a cirlce. (original image had the dimensions of a square (500x500))
Image what the starting position looks like:
http://imgur.com/bvXdLoP
(red is transparent and got removed with help of the Canvas method)
The animation should take aroud 1000 miliseconds and during this time step for step restore to the original picture. So in the end there should be a sqaure again.
In other words the cut off corners, which are the differnce between a square and a circle (and red marked in the image), get step for step restored in around 1000 milliseconds, with a sort of spreading looking animation.
Don't really have any clue on how to achieve this, so I can just share the Canvas method I used to cut off the corners (if it helps :X):
private Bitmap createCircleImage(Bitmap bitmap) {
Bitmap bmp;
bmp = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(bitmap,
BitmapShader.TileMode.CLAMP,
BitmapShader.TileMode.CLAMP);
float radius = bitmap.getWidth() / 2f;
Canvas canvas = new Canvas(bmp);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);
canvas.drawCircle(bitmap.getWidth()/2,bitmap.getHeight()/2,bitmap.getHeight()/2, paint);
return bmp;
}
Appreciate any help,
thank you!
There are many ways to achieve such behavior. For example you can create custom view and override its onDraw method such as
#Override
public void onDraw(Canvas canvas) {
canvas.drawCircle(viewWidth/2, viewHeight/2, currentRadius, paint);
}
and then you can just increase the radius little by little and invalidate the view.Since view is by default will clip on its clipBounds (you can only draw inside viewidth x viewheight rectangle unless you set it otherwise) you will get the effect that you want. And then you can tweak the interpolation to achieve smoother and more natural animation.
note: a bitmap shader is attached to the paint (you already know chow to create it). I don't include it in the code, since you shouldn't initialize it inside onDraw method for performance reason.
I currently have a button template (layout) as XML, where I load it off resources in my code and dynamically create the button.
So here's the question, is there any possible way to crop/cut the buttons' (or any view for that matter) into a specific shape?
Let's say I have a rectangle button, am I able to cut it to create some triangular form with it? here's an example:
What are the possibilities on there without having to create a custom Bitmap for it? (since the XML uses specific stroke/radius stuff which wouldn't work correctly on a Bitmap)
Is it possible for it to keep its size and margins even after the cuts? I'm really interested to know.
Thanks in advance to anyone willing to help!
You can use Canvas for what you want. It will allow you to modify the view by drawing shapes, erasing some area etc.
For example, following function will return a circular cropped bitmap of the initial bitmap provided:
public Bitmap getCroppedBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle((bitmap.getWidth() / 2), (bitmap.getHeight() / 2),
(output.getWidth() / 2), paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
canvas = null;
paint = null;
// bitmap.recycle();
return output;
}
To convert view into bitmap, see this.
I'm developing an Android application and I would like to blend Bitmap with a filter like "Multiply" or "Difference" from Photoshop. Bitmap1 is translating horizontally and Bitmap2 vertically.
I had few ideas :
1) Create a method which do some calculation to find the intersection part of the two Bitmap (Requires to cross 2 matrix every frame, very heavy, seems impossible ?). Then crop the intersection on the 2 Bitmap, blend them, and finally draw it. Another idea would be to do a ANDing between the two Bitmap, maybe faster than the other method, does thi function already exist ?
2) OpenGL ES ? But I really don't understand how to use it.
3) But recently I have found this sample code which blend two Bitmap on a canvas and use a paint. The result is the one I want BUT there is still no animation. So I've create a new Class (extends View) in addition to this activity, with the method onDraw(Canvas canvas).
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_compo);
Bitmap bm1 = BitmapFactory.decodeResource(getResources(), R.drawable.bm1);
Bitmap bm2 = BitmapFactory.decodeResource(getResources(), R.drawable.bm2);
blend(bm1,bm2);
}
private void blend(Bitmap bm1, Bitmap bm2){
DisplayMetrics metrics = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics(metrics);
int h = metrics.heightPixels;
int w = metrics.widthPixels;
/// BLEND MODE ///
// Create result image
Bitmap.Config conf = Bitmap.Config.ARGB_8888; // see other conf types
Bitmap result = Bitmap.createBitmap(w, h, conf);
Canvas canvas = new Canvas();
canvas.setBitmap(result);
// Get proper display reference
BitmapDrawable drawable = new BitmapDrawable(getResources(), result);
ImageView imageView = (ImageView)findViewById(R.id.photo1);
imageView.setImageDrawable(drawable);
// Draw base
canvas.drawBitmap(bm2, 0, 0, null);
// Draw overlay
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(Mode.MULTIPLY));
paint.setShader(new BitmapShader(bm1, TileMode.CLAMP, TileMode.CLAMP));
canvas.drawRect(700, 700, bm2.getWidth(), bm2.getHeight(), paint);
}
Here is the result with changing the value in 'canvas.drawRect()' :
Before translation
After translation
Do you have other solutions ? Or suggestions which would help to realize my filter on animate views ? (The perfect solutions would be to add something like android:blendMode="Multiply" in the XML, but it doesn't seem as easy)
Thank you in advance. J'.
I have an android application in which I need to download text from a website, convert it into bitmap format and display it on an LED-based display board.
I am struggling with the bitmap conversion.
Tried to use the following:
Bitmap mybitmap = Bitmap.createBitmap(100, 16, Bitmap.Config.ALPHA_8);
Canvas c = new Canvas(mybitmap);
c.drawText("0", 0, 0, paint);
But it doesn't seem to be working. Any suggestions?
Update:
Paint object is initialized like this:
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
paint.setTextSize(16);
paint.setAntiAlias(true);
paint.setTypeface(Typeface.MONOSPACE);
I think you draw outside the image. Try setting y to 16.
c.drawText("0", 0, 16, paint);
Note that when drawing text the coordinate origin is the lower left coordinate corner.
I'm trying to create a function that tints a Bitmap,
this works...
imgPaint = new Paint();
imgPaint.setColorFilter(new LightingColorFilter(color,0));
//when image is being drawn
canvas.drawBitmap(img,matrix,imgPaint);
However, when the bitmap has to be drawn constantly (every frame) , I start to see screen lag, because this didn't occur before the color filter was set, I believe that it is applying the filter every time I need the canvas drawn.
Is there a way to apply the paint once to the bitmap and have it permanently changed?
Any help appreciated :)
Create a second bitmap and draw the first bitmap into it using the color filter. Then use the second bitmap for the high-volume rendering.
EDIT: Per request, here is code that would do this:
public Bitmap makeTintedBitmap(Bitmap src, int color) {
Bitmap result = Bitmap.createBitmap(src.getWidth(), src.getHeight(), src.getConfig());
Canvas c = new Canvas(result);
Paint paint = new Paint();
paint.setColorFilter(new LightingColorFilter(color,0));
c.drawBitmap(src, 0, 0, paint);
return result;
}
You would then call this method once to convert a bitmap to a tinted bitmap and save the result in an instance variable. You would then use the tinted bitmap directly (without a color filter) in your method that draws to canvas. (It would also be a good idea to pre-allocate the Paint object you will be using in the main draw method and save it in an instance variable as well, rather than allocating a new Paint on every draw.)