Question

我有一个自定义imageView（zoomImageView），它具有平移和缩放功能。我还有一个三角形的蒙版图像。当我在imageView上应用三角形蒙版图像（显示星系图像）时，我看到星系图像被裁剪成三角形，正如我想要的那样。

enter image description here

问题是，我希望用户捏缩放和平移背景图像（galaxy）而不缩放和平移遮罩图像。目前，背景（星系）和蒙版图像都在平移和缩放。

如何冻结蒙版图像并仅使背景图像平移和缩放？我希望掩码图像能够作为一个固定的＆＃34; Window＆＃34;背景图像是pan ans zoomable。

我正在以这种方式应用蒙版：

final zoomImageView img = (zoomImageView)findViewById(R.id.iv_cropImage);
    img.setImageURI(uriValue);

    Canvas canvas = new Canvas();

    try {
        Bitmap mainImage = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uriValue);

        Bitmap mask = BitmapFactory.decodeResource(getResources(), R.mipmap.mask_triangle_perfect);
        Bitmap result = Bitmap.createBitmap(mainImage.getWidth(), mainImage.getHeight(), Bitmap.Config.ARGB_8888);

        canvas.setBitmap(result);
        Paint paint = new Paint();
        paint.setFilterBitmap(false);

        canvas.drawBitmap(mainImage, 0, 0, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(mask, 0, 0, paint);
        paint.setXfermode(null);

        img.setImageBitmap(result);
        img.invalidate();
    }
    catch (Exception e)
    {
        Toast.makeText(context, "Error 006 occurred.", Toast.LENGTH_SHORT).show();
    }

这是我自定义的imageview类

public class zoomImageView extends ImageView {

private static final int INVALID_POINTER_ID = -1;

private float mPosX;
private float mPosY;

private float mLastTouchX;
private float mLastTouchY;
private float mLastGestureX;
private float mLastGestureY;
private int mActivePointerId = INVALID_POINTER_ID;

private ScaleGestureDetector mScaleDetector;
private float mScaleFactor = 1.f;

public zoomImageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
    mScaleDetector = new ScaleGestureDetector(getContext(), new ScaleListener());
}

public zoomImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    // Let the ScaleGestureDetector inspect all events.
    mScaleDetector.onTouchEvent(ev);

    final int action = ev.getAction();
    switch (action & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN: {
            if (!mScaleDetector.isInProgress()) {
                final float x = ev.getX();
                final float y = ev.getY();

                mLastTouchX = x;
                mLastTouchY = y;
                mActivePointerId = ev.getPointerId(0);
            }
            break;
        }


        case MotionEvent.ACTION_MOVE: {

            // Only move if the ScaleGestureDetector isn't processing a gesture.
            if (!mScaleDetector.isInProgress()) {
                final int pointerIndex = ev.findPointerIndex(mActivePointerId);
                final float x = ev.getX(pointerIndex);
                final float y = ev.getY(pointerIndex);

                final float dx = x - mLastTouchX;
                final float dy = y - mLastTouchY;

                mPosX += dx;
                mPosY += dy;

                invalidate();

                mLastTouchX = x;
                mLastTouchY = y;
            }
            else{
                final float gx = mScaleDetector.getFocusX();
                final float gy = mScaleDetector.getFocusY();

                final float gdx = gx - mLastGestureX;
                final float gdy = gy - mLastGestureY;

                mPosX += gdx;
                mPosY += gdy;

                invalidate();

                mLastGestureX = gx;
                mLastGestureY = gy;
            }

            break;
        }
        case MotionEvent.ACTION_UP: {
            mActivePointerId = INVALID_POINTER_ID;
            break;
        }
        case MotionEvent.ACTION_CANCEL: {
            mActivePointerId = INVALID_POINTER_ID;
            break;
        }
        case MotionEvent.ACTION_POINTER_UP: {

            final int pointerIndex = (ev.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK)
                    >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
            final int pointerId = ev.getPointerId(pointerIndex);
            if (pointerId == mActivePointerId) {
                // This was our active pointer going up. Choose a new
                // active pointer and adjust accordingly.
                final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                mLastTouchX = ev.getX(newPointerIndex);
                mLastTouchY = ev.getY(newPointerIndex);
                mActivePointerId = ev.getPointerId(newPointerIndex);
            }
            else{
                final int tempPointerIndex = ev.findPointerIndex(mActivePointerId);
                mLastTouchX = ev.getX(tempPointerIndex);
                mLastTouchY = ev.getY(tempPointerIndex);
            }

            break;
        }
    }

    return true;
}

@Override
public void onDraw(Canvas canvas) {

    canvas.save();

    canvas.translate(mPosX, mPosY);

    if (mScaleDetector.isInProgress()) {
        canvas.scale(mScaleFactor, mScaleFactor, mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
    }
    else{
        canvas.scale(mScaleFactor, mScaleFactor, mLastGestureX, mLastGestureY);
    }

    super.onDraw(canvas);
    canvas.restore();
}

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        mScaleFactor *= detector.getScaleFactor();

        // Don't let the object get too small or too large.
        mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 10.0f));

        invalidate();
        return true;
    }
}

Answer 1

如果您在加载时通过“烘烤”将面膜应用到主图像，则无法单独移动它们。当前正在应用蒙版的位置，加载两个图像，并将主图像设置为图像位图。还要加载蒙版图像，但将其存储在自定义图像类的变量中：

    Bitmap mainImage = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uriValue);
    img.setImageBitmap(mainImage);
    img.invalidate();

    // store in a variable:
    mMask = BitmapFactory.decodeResource(getResources(), R.mipmap.mask_triangle_perfect);

在此处删除画布绘图代码，因为它将移至onDraw。

更改您的onDraw以使用类似代码应用掩码，以便您之前将其应用于加载时间：

@Override
public void onDraw(Canvas canvas) {

    canvas.save();

    canvas.translate(mPosX, mPosY);

    if (mScaleDetector.isInProgress()) {
        canvas.scale(mScaleFactor, mScaleFactor, mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
    }
    else{
        canvas.scale(mScaleFactor, mScaleFactor, mLastGestureX, mLastGestureY);
    }

    super.onDraw(canvas);
    canvas.restore();

    Paint paint = new Paint();
    paint.setFilterBitmap(false);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    canvas.drawBitmap(mMask, 0, 0, paint);
    paint.setXfermode(null);
}

因为绘制蒙版的代码放在canvas.restore()之后，缩放和平移变换将应用于主图像（在调用super.onDraw(canvas)时绘制，而不是在蒙版图像上绘制。） / p>

如何在不影响蒙版图像的情况下缩放/平移图像？

1 个答案: