android-animation - Android 2D 动画绘制：性能不佳

Question

我有一个绘制点网格的应用程序（比如说 5x5）。要求用户在该网格上画线。如果用户的手指触摸到网格中的一个点，则该点被着色以表明该点是绘制路径的一部分。此外，将在每两个触摸点之间画一条线。

问题 - 我的表现非常糟糕，这导致了一些事情：

应用程序变得非常缓慢。
运动事件的event.getAction()粒度不好。我的意思是enter code here，例如，它不是每 10 个像素记录一次运动，而是每 100 个像素记录一次运动。反过来，这将导致应用程序不重绘用户触摸过的一些点。
有时运动坐标很简单：假设用户将手指从像素 100 移动到像素 500，读数可能会显示 100...200...150...140...300...400。由于某种原因，触摸位置在某些情况下会变得混乱。

查看有关应用程序如何“错过”用户触摸的点并且不绘制绿点的示例：

显示两条线 - 一条缺少一个点。两条线都是从上到下画的，先画左边的

我尝试了几件事：

添加 Thread.sleep(100); 在else if(event.getAction() == MotionEvent.ACTION_MOVE)里面onTouchEvent(MotionEvent event)，我读到这可能会让 CPU 有时间赶上所有这些触摸事件 - 并没有改变任何事情
添加this.destroyDrawingCache()到最后doDraw()（我使用它而不是 onDraw，正如我使用的一个教程所建议的那样）。我认为这将清除所有似乎正在减慢系统速度的事件/绘图缓存 - 并没有改变任何事情。

我对 Android 动画相当陌生，所以我不知道如何继续：

我知道我应该在doDraw()(my onDraw()) 和onTouchEvent().
我读了一些关于invalidate()但不确定如何以及何时使用它的东西。如果我理解正确，每次doDraw()调用我的视图都会重新绘制。例如，我的网格是静态的 - 我怎样才能避免重绘它？

++++++++++++++++++++++++++ 10 月 7 日更新 +++++++++++++++++++++++

我尝试使用canvas.drawCircle(xPos, yPos, 8, mNodePaint);而不是canvas.drawBitmap(mBitmap, xPos, yPos, null);. 我认为如果我不使用实际的位图，这可能会提高性能。事实上 - 它没有！我有点困惑，这么简单的应用程序怎么会给设备带来如此沉重的负担。我一定是以错误的方式做某事。

++++++++++++++++++++++++++ 10 月 12 日更新 +++++++++++++++++++++++

我考虑了@LadyWoodi 的建议——我已经从循环中删除了所有变量声明——无论如何这是一个不好的做法，我也摆脱了我使用的所有“System.Out”行，这样我就可以记录应用程序行为更好地理解为什么我的表现如此糟糕。我很遗憾地说，如果性能发生变化（我实际上并没有测量帧速率变化），那是可以忽略不计的。

还有其他想法吗？

++++++++++++++++++++++++++ 10 月 13 日更新 +++++++++++++++++++++++

由于我有一个静态的点网格（请参阅 screenShot 中的空心黑/白点），在游戏过程中永远不会改变，我做了以下操作：

- 绘制一次网格。

- 使用 . 将绘图捕获为位图Bitmap.createBitmap()。

-canvas.drawBitmap()用于绘制静态点网格的位图。

- 当我的线程运行时，我检查是否绘制了点网格。如果它正在运行，我将不会重新创建静态点网格。我只会从我之前渲染的位图中渲染它。

令人惊讶的是，这并没有改变我的表现！每次重绘点网格对应用程序性能没有真正的视觉效果。

我决定canvas = mHolder.lockCanvas(new Rect(50, 50, 150, 150));在我的绘图线程中使用。只是为了测试目的，看看我是否限制了每次渲染的区域，我可以获得更好的性能。这也没有帮助。
然后我转向 Eclipse 中的 DDMS 工具来尝试分析应用程序。它想出的是，canvas.drawPath(path, mPathPaint);(Canvas.native_drawPath) 消耗了大约 88.5% 的 CPU 时间！！！

但为什么？？！我的路径绘制相当简单，mGraphics 包含一组路径，我所做的就是确定每条路径是否在游戏屏幕的边界内，然后我绘制一条路径：

//draw path user is creating with her finger on screen
        for (Path path : mGraphics)
        {           
            //get path values       
            mPm = new PathMeasure(path, true);

            mPm.getPosTan(0f, mStartCoordinates, null); 
            //System.out.println("aStartCoordinates X:" + aStartCoordinates[0] + " aStartCoordinates Y:" + aStartCoordinates[1]);
            mPm.getPosTan(mPm.getLength(), mEndCoordinates, null);
            //System.out.println("aEndCoordinates X:" + aEndCoordinates[0] + " aEndCoordinates Y:" + aEndCoordinates[1]);

            //coordinates are within game board boundaries
            if((mStartCoordinates[0] >= 1  && mStartCoordinates[1] >= 1) && (mEndCoordinates[0] >= 1 && mEndCoordinates[1] >= 1))
            {
                canvas.drawPath(path, mPathPaint);
            }                   
        }

任何人都可以在我的示例中看到任何编程错误的代码行吗？

++++++++++++++++++++++++++ 10 月 14 日更新 +++++++++++++++++++++

我已经改变了我的doDraw()方法。基本上我所做的就是仅在某些内容发生更改时才绘制屏幕。在所有其他情况下，我只是存储屏幕的缓存位图并渲染它。请看一下：

    public void doDraw(Canvas canvas) 
{   
    synchronized (mViewThread.getSurefaceHolder()) 
    {           
        if(mGraphics.size() > mPathsCount)
        {
            mPathsCount = mGraphics.size(); 

            //draw path user is creating with her finger on screen
            for (Path path : mGraphics)
            {           
                //get path values       
                mPm = new PathMeasure(path, true);

                mPm.getPosTan(0f, mStartCoordinates, null); 
                //System.out.println("aStartCoordinates X:" + aStartCoordinates[0] + " aStartCoordinates Y:" + aStartCoordinates[1]);
                mPm.getPosTan(mPm.getLength(), mEndCoordinates, null);
                //System.out.println("aEndCoordinates X:" + aEndCoordinates[0] + " aEndCoordinates Y:" + aEndCoordinates[1]);

                //coordinates are within game board boundaries
                if((mStartCoordinates[0] >= 1  && mStartCoordinates[1] >= 1) && (mEndCoordinates[0] >= 1 && mEndCoordinates[1] >= 1))
                {
                    canvas.drawPath(path, mPathPaint);
                }                   
            }

            //nodes that the path goes through, are repainted green
            //these nodes are building the drawn pattern
            for (ArrayList<PathPoint> nodePattern : mNodesHitPatterns) 
            {
                for (PathPoint nodeHit : nodePattern) 
                {
                    canvas.drawBitmap(mDotOK, nodeHit.x - ((mDotOK.getWidth()/2) - (mNodeBitmap.getWidth()/2)), nodeHit.y - ((mDotOK.getHeight()/2) - (mNodeBitmap.getHeight()/2)), null);
                }                   
            }

            mGameField = Bitmap.createBitmap(mGridNodesCount * mNodeGap, mGridNodesCount * mNodeGap, Bitmap.Config.ARGB_8888);
        }
        else
        {
            canvas.drawBitmap(mGameField, 0f, 0f, null);
        }

现在来看看结果——只要设备不必渲染任何路径并简单地从位图中绘制，事情就会变得非常快。但是当我必须使用canvas.drawPath()性能重新渲染屏幕的那一刻变得像吗啡上的乌龟一样迟钝......我拥有的路径越多（最多 6 条或更多，这没什么！）渲染速度越慢。这有多奇葩？？- 我的路径甚至不是真的弯曲 - 都是直线，偶尔会转弯。我的意思是这条线不是很“复杂”。

我在下面添加了更多代码 - 如果您有任何改进想法。

非常感谢，D.

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ~~~~~~~~~~~~~~~~

public class Panel extends SurfaceView implements SurfaceHolder.Callback {

Bitmap mNodeBitmap; 
int mNodeBitmapWidthCenter;
int mNodeBitmapHeightCenter;

Bitmap mDotOK;
ViewThread mViewThread;
ArrayList<PathPoint> mPathPoints;

private ArrayList<Path> mGraphics = new ArrayList<Path>(3);
private ArrayList<ArrayList<PathPoint>> mNodesHitPatterns = new ArrayList<ArrayList<PathPoint>>();

private Paint mPathPaint;

Path mPath = new Path();

//private ArrayList<Point> mNodeCoordinates = new ArrayList<Point>();
private int mGridNodesCount = 5;
private int mNodeGap = 100;
PathPoint mNodeCoordinates[][] = new PathPoint[mGridNodesCount][mGridNodesCount];

PathMeasure mPm;
float mStartCoordinates[] = {0f, 0f};
float mEndCoordinates[] = {0f, 0f};

PathPoint mPathPoint;

Boolean mNodesGridDrawn = false;

Bitmap mGameField = null;

public Boolean getNodesGridDrawn() {
    return mNodesGridDrawn;
}

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

    mNodeBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dot);

    mNodeBitmapWidthCenter =  mNodeBitmap.getWidth()/2;
    mNodeBitmapHeightCenter =  mNodeBitmap.getHeight()/2;

    mDotOK = BitmapFactory.decodeResource(getResources(), R.drawable.dot_ok);

    getHolder().addCallback(this);
    mViewThread = new ViewThread(this);     

    mPathPaint = new Paint();
    mPathPaint.setAntiAlias(true);
    mPathPaint.setDither(true); //for better color
    mPathPaint.setColor(0xFFFFFF00);
    mPathPaint.setStyle(Paint.Style.STROKE);
    mPathPaint.setStrokeJoin(Paint.Join.ROUND);
    mPathPaint.setStrokeCap(Paint.Cap.ROUND);
    mPathPaint.setStrokeWidth(5);
}

public ArrayList<ArrayList<PathPoint>> getNodesHitPatterns()
{
    return this.mNodesHitPatterns;
}

public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {


}

public void surfaceCreated(SurfaceHolder holder) {

    //setPadding(100, 100, 0, 0);       

    if (!mViewThread.isAlive()) {
        mViewThread = new ViewThread(this);
        mViewThread.setRunning(true);
        mViewThread.start();
    }
}

public void surfaceDestroyed(SurfaceHolder holder) {

    if (mViewThread.isAlive()) {
        mViewThread.setRunning(false);
    }
}

//draw the basic nodes grid that the user will use to draw the lines on
//store as bitmap
public void drawNodesGrid(Canvas canvas)
{
    canvas.drawColor(Color.WHITE);

    for (int i = 0; i < mGridNodesCount; i++) 
    {
        for (int j = 0; j < mGridNodesCount; j++) 
        {
            int xPos = j * mNodeGap;
            int yPos = i * mNodeGap;

            try 
            {
                //TODO - changed
                mNodeCoordinates[i][j] = new PathPoint(xPos, yPos, null);
            } 
            catch (Exception e) 
            {
                e.printStackTrace();
            }   

            canvas.drawBitmap(mNodeBitmap, xPos, yPos, null);
        }
    }

    mNodesGridDrawn = true;

    mGameField = Bitmap.createBitmap(mGridNodesCount * mNodeGap, mGridNodesCount * mNodeGap, Bitmap.Config.ARGB_8888);
}

public void doDraw(Canvas canvas) 
{       
    canvas.drawBitmap(mGameField, 0f, 0f, null);

    synchronized (mViewThread.getSurefaceHolder()) 
    {
        //draw path user is creating with her finger on screen
        for (Path path : mGraphics)
        {           
            //get path values       
            mPm = new PathMeasure(path, true);

            mPm.getPosTan(0f, mStartCoordinates, null); 
            //System.out.println("aStartCoordinates X:" + aStartCoordinates[0] + " aStartCoordinates Y:" + aStartCoordinates[1]);
            mPm.getPosTan(mPm.getLength(), mEndCoordinates, null);
            //System.out.println("aEndCoordinates X:" + aEndCoordinates[0] + " aEndCoordinates Y:" + aEndCoordinates[1]);

            //coordinates are within game board boundaries
            if((mStartCoordinates[0] >= 1  && mStartCoordinates[1] >= 1) && (mEndCoordinates[0] >= 1 && mEndCoordinates[1] >= 1))
            {
                canvas.drawPath(path, mPathPaint);
            }                   
        }

        //nodes that the path goes through, are repainted green
        //these nodes are building the drawn pattern
        for (ArrayList<PathPoint> nodePattern : mNodesHitPatterns) 
        {
            for (PathPoint nodeHit : nodePattern) 
            {
                canvas.drawBitmap(mDotOK, nodeHit.x - ((mDotOK.getWidth()/2) - (mNodeBitmap.getWidth()/2)), nodeHit.y - ((mDotOK.getHeight()/2) - (mNodeBitmap.getHeight()/2)), null);
            }                   
        }

        this.destroyDrawingCache();
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    synchronized (mViewThread.getSurefaceHolder()) {

        if(event.getAction() == MotionEvent.ACTION_DOWN)
        {
            //System.out.println("Action downE x: " + event.getX() + " y: " + event.getY());

            for (int i = 0; i < mGridNodesCount; i++) 
            {                   
                for (int j = 0; j < mGridNodesCount; j++) 
                {
                    //TODO - changed
                    //PathPoint pathPoint = mNodeCoordinates[i][j];

                    mPathPoint = mNodeCoordinates[i][j];

                    if((Math.abs((int)event.getX() - mPathPoint.x) <= 35) && (Math.abs((int)event.getY() - mPathPoint.y) <= 35))
                    {
                        //mPath.moveTo(pathPoint.x + mBitmap.getWidth() / 2, pathPoint.y + mBitmap.getHeight() / 2);

                        //System.out.println("Action down x: " + pathPoint.x + " y: " + pathPoint.y);
                        ArrayList<PathPoint> newNodesPattern = new ArrayList<PathPoint>();
                        mNodesHitPatterns.add(newNodesPattern);
                        //mNodesHitPatterns.add(nh);
                        //pathPoint.setAction("down");
                        break;
                    }
                }
            }                   
        }
        else if(event.getAction() == MotionEvent.ACTION_MOVE)
        {                           
            final int historySize = event.getHistorySize();
            //System.out.println("historySize: " + historySize);
            //System.out.println("Action moveE x: " + event.getX() + " y: " + event.getY());

            coordinateFound:
                for (int i = 0; i < mGridNodesCount; i++) 
                {
                    for (int j = 0; j < mGridNodesCount; j++) 
                    {
                        //TODO - changed
                        //PathPoint pathPoint = mNodeCoordinates[i][j]; 
                        mPathPoint = mNodeCoordinates[i][j];

                        if((Math.abs((int)event.getX() - mPathPoint.x) <= 35) && (Math.abs((int)event.getY() - mPathPoint.y) <= 35))
                        {                               
                            int lastPatternIndex = mNodesHitPatterns.size()-1;                  
                            ArrayList<PathPoint> lastPattern = mNodesHitPatterns.get(lastPatternIndex);
                            int lastPatternLastNode = lastPattern.size()-1;                             

                            if(lastPatternLastNode != -1)
                            {
                                if(!mPathPoint.equals(lastPattern.get(lastPatternLastNode).x, lastPattern.get(lastPatternLastNode).y))
                                {
                                    lastPattern.add(mPathPoint);        
                                    //System.out.println("Action moveC [add point] x: " + pathPoint.x + " y: " + pathPoint.y);
                                }
                            }
                            else
                            {
                                lastPattern.add(mPathPoint);
                                //System.out.println("Action moveC [add point] x: " + pathPoint.x + " y: " + pathPoint.y);
                            }                                           

                            break coordinateFound;
                        }
                        else //no current match => try historical
                        {
                            if(historySize > 0)
                            {
                                for (int k = 0; k < historySize; k++)
                                {
                                    //System.out.println("Action moveH x: " + event.getHistoricalX(k) + " y: " + event.getHistoricalY(k));
                                    if((Math.abs((int)event.getHistoricalX(k) - mPathPoint.x) <= 35) && (Math.abs((int)event.getHistoricalY(k) - mPathPoint.y) <= 35))
                                    {                                                   
                                        int lastPatternIndex = mNodesHitPatterns.size()-1;                  
                                        ArrayList<PathPoint> lastPattern = mNodesHitPatterns.get(lastPatternIndex);
                                        int lastPatternLastNode = lastPattern.size()-1;                             

                                        if(lastPatternLastNode != -1)
                                        {
                                            if(!mPathPoint.equals(lastPattern.get(lastPatternLastNode).x, lastPattern.get(lastPatternLastNode).y))
                                            {
                                                lastPattern.add(mPathPoint);
                                                //System.out.println("Action moveH [add point] x: " + pathPoint.x + " y: " + pathPoint.y);
                                            }
                                        }
                                        else
                                        {
                                            lastPattern.add(mPathPoint);
                                            //System.out.println("Action moveH [add point] x: " + pathPoint.x + " y: " + pathPoint.y);
                                        }                                           

                                        break coordinateFound;
                                    }
                                }
                            }                               
                        }
                    }
                }       
        }
        else if(event.getAction() == MotionEvent.ACTION_UP)
        {
            //                          for (int i = 0; i < mGridSize; i++) {
            //          
            //                              for (int j = 0; j < mGridSize; j++) {
            //          
            //                                  PathPoint pathPoint = mNodeCoordinates[i][j];
            //          
            //                                  if((Math.abs((int)event.getX() - pathPoint.x) <= 35) && (Math.abs((int)event.getY() - pathPoint.y) <= 35))
            //                                  {
            //                                      //the location of the node                      
            //                                      //mPath.lineTo(pathPoint.x + mBitmap.getWidth() / 2, pathPoint.y + mBitmap.getHeight() / 2);
            //          
            //                                      //System.out.println("Action up x: " + pathPoint.x + " y: " + pathPoint.y);
            //          
            //                                      //mGraphics.add(mPath);
            //                                      //                          mNodesHit.add(pathPoint);
            //                                      //                          pathPoint.setAction("up");
            //                                      break;
            //                                  }                       
            //                              }
            //                          }               
        }

        //System.out.println(mNodesHitPatterns.toString());

        //create mPath
        for (ArrayList<PathPoint> nodePattern : mNodesHitPatterns) 
        {
            for (int i = 0; i < nodePattern.size(); i++) 
            {
                if(i == 0) //first node in pattern
                {
                    mPath.moveTo(nodePattern.get(i).x + mNodeBitmapWidthCenter, nodePattern.get(i).y + mNodeBitmapHeightCenter);
                }
                else
                {
                    mPath.lineTo(nodePattern.get(i).x + mNodeBitmapWidthCenter, nodePattern.get(i).y + mNodeBitmapWidthCenter);
                }

                //mGraphics.add(mPath);
            }                               
        }

        mGraphics.add(mPath);

        return true;
    }  
}

}

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ~~~~~~~~~~~~~~~~

public class ViewThread extends Thread {
private Panel mPanel;
private SurfaceHolder mHolder;
private boolean mRun = false;

public ViewThread(Panel panel) {
    mPanel = panel;
    mHolder = mPanel.getHolder();
}

public void setRunning(boolean run) {
    mRun = run;
}

public SurfaceHolder getSurefaceHolder()
{       
    return mHolder;
}

@Override
public void run() 
{
    Canvas canvas = null;
    while (mRun) 
    {
        canvas = mHolder.lockCanvas();
        //canvas = mHolder.lockCanvas(new Rect(50, 50, 150, 150));
        if (canvas != null) 
        {                   
            if(!mPanel.getNodesGridDrawn())
            {
                mPanel.drawNodesGrid(canvas);
            }

            mPanel.doDraw(canvas);
            mHolder.unlockCanvasAndPost(canvas);                
        }
    }
}
}

score 1 · Accepted Answer

这只是想法，但我会尝试将所有声明从循环中取出。我知道将它们本地化会很有用，但它通常非常耗时，因此可能会有所帮助。我的第二个想法已经在你的更新中得到了你的测试，所以现在我也很好奇它会如何发展；）

score 0 · Accepted Answer

您正在使用 SurfaceView？首先，我建议您为您的游戏使用图形库...例如 AndEngine 非常易于使用，您将实现开发比使用 Java 画布更漂亮的游戏。性能也更好。

我找不到您的代码有任何问题，但是在 draw 方法中有很多处理，更重要的是在 onTouch 事件中。您应该避免在循环中使用除法或繁重的数学运算，并尝试在之前预先计算所有内容。

但我坚持；对于您正在做的事情，看看这个，您将立即启动并运行它！

android-animation - Android 2D 动画绘制：性能不佳

2 回答 2

Related

Reference