Android 2图像视图到1个画布对齐问题

时间:2014-01-16 01:04:59

标签: android android-canvas

我有2张图片浏览量。 1 ImageView是静态的,它总是放在水平和垂直的中心,我们称之为图像A.另一个ImageView(图像B)可以放在用户想要的位置以及缩放。请参阅下面的代码。

        imgMoveZoomCanvas.setOnTouchListener(new View.OnTouchListener() 
    {

        @Override
        public boolean onTouch(View myView, MotionEvent event) 
        {
            switch (event.getAction() & MotionEvent.ACTION_MASK) 
            {
            case MotionEvent.ACTION_DOWN:                                    
                // The user has pressed down on the Canvas Image
                CanvasX = event.getRawX();
                CanvasY = event.getRawY();
                CanvasDX = CanvasX - myView.getX();
                CanvasDY = CanvasY - myView.getY();


                start.set(CanvasX, CanvasY);
                pStop = start;
                mode = DRAG;

                break;
            case MotionEvent.ACTION_MOVE:
                if(mode == DRAG)
                {
                    // The user has moved the Canvas Image
                    // Check to see if the move is greater than the tolerance.
                    // If so, set the new value.
                    if(Math.abs(CanvasX - event.getRawX()) > TOLERANCE_X)
                    {
                        pStop.x = event.getRawX() - CanvasDX;
                        myView.setX(pStop.x);
                    }
                    if(Math.abs(CanvasY - event.getRawY()) > TOLERANCE_Y)
                    {
                        pStop.y = event.getRawY() - CanvasDY;
                        myView.setY(pStop.y);
                    }

                    myView.invalidate();

                    // In the event if the image has been zoomed prior to the DRAG
                    // keep the scale. The DRAG does not know it has been zoomed.
                    // Re-zoom the image.
                    if(saveScale != 1.0f)
                    {
                        // Animation Scale
                        Animation scaleAnim = new ScaleAnimation(saveScale, saveScale, saveScale, saveScale, 0,0);//(float) mid.x, (float) mid.y);

                        // Zoom in/out to the Image
                        scaleAnim.setFillEnabled(true);
                        scaleAnim.setFillAfter(true);

                        // Start the animation
                        myView.startAnimation(scaleAnim);
                    }

                }
                else if(mode == ZOOM)
                {
                    float newDist = spacing(event);

                    if (newDist > 10f) 
                    {
                        float scale = newDist / oldDist;

                        // When the image gets too small it gets extremely
                        // difficult to move or scale.
                        if(scale <0.4f)
                        {
                            scale = 0.4f;
                        }

                        // Animation Scale
                        Animation scaleAnim = new ScaleAnimation(saveScale, scale, saveScale, scale, 0,0);//(float) mid.x, (float) mid.y);

                        saveScale = scale;

                        // Zoom in to the Hand Image
                        scaleAnim.setFillEnabled(true);
                        scaleAnim.setFillAfter(true);

                        // Start the animation
                        myView.startAnimation(scaleAnim);
                    }
                }

                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                // The user is done with the image.
                mode = NONE;

                break;
            case MotionEvent.ACTION_POINTER_DOWN:
              {
                  oldDist = spacing(event);

                  if (oldDist > 10f) 
                  {
                      midPoint(mid, event);
                      mode = ZOOM;                               
                  }

                  break;
              }
            default:
                break;
            }
            return true;
        }
    });

这可以按预期工作。我可以让Image B成为我想​​要的地方。但是,当我想将2个图像视图保存到一个位图时,我正在使用画布,我将暂时显示该代码。我的问题是我很难将图像B与图像A对齐。它只是略微偏离。更清楚的是,由于ImageA位于中心,我希望用户将ImageB放置在他们想要的位置以及他们希望如何缩放。然后我想在画布中重新创建该图像并保存生成的画布。保存部分有效,但我需要帮助将ImageB移动到用户想要的位置。 ImageB稍稍关闭。

我认为通过放置偏移量可以解决问题,但事实并非如此。我注意到,根据我使用的图像分辨率,无论是我的相机还是我下载的某些图像,偏移都是不同的。我不确定为什么这些图像没有对齐。

这是我的保存功能。我将重点介绍如何在画布中对齐图像,也许有人可以指出可能出现的问题。

ImageView imgA = (ImageView) findViewById(R.id.imgFrame);
            ImageView imgB = (ImageView) findViewById(R.id.imgCanvas);
            RelativeLayout rlCanvas = (RelativeLayout) findViewById(R.id.rlCaptureMe);

            Bitmap bmB = Bitmap.createBitmap(imgB.getWidth(), imgB.getHeight(), Bitmap.Config.ARGB_8888);
            Bitmap bmA = Bitmap.createBitmap(imgA.getWidth(), imgA.getHeight(), Bitmap.Config.ARGB_8888);

            imgB.buildDrawingCache();
            bmB = imgB.getDrawingCache();

            imgA.buildDrawingCache();
            bA = imgA.getDrawingCache();

            Bitmap bm = Bitmap.createBitmap(rlCanvas.getWidth(), rlCanvas.getHeight(), Bitmap.Config.ARGB_8888);

            Canvas cFinalImage = new Canvas(bm);

            Matrix matB = new Matrix();

            matB.postScale(saveScale, saveScale);
            matB.postTranslate(pStop.x * saveScale, pStop.y * saveScale);

            cFinalImage.drawBitmap(bmB, matB, null);
            cFinalImage.drawBitmap(bmA, new Matrix(), null);

            cFinalImage.concat(matB);

正如您所看到的,我正在使用Matrix将ImageB定位到我需要它的位置。我忽略了什么吗?我不太了解矩阵所以也许我正在做一些从根本上错误的事情。任何建议将不胜感激。

提前致谢!

1 个答案:

答案 0 :(得分:0)

我意识到解决我的问题确实是一个微不足道的问题。我注意到的是,在我的画布中,所有图像都保持最对齐。我的布局有一个填充所有图像视图。一旦我将填充物放入我的矩阵中,如下图所示,我的图像不是90%正确。我想我可能不得不再做几次调整,但暂时还不错。

matB.postTranslate((pStop.x * saveScale) + (imgB.getX() - (imgB.getX() / 2)), (pStop.y * saveScale) + (imgB.getY() - (imgB.getY() / 2)));

现在画布的布局就像布局一样。

没有意识到答案正在盯着我。