保存画布,绘制圆圈的位图

时间:2017-07-10 12:32:35

标签: android bitmap android-canvas

我在下面的类中扩展了View并重写了onDraw方法,以便在已加载的位图上绘制圆圈。

位图加载成功并显示在屏幕上。当用户触摸屏幕时,会绘制一个圆圈。

我有一个浮动的Action Button,它将位图压缩为byte []。然后将此byte []发送到另一个要显示的Activity。不幸的是,生成的位图没有任何圆圈。

canvas是onDraw中的本地对象,mCBitmap和tCanvas是全局变量,因此saveImage方法可以访问数据。

有谁可以告诉我为什么没有圆圈被复制到结果位图?

import android.content.Context;
import android.content.res.AssetManager;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Environment;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.SparseArray;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import org.apache.commons.io.IOUtils;

import java.io.BufferedInputStream;
import java.io.ByteArrayOutputStream;
import java.io.DataInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import android.graphics.PointF;

/**
 * Created by MatthewW on 14/06/2017.
 */

public class TouchView extends View {

    private static final String TAG = TouchView.class.getSimpleName();
    Bitmap bgr;
    File tempFile;
    private byte[] imageArray;
    private Paint pTouch;

    Context context;

    private SparseArray<ColouredCircle> mPointers;
    public int x;
    public int y;


    int circleCount;
    int radius;
    protected byte [] data;

    Bitmap mCBitmap;
    Canvas tCanvas;




    public TouchView(Context context) {
        super(context);

        this.context = context;

    }



    public TouchView(Context context, AttributeSet attr) {
        super(context,attr);
        Log.e(TAG, "inside touchview constructor");

        this.context = context;

        radius = 70;
        circleCount = 0;



        copyReadAssets();

        imageArray = new byte[(int)tempFile.length()];


        Log.e(TAG, "imageArray has length = " + imageArray.length);



        try{

            InputStream is = new FileInputStream(tempFile);
            BufferedInputStream bis = new BufferedInputStream(is);
            DataInputStream dis = new DataInputStream(bis);


            int i = 0;

            while (dis.available() > 0 ) {
                imageArray[i] = dis.readByte();
                i++;
            }

            dis.close();


        } catch (Exception e) {

            e.printStackTrace();
        }



        Bitmap bm = BitmapFactory.decodeByteArray(imageArray, 0, imageArray.length);

        if(bm == null){
            Log.e(TAG, "bm = null");
        }else{
            Log.e(TAG, "bm =  not null");
        }



        mPointers = new SparseArray<ColouredCircle>();


        bgr = bm.copy(bm.getConfig(), true);





        bm.recycle();

        pTouch = new Paint(Paint.ANTI_ALIAS_FLAG);
        // pTouch.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT));
        pTouch.setColor(Color.RED);
        pTouch.setStyle(Paint.Style.STROKE);

        pTouch.setStrokeWidth(5);




    }// end of touchView constructor




    private void copyReadAssets() {

        AssetManager assetManager = context.getAssets();

        InputStream in = null;
        OutputStream out = null;
        tempFile = new File(context.getFilesDir(), "bodymap.jfif");
        try {
            in = assetManager.open("bodymap.jfif");
            out = context.openFileOutput(tempFile.getName(), Context.MODE_WORLD_READABLE);

            IOUtils.copy(in, out);

            in.close();
            in = null;
            out.flush();
            out.close();
            out = null;
        } catch (Exception e) {
            Log.e(TAG, e.getMessage());
        }


    }


    @Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);



        Log.e(TAG, "about to draw bgr ");
       // canvas.drawBitmap(bgr, 0, 0, null);

        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        int width = metrics.widthPixels;
        int height = metrics.heightPixels;



        Rect frameToDraw = new Rect(0, 0, width, height);
        RectF whereToDraw = new RectF(0, 0, width, height - 300);

        canvas.drawBitmap(bgr,frameToDraw,whereToDraw, null);




        if(mPointers != null) {

            Log.e(TAG, "mPointers.size() = " + mPointers.size());

            for (int i = 0; i < mPointers.size(); i++) {

                PointF p = mPointers.get(i).getPointF();
                x = (int) p.x;
                y = (int) p.y;

                pTouch.setColor(mPointers.get(i).getColour());


                canvas.drawCircle(x, y, radius, pTouch);




                mCBitmap = Bitmap.createBitmap(bgr.getWidth(), bgr.getHeight(), bgr.getConfig());

                tCanvas = new Canvas(mCBitmap);

                tCanvas.drawBitmap(bgr, 0, 0, null);

                tCanvas.drawCircle(x, y, radius, pTouch);

                tCanvas.drawBitmap(mCBitmap, 0, 0, null);






            }

        }






    }//end of onDraw





    @Override
    public boolean onTouchEvent(MotionEvent me) {
        switch (me.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:

            case MotionEvent.ACTION_POINTER_DOWN: {
                /*int ai = me.getActionIndex();
                PointF pt = new PointF(me.getX(ai), me.getY(ai));
                mPointers.put(me.getPointerId(ai), pt);

                Log.e(TAG, "mPointers.size() = " + mPointers.size() + "me.getPointerId(ai) = "
                                 + me.getPointerId(ai) + " me.getX(ai) = " + me.getX(ai) + " me.getY(ai) = " + me.getY(ai));*/

                int ai = me.getActionIndex();
                PointF pt = new PointF(me.getX(ai), me.getY(ai));

                ColouredCircle cc = new ColouredCircle(pTouch.getColor(),pt);

                mPointers.put(circleCount, cc);

                circleCount++;

                invalidate();
                return true;
            }

            case MotionEvent.ACTION_UP: {

            }

            case MotionEvent.ACTION_POINTER_UP: {
                /*int pid = me.getPointerId(me.getActionIndex());
                mPointers.remove(pid);*/
                return true;
            }

            case MotionEvent.ACTION_MOVE: {
                /*for (int i = 0; i < me.getPointerCount(); ++i) {
                    PointF pt = mPointers.get(me.getPointerId(i));
                    pt.set(me.getX(i), me.getY(i));
                    invalidate();
                }*/
                return true;
            }
        }
        return false;
    }



    public void showToastMessage(String mess){

        Toast.makeText(TouchView.this.getContext(), mess.toString(), Toast.LENGTH_SHORT).show();

    }

    public  int getRadius() {
        return radius;
    }




    public  void setRadius(int r) {
        radius = r;
        invalidate();
    }


    public void setCircleColour(String colourMode){


        if(colourMode.equalsIgnoreCase("RED")){

            pTouch.setColor(Color.RED);

        }else if(colourMode.equalsIgnoreCase("BLUE")){

            pTouch.setColor(Color.BLUE);

        }else if(colourMode.equalsIgnoreCase("GREY")){

            pTouch.setColor(Color.GRAY);

        }

    }



    public byte[] saveImage(){



        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        mCBitmap.compress(Bitmap.CompressFormat.JPEG, 100 /*ignored for PNG*/, bos);
        data = bos.toByteArray();
        try {
            bos.flush();
            bos.close();
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }

        try {
            bos.flush();
            bos.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        if ( data == null){
            Log.e(TAG, "data in touchview before save clicked is null");
        }else{
            Log.e(TAG, "data in touchview before saved clicked is not null and has length + " + data.length);
        }

        return data;

    }

}//end of class

[EDIT1]

我已将onDraw()和saveImage()方法更改为以下内容。现在,图像已保存,圆圈就位。

但是,bgr图像非常小,位于屏幕的左上角(屏幕的其余部分为黑色)。圆圈位于原始位置的正确位置,只是不是全屏大小的bg图像。

如何将bg图像复制到生成的Bitmap?

@Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);



        Log.e(TAG, "about to draw bgr ");
       // canvas.drawBitmap(bgr, 0, 0, null);

        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        int width = metrics.widthPixels;
        int height = metrics.heightPixels;



        Rect frameToDraw = new Rect(0, 0, width, height);
        RectF whereToDraw = new RectF(0, 0, width, height - 300);

        canvas.drawBitmap(bgr,frameToDraw,whereToDraw, null);




        if(mPointers != null) {

            Log.e(TAG, "mPointers.size() = " + mPointers.size());

            for (int i = 0; i < mPointers.size(); i++) {

                PointF p = mPointers.get(i).getPointF();
                x = (int) p.x;
                y = (int) p.y;

                pTouch.setColor(mPointers.get(i).getColour());


                canvas.drawCircle(x, y, radius, pTouch);





            }

        }






    }//end of onDraw

public byte[] saveImage(){

        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        int width = metrics.widthPixels;
        int height = metrics.heightPixels - 300;

        Bitmap  bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        //Bitmap  bitmap = Bitmap.createBitmap(bgr.getWidth(), bgr.getHeight(), bgr.getConfig());

        Canvas canvas = new Canvas(bitmap);
        this.draw(canvas);

        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        bitmap.compress(Bitmap.CompressFormat.JPEG, 100 /*ignored for PNG*/, bos);
        data = bos.toByteArray();
        try {
            bos.flush();
            bos.close();
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }

        try {
            bos.flush();
            bos.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        if ( data == null){
            Log.e(TAG, "data in touchview before save clicked is null");
        }else{
            Log.e(TAG, "data in touchview before saved clicked is not null and has length + " + data.length);
        }

        return data;

    }

以下是活动图片,允许用户在图片上放置圆圈。 bg图像是全屏的。

enter image description here

下面是下一个Activity中输出的图片,其中带圆圈的图像变为byte []并显示。正如您所看到的那样,bg图像并非全屏,但是圆圈位于正确的位置。

enter image description here

1 个答案:

答案 0 :(得分:2)

onDraw(...)中,更改:

Rect frameToDraw = new Rect(0, 0, width, height);

要:

Rect frameToDraw = new Rect(0, 0, bgr.getWidth(), bgr.getHeight());

当您在onDraw(...)中显示图片时,如果框架调用onDraw(...)时,您没有遇到此问题的一个原因可能是Canvas提供的对象默认情况下,框架是硬件加速的,如果你有一个目标sdk&gt; = 14(source,第二段,第一句话)

如图here所示,当画布是硬件加速时,它的密度似乎设置为0.但是,如果您在字段Bitmap.getDensity()上调用TouchView#bgr,你会发现它不会是0.这是因为创建时的位图具有当前设备屏幕的密度。

接下来,您在0 ppi画布上绘制了高密度位图(在我的设备上,密度为320 ppi) - &gt;它会被画得更大。

但是,在saveImage中,您从头开始创建Bitmap,然后从该位图创建Canvas,然后提供此画布以调用draw(...)。您刚刚创建的这个新画布不会是硬件加速的,并且还会具有新创建的位图的密度(在我的情况下为320 ppi)。

当您在onDraw(...)中绘制您的人体地图图像时,您将使用320dp在此画布上绘制它,与您的图像相同。

这仍然可以正常工作,但是你指定要从你的身体图中绘制一个screenWidth x screenHeight的区域,假设是1920x1080,这很可能是较小的,让我们假设1000x600,{{1 }}

在这种情况下Android会做什么?好吧,frameToDraw的Javadoc告诉我们以下内容:

  

注意:如果paint包含一个maskfilter,它会生成一个mask   超出位图的原始宽度/高度(例如   BlurMaskFilter),然后将绘制位图,就像它在a中一样   具有CLAMP模式的着色器。因此原来的颜色   宽度/高度将是复制的边缘颜色。

这基本上意味着:我将采用你的1000x600绘制你应该绘制的像素,剩下的像素直到1920x1080我会填充我选择的颜色(可能是黑色或者白色还是透明?)

现在,您要通过Canvas#drawBitmap(...)表示您希望将1920x1080区域映射到1620x1080区域。为此,android将进一步缩小您的位图,使whereToDraw更小。

最简单的解决方案是在创建bodymap区域时,在onDraw(...)中指定位图的实际尺寸。

此外,如果这些代码片段正在测试代码,那很好,但在使用frameToDraw时,请确保遵循提到的here指南。清理你的代码。

最重要的一点是:

  • 你真的不应该在你的onDraw(...)方法中分配对象,因为它们可能经常被调用,这会杀死你的垃圾收集器。 (即frameToDraw&amp; whereToDraw - 你可以在构造函数中预分配这些)

  • 利用视图的绘图缓存,您可以更轻松地获得屏幕的位图。

只需将onDraw(...)更改为:

即可
saveImage

请参阅:

希望这有帮助