问题
I have a image and I need to apply glow effect to center of the image using OnTouchListener
Something like this.
How can I achieve this effect? I have looked into examples where we can apply glow effect to outer part of the image.
We can achieve this by using a white image and place on top the background image, but can we do it without using images?
EDIT
I found this post as well but no solution.
Android : Image button or button Highlighted with Effect when Pressed
回答1:
On the setOnTouchListener
get the getDrawingCache()
of the image, Create a gradient bitmap of what you want and then overlay the images on top of one another
Try this
final ImageView imageView = (ImageView) findViewById(R.id.imageView1);
imageView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if(drawIt){
drawIt = false;
//Build the cache
imageView.buildDrawingCache();
Bitmap original = imageView.getDrawingCache();
//Build the gradient
Bitmap gradient = getGradient();
//Overlay the images
Bitmap finalImage = overlay(original,gradient,event.getX(),event.getY());
imageView.setImageBitmap(finalImage);
}
break;
case MotionEvent.ACTION_UP:
drawIt = true;
break;
}
return false;
}
});
private Bitmap getGradient() {
RadialGradient gradient = new RadialGradient(200 , 200, 200, 0xFFFFFFFF,
0x00000000, android.graphics.Shader.TileMode.CLAMP);
Paint p = new Paint();
p.setDither(true);
p.setShader(gradient);
Bitmap bitmap = Bitmap.createBitmap(400, 400, Config.ARGB_8888);
Canvas c = new Canvas(bitmap);
c.drawCircle(200, 200, 200, p);
return Bitmap.createScaledBitmap(bitmap, 50, 50, false);
}
private Bitmap overlay(Bitmap bmp1, Bitmap bmp2,float x, float y) {
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, new Matrix(), null);
// Use your x and y cordinates here
canvas.drawBitmap(bmp2, 100,100, null);
return bmOverlay;
}
Here is what I got
You can do your modifications here i have uploaded the project for you
Best of Luck
EDIT
To draw it at center use this line in the overlay
method
canvas.drawBitmap(bmp2, bmp1.getWidth()/2 - bmp2.getWidth()/2,bmp1.getHeight()/2 - bmp2.getHeight()/2, null);
And for adding bitmap to button use this
Button btn = (Button) findViewById(R.id.button1);
Drawable d = new BitmapDrawable(getResources(),finalImage);
btn.setBackgroundDrawable(d);
But note that when you set this bitmap to button the button will resize so better not use wrap_content
but specify the height and width in hard code like 25dp
or 100dp
etc. That is the logic which you have to control
You can also use ImageButton and set it as
btn.setImageBitmap(finalImage);
For MotionEvent
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
drawIt = true;
break;
case MotionEvent.ACTION_UP:
if(drawIt){
//Build the cache
imageView.buildDrawingCache();
Bitmap original = imageView.getDrawingCache();
//Build the gradient
Bitmap gradient = getGradient();
//Overlay the images
Bitmap finalImage = overlay(original,gradient,event.getX(),event.getY());
imageView.setImageBitmap(finalImage);
Button btn = (Button) findViewById(R.id.button1);
Drawable d = new BitmapDrawable(getResources(),finalImage);
btn.setBackgroundDrawable(d);
}
break;
case MotionEvent.ACTION_CANCEL:
drawIt = false;
break;
}
EDIT 2
Declare these instance variables
private boolean drawIt = true;
Button btn1,btn2;
int x_limit, y_limit;
Bitmap bmpOrignal, bmpGradient, bmpOverlay;
and code the onTouch
like this
@Override
public boolean onTouch(View v, MotionEvent event) {
if(drawIt){
drawIt = false;
v.buildDrawingCache();
bmpOrignal = v.getDrawingCache();
bmpGradient = getGradient();
bmpOverlay = overlay(bmpOrignal,bmpGradient);
x_limit = v.getLeft() + bmpOrignal.getWidth();
y_limit = v.getTop() + bmpOrignal.getHeight();
}
if(event.getX() > x_limit || event.getY() > y_limit){
((Button)v).setBackgroundDrawable(new BitmapDrawable(getResources(),bmpOrignal));
}else {
((Button)v).setBackgroundDrawable(new BitmapDrawable(getResources(),bmpOverlay));
}
if(event.getAction() == MotionEvent.ACTION_UP){
drawIt = true ;
}
return false;
}
You can download the new updated project from here
回答2:
How about drawing a circle using
Canvas canvas = new Canvas(bmp);
canvas.drawCircle(x, y, radius, paint);
Then drawing the same circle over and over again at a slightly lesser alpha and bigger radius in a for loop?
Paint.setAlpha();
Edit: Actually that sounds pretty bad for the memory but heck haven't tried it before.
来源:https://stackoverflow.com/questions/18373087/ontouch-apply-glow-effect-to-center-of-image