Basic Android notes-graphics, solutions for using and practicing large image OOM and painting tools

Basic Android notes-graphics, solutions for using and practicing large image OOM and painting tools

The principle of computer graphics representation is to load a large image. The OOM scaling is used to load large image resources and create a copy of the original image. The common API for image processing is the meitu xiuxiu painting version.

Principle of computer graphics Representation

The first thing to note is that the size required for storing an image in memory is very different from the size required for completely displaying the image on the screen device.

For example, we can clearly see that the storage space occupied by this image on the hard disk is 303KB, that is, 310272 bytes. However, if you want to completely display such images on the screen device, the memory space needed is far more than that.

There is such a formula:Memory required for Image Display = Image Width pixel x Image Height pixel x size of each pixel <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Examples/examples + Gz9s/Wz8LNvKO6PGJyIC8 + DQo8aW1nIGFsdD0 = "" fhzd_has_check = "true" src = "http://www.bkjia.com/uploads/allimg/150320/0404354S4-2.png" title = "\"/>

In turn, we will introduce the meaning.

Monochrome bitmap: either black or white. It can be expressed in one bit, and 1/8 bytes are required to represent a pixel value. In this case, the image above is displayed in the memory to be loaded: 1920*1200*1/8/1024/1024 = 0.2 M. 16 bitmap: requires 1/2 bytes to represent a pixel value. In this case, it is required to prepare the loading memory: 1920*1200*1/2/1024/1024 = 1.09 M. 256 bitmap: indicates that a pixel value needs to be expressed in 1 byte. In this case, the chip is loaded into the memory to prepare the display: 1920*1200*1/1024/1024 = 2.19 M. 24-Bit Bitmap: Three bytes are required for a pixel value. In this case, it is required to load the image into the memory. The value is 1920*1200*3/1024/1024 = 6.59 M. In the Android operating system, ARGB is used to represent the transparency of A pixel value, and A represents the transparency. In this case, it is required to load the chip into the memory for display: 1920*1200*4/1024/1024 = 8.79 M.

In Andorid, the default VM Heap provided by the system for the application is 16 Mb. If the image is not compressed, an OOM exception will occur.

OOM is displayed when a large image is loaded.

Let's load a large image. The image resource is as follows, and the size is 1.7 MB.

Create a project and addImageViewControl, andMainActivityIn the left-side navigation pane.

ImageView iv = (ImageView) findViewById(R.id.iv);Bitmap bitmap = BitmapFactory.decodeFile("/mnt/sdcard/dog.jpg");iv.setImageBitmap(bitmap );

The code is very simple. An error occurs at runtime. Let's see what the error is:

As you can see, the application Applied to the System30720012Bytes, And then it appearsOutOfMemoryErrorError.

The next section describes how to load a large image without the OOM function.

Scale and load large image resources

We can see that the picture of the dog is 2400*3200, and our mobile phone is only 320*480. If it is put directly, an exception will occur; otherwise, resources will be wasted.

Google engineers have already prepared a solution to useBitmapFactoryTo parse the resource, first obtain the width and height of the loaded image, calculate the zoom ratio based on the screen width and height of the mobile phone device, and then use the zoom ratio to load the image resource to the memory.

The Code is also relatively simple, please refer:

ImageView iv = (ImageView) findViewById (R. id. iv );//★1. use the window manager to obtain the width and height of the mobile phone screen. WindowManager wm = (WindowManager) getSystemService (WINDOW_SERVICE); int screenHeight = wm. getdefadisplay display (). getHeight (); int screenWidth = wm. getdefadisplay display (). getWidth ();//★2. obtain image attributes and configure BitmapFactory without loading images into memory. options options = new Options (); // this parameter is set to true. If you use BitmapFactory to parse a resource, Bitmap is not returned, but the resource configuration is set: the width and height of the sample slice options. inJustDecodeBounds = true; BitmapFactory. decodeFile ("/mnt/sdcard/dog.jpg", options); // get the image width and height int outHeight = options. outHeight; int outWidth = options. outWidth ;//★3. the zoom ratio is calculated based on the screen width and Image Width. int scale = 0; int scaleH = outHeight/screenHeight; int scaleW = outWidth/screenWidth; scale = scaleH> scaleW? ScaleH: scaleW ;//★4. parse image resources based on the scaling ratio and return Bitmapoptions. inJustDecodeBounds = false; options. inSampleSize = scale; Bitmap bitmap = BitmapFactory. decodeFile ("/mnt/sdcard/dog.jpg", options); iv. setImageBitmap (bitmap );

Create a copy of the source Image

Bitmap loaded to memory on Android cannot be modified. It can only be modified and painted on its copy. So how to create a copy of the source image?

The following steps are required: ① prepare a white paper with the same width and height as the source image, ② put the White Paper on the canvas, and prepare a pen. ④ prepare a matrix.

The Code is also relatively simple, which involvesCanvas,Paint,MatrixClass, the following is a simple copy of the source code:

ImageView srcImageView = (ImageView) findViewById (R. id. iv_src); ImageView copyImageView = (ImageView) findViewById (R. id. iv_copy); // The original Bitmap srcBitmap = BitmapFactory. decodeFile ("/mnt/sdcard/meinv.jpg"); srcImageView. setImageBitmap (srcBitmap); // copy // 1. prepare a white paper with the same width and height as the source image. Bitmap copyBitmap = Bitmap. createBitmap (srcBitmap. getWidth (), srcBitmap. getHeight (), srcBitmap. getConfig (); // 2. place White Paper on the Canvas canvas Canvas = new Canvas (copyBitmap); // 3. prepare a pen for painting = new Paint (); // 4. prepare a Matrix matrix Matrix = new Matrix (); // use the specified matrix to draw the canvas. drawBitmap (srcBitmap, matrix, paint); copyImageView. setImageBitmap (copyBitmap );

The test results are as follows:

Common graph processing APIs

For example, when learning animation, the image processing operations are also divided into the following types. The key step of the operation is to use the matrix for changes. Google engineers have helped us to complete these operations.

Translation:

The Code is as follows:

// Original Bitmap srcBitmap = BitmapFactory. decodeFile ("/mnt/sdcard/meinv.jpg"); srcImageView. setImageBitmap (srcBitmap); // copy Bitmap copyBitmap = Bitmap. createBitmap (srcBitmap. getWidth (), srcBitmap. getHeight (), srcBitmap. getConfig (); Canvas canvas = new Canvas (copyBitmap); Paint paint = new Paint (); Matrix matrix = new Matrix ();//★Use the matrix translation graph matrix. setTranslate (150, 50); canvas. drawBitmap (srcBitmap, matrix, paint); copyImageView. setImageBitmap (copyBitmap );

The test diagram is as follows:

Scaling:

The scaling code is as follows:

//★Use a matrix to scale the image // use the image center point as the origin point to reduce the size of matrix. setScale (0.5f, 0.5f, srcBitmap. getWidth ()/2, srcBitmap. getHeight ()/2) by 0.5 times );

Test diagram:

Rotation:

The rotation code is as follows:

//★Use a matrix image // rotate 30 degrees matrix. setRotate (30, srcBitmap. getWidth ()/2, srcBitmap. getHeight ()/2) based on the image center point );

Test diagram:

Image:

The Image Code is as follows:

//★Use a matrix to image matrix. setScale (-1.0f, 1.0f); matrix. postTranslate (srcBitmap. getWidth (), 0 );

Test diagram:

Reflection:

The reflected code is as follows:

//★Use a matrix to map the image to matrix. setScale (1.0f,-1.0f); matrix. postTranslate (0, srcBitmap. getHeight ());

Test diagram:

Mito xiuxiu for Dummies

Purpose: use the color matrix to modify the color of the image (simple + simple = trainer ):

The interface layout is as follows:

Below the layout is three La S, used to modify the color value of an image.
The Code is as follows:

Public class MainActivity extends Activity implements attributes {private Bitmap srcBitmap; private SeekBar sb_red; private SeekBar sb_green; private SeekBar sb_blue; private ImageView iv; @ Override protected void onCreate (Bundle attributes) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); sb_red = (SeekBar) findViewById (R. id. sb_red); sb_green = (SeekBar) findViewById (R. id. sb_green); sb_blue = (SeekBar) findViewById (R. id. sb_blue); iv = (ImageView) findViewById (R. id. iv); srcBitmap = BitmapFactory. decodeFile ("/mnt/sdcard/meinv.jpg"); iv. setImageBitmap (srcBitmap); hour (this); sb_green.setOnSeekBarChangeListener (this);} // @ Override public void onStopTrackingTouch (SeekBar seekBar) {int currentPosition = seekBar. getProgress (); Bitmap copyBitmap = Bitmap. createBitmap (srcBitmap. getWidth (), srcBitmap. getHeight (), srcBitmap. getConfig (); Canvas canvas = new Canvas (copyBitmap); Paint paint = new Paint ();//★Use the color matrix to draw the image ColorMatrix colorMatrix = new ColorMatrix (); float rf = 0; float gf = 0; float bf = 0; // modify the color switch (seekBar. getId () {case R. id. sb_red: rf = currentPosition/10f; break; case R. id. sb_blue: bf = currentPosition/10f; break; case R. id. sb_green: gf = currentPosition/10f; break;} colorMatrix. set (new float [] {// rf, 0, 0, 0, 0, // 0, gf, 0, 0, 0, // 0, 0, bf, 0, 0, // 0, 0, 0, 1, 0}); ColorFilter filter = new ColorMatrixColorFilter (colorMatrix );//★Set the color matrix filter paint for the paint brush. setColorFilter (filter); canvas. drawBitmap (srcBitmap, new Matrix (), paint); iv. setImageBitmap (copyBitmap);} // @ Override public void onProgressChanged (SeekBar seekBar, int progress, boolean fromUser) during sliding) {}// @ Override public void onStartTrackingTouch (SeekBar seekBar ){}}

Test results:

There is nothing very important. Just know the color matrix.

Painting version

Let's take a look at what it looks like after molding:

It's still funny after I make it myself.

Drawing Board has the following steps: ① prepare a background image ② make a copy of the background image so as to draw it on it ③ registerImageViewA touch event; when you press and move, record the touch point, draw a picture and set itImageview. ④ Added the "bold paint brush" and "color change function"

Next, let's take a step.

Step 1Prepare a background image and add it to the SD card.


Code for setting the background image:

iv = (ImageView) findViewById(R.id.iv);srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/bk.png");iv.setImageBitmap(srcBitmap);

Step 2,Make a copy of the background image for painting on it

// Obtain a copy copyBitmap = Bitmap. createBitmap (srcBitmap. getWidth (), srcBitmap. getHeight (), srcBitmap. getConfig (); // obtain the canvas Canvas = new canvas (copyBitmap); // obtain the paint brush Paint = new paint (); // obtain a matrix Matrix = new matrix (); canvas. drawBitmap (srcBitmap, matrix, paint); // draw a straight line // canvas. drawLine (0, 0,100,100, paint); iv. setImageBitmap (copyBitmap); // registers the touch Event Callback iv. setOnTouchListener (this );

Step 3,Register oneImageViewA touch event; when you press and move, record the touch point, draw a picture and set itImageview.

// Start coordinate point private int startX; private int startY; @ Overridepublic boolean onTouch (View v, MotionEvent event) {switch (event. getAction () {case MotionEvent. ACTION_DOWN: startX = (int) event. getX (); startY = (int) event. getY (); System. out. println ("coordinate point (" + startX + "," + startY + ")"); break; case MotionEvent. ACTION_MOVE: int nowX = (int) event. getX (); int nowY = (int) event. getY (); System. out. println ("Starting Point of movement (" + startX + "," + startY + ")"); System. out. println ("Mobile ending coordinate point (" + nowX + "," + nowY + ")"); canvas. drawLine (startX, startY, nowX, nowY, paint); iv. setImageBitmap (copyBitmap); startX = nowX; startY = nowY; break; case MotionEvent. ACTION_UP: break; default: break;} // If the returned value is true, the event is consumed and is not passed down. // If the returned value is false, the event is not consumed, and continue to pass down; return true ;}

Step 4, Added the "bold paint brush" and "color change function"

// Color content int [] colors = {Color. RED, Color. GREEN, Color. BLUE}; private int colorIndex; // modify the color public void changecolor (View v) {paint. setColor (colors [colorIndex ++ % 3]);} // paint width private int paintWidth; // bold paint brush public void overstriking (View v) {paint. setStrokeWidth (++ paintWidth );}