Android method to achieve image shadow effect

  • 2020-06-03 08:16:22
  • OfStack

This paper introduces Android to achieve image shadow effect, set canvas color, image tilt effect, image shadow effect method, using canvas. save(Canvas. MATRIX_SAVE_FLAG); To implement. Since the actual size of the image is 1 larger than the displayed image, it is necessary to change the size appropriately to achieve a better effect. Based on the original rectangle, the image is drawn as a rounded rectangle with shadow layer. Readers can customize the program code according to their own needs to better meet their own project requirements.

The specific implementation code is as follows:


package canvas.test;
import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.view.View;
public class ShaderEffect extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new ImageEffect(this));
  }
  class ImageEffect extends View{
    Paint paint; 
    public ImageEffect (Context context){
      super(context);
      paint = new Paint();// Initializes the brush and USES it for subsequent shadow effects. 
      paint.setAntiAlias(true);// Remove the sawtooth. 
      paint.setShadowLayer(5f, 5.0f, 5.0f, Color.BLACK);// Set the shadow layer. This is the key. 
      paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    }
    @Override
    public void onDraw(Canvas canvas){
      super.onDraw(canvas);
      int posX = 20;
      int posY = 50;
      int PicWidth,PicHegiht; 
      Drawable drawable = getResources().getDrawable(R.drawable.button);
      Drawable dbe = getResources().getDrawable(R.drawable.button).mutate();// If you don't call mutate Method, the original diagram will also be changed, because the invoked resource is the same 1 All objects are in a Shared state. 
      Drawable drawTest = getResources().getDrawable(R.drawable.button);
      Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.button);
      PicWidth = drawable.getIntrinsicWidth();
      PicHegiht = drawable.getIntrinsicHeight();
      drawTest.setBounds(posX, (2 * posY) + PicHegiht, posX + PicWidth, (2 * posY) + 2 * PicHegiht );
      drawable.setBounds(posX,posY,posX+PicWidth,posY+PicHegiht);
      dbe.setBounds(0, 0, PicWidth, PicHegiht);
      canvas.drawColor(Color.WHITE);// Set the canvas color 
      canvas.save(Canvas.MATRIX_SAVE_FLAG);
      dbe.setColorFilter(0x7f000000,PorterDuff.Mode.SRC_IN);
      canvas.translate(posX + (int)(0.9 * PicWidth/2), posY + PicHegiht/2);// The image is shifted to create a shadow effect just behind the original image. 
      canvas.skew(-0.9F, 0.0F);// Image tilt effect. 
      canvas.scale(1.0f, 0.5f);// The image (which is actually the canvas) is scaled, Y The direction is reduced to 1/2 . 
      dbe.draw(canvas);// Here is the original image shadow effect drawing, drawing before the original, will be in the lower layer. 
      drawable.clearColorFilter();
      canvas.restore();
      canvas.save(Canvas.MATRIX_SAVE_FLAG);
      drawable.draw(canvas);// Here is the drawing of the original image, because canvas It has a layered effect, so it covers the shadow. 
      canvas.restore();
      // Default no effect original 
      canvas.save(Canvas.MATRIX_SAVE_FLAG);
      drawTest.draw(canvas);
      canvas.restore();
      // Image shadow effect 
      canvas.save(Canvas.MATRIX_SAVE_FLAG);
      //Rect rect = new Rect(2*posX + PicWidth, 2*posY + PicHegiht, 2*posX + 2*PicWidth, 2*posY + 2*PicHegiht);// This is the theoretical coordinate of the shadow graph 
      Rect rect = new Rect(2*posX + PicWidth + 3, 2*posY + PicHegiht + 3, 2*posX + 2*PicWidth - 2, 2*posY + 2*PicHegiht - 2);
      // Because the actual size of the image is larger than the displayed image 1 Some, so need to change the size appropriately, in order to achieve better results 
      RectF rectF = new RectF(rect);
      canvas.drawRoundRect(rectF, 10f, 10f, paint);// Based on the original rectangle, it is drawn as a rounded rectangle with shadow layer. 
      canvas.drawBitmap(bmp, 2*posX + PicWidth, 2*posY + PicHegiht, null);// Let me draw the original. 
      canvas.restore();
    }
  }
}

Related articles: