android:Xfermode遮罩在画布180度旋转时消失

android:Xfermode遮罩在画布180度旋转时消失,android,android-canvas,drawable,xfermode,Android,Android Canvas,Drawable,Xfermode,我的灵感来自于新的材料设计动画,我致力于创建一个类似的绘图,用于新的支持v7动作栏抽屉切换 我创建了一个可定制的绘图。我实际上所做的就是在画布上创建了一个Play三角形,并在可见画布左边缘的左侧创建了pause徽标。我根据进度旋转画布并将其还原。然后,我使用Xfermode将旋转的结果裁剪成一个圆 我找不到解决这个问题的办法 问题在于调用canvas.restore后,xFermode未应用于180度旋转的结果 以下是活动代码 public class MainActivity extends

我的灵感来自于新的材料设计动画,我致力于创建一个类似的绘图,用于新的支持v7动作栏抽屉切换

我创建了一个可定制的绘图。我实际上所做的就是在画布上创建了一个Play三角形,并在可见画布左边缘的左侧创建了pause徽标。我根据进度旋转画布并将其还原。然后,我使用Xfermode将旋转的结果裁剪成一个圆

我找不到解决这个问题的办法

问题在于调用canvas.restore后,xFermode未应用于180度旋转的结果

以下是活动代码

public class MainActivity extends Activity{

ImageView iv;
CustomDrawable drawable = new CustomDrawable();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);

    iv = (ImageView) findViewById(R.id.button);
    iv.setLayerType(View.LAYER_TYPE_HARDWARE, null);
    iv.setBackgroundDrawable(drawable);

    iv.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            float[] values = { 0, 1 };
            if (drawable.getProgress() != 0) {
                values[0] = drawable.getProgress();
                values[1] = 0;
            }
            ObjectAnimator animator = ObjectAnimator.ofFloat(drawable,
                    "progress", values);
            animator.setDuration(2000);
            animator.start();

        }
    });
 }
}
以及可定制绘图的代码

public class CustomDrawable extends Drawable {
    private float mProgress = 0;
    private Paint mPaint = new Paint();
    private Path mPath = new Path();
    private final float rootTwo = (float) Math.sqrt(2);
    private final float rootThree = (float) Math.sqrt(3);
    private float radius = 0;
    private float side = 0;
    private Point[] triangle = new Point[3];
    Paint xferpaint = new Paint();
    Canvas cropper;
    Bitmap bitmap;
    Interpolator interpolator = new AnticipateOvershootInterpolator();
    private float width;
    Rect rec1, rec2;

public CustomDrawable() {
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Style.FILL);
    xferpaint.setColor(Color.RED);
    xferpaint.setStyle(Style.FILL);
    xferpaint.setAntiAlias(true);
}

@Override
public void draw(Canvas canvas) {
    canvas.getClipBounds(bound);
    boundsf.set(bound);
    if (radius == 0) {
        radius = Math.min(bound.centerX(), bound.centerY());
        radius -= 5;

        bitmap = Bitmap.createBitmap(bound.width(), bound.height(),
                Config.ARGB_8888);
        cropper = new Canvas(bitmap);
        cropper.drawCircle(bound.centerX(), bound.centerY(), radius,
                xferpaint);

        xferpaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));

        side = rootTwo * radius;

        triangle[0] = new Point(
                (int) (bound.centerX() + (side / rootThree)),
                bound.centerY());
        triangle[1] = new Point(bound.centerX()
                - (int) (side / (2 * rootThree)), bound.centerY()
                - (int) (side / 2));
        triangle[2] = new Point(bound.centerX()
                - (int) (side / (2 * rootThree)), bound.centerY()
                + (int) (side / 2));
        width = side / 4;
        rec1 = new Rect((int) (-bound.centerX() - (3 * width / 2)),
                (int) (bound.centerY() - (side / 2)),
                (int) (-bound.centerX() - (width / 2)),
                (int) (bound.centerY() + (side / 2)));
        rec2 = new Rect((int) (-bound.centerX() + (width / 2)),
                (int) (bound.centerY() - (side / 2)),
                (int) (-bound.centerX() + (3 * width / 2)),
                (int) (bound.centerY() + (side / 2)));
    }

    mPath.rewind();
    mPath.moveTo(triangle[0].x, triangle[0].y);
    mPath.lineTo(triangle[1].x, triangle[1].y);
    mPath.lineTo(triangle[2].x, triangle[2].y);
    mPath.close();
    mPaint.setColor(Color.parseColor("#378585"));
    canvas.drawPaint(mPaint);
    mPaint.setColor(Color.parseColor("#FF0400"));
    canvas.rotate(180 * interpolator.getInterpolation(mProgress), 0,
            bound.centerY());
    canvas.drawPath(mPath, mPaint);
    canvas.drawRect(rec1, mPaint);
    canvas.drawRect(rec2, mPaint);
    canvas.restore();
    canvas.drawBitmap(bitmap, 0, 0, xferpaint);
}

@Override
public int getOpacity() {
    return mPaint.getAlpha();
}

@Override
public void setAlpha(int alpha) {
    mPaint.setAlpha(alpha);
}

@Override
public void setColorFilter(ColorFilter filter) {
    mPaint.setColorFilter(filter);
}

public float getProgress() {
    return mProgress;
}

public void setProgress(float progress) {
    mProgress = progress;
    invalidateSelf();
}

}

这是您的简化绘图:

class CustomDrawable extends Drawable implements ValueAnimator.AnimatorUpdateListener {
    private float mProgress = 0;
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Path mPath;
    private Path mClipPath;

    public CustomDrawable() {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(0xffFF0400);
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        mClipPath = new Path();
        int cx = bounds.centerX();
        int cy = bounds.centerY();
        int radius = Math.min(cx, cy) - 5;
        mClipPath.addCircle(cx, cy, radius, Path.Direction.CCW);

        final float rootTwo = (float) Math.sqrt(2);
        final float rootThree = (float) Math.sqrt(3);

        float side = rootTwo * radius;
        mPath = new Path();
        mPath.moveTo(cx + (side / rootThree), cy);
        mPath.lineTo(cx - side / (2 * rootThree), cy - side / 2);
        mPath.lineTo(cx - side / (2 * rootThree), cy + side / 2);
        mPath.close();

        float width = side / 4;
        addRect(-cx - (3 * width / 2), cy - (side / 2), width, side);
        addRect(-cx + (width / 2), cy - (side / 2), width, side);
    }

    private void addRect(float l, float t, float dx, float dy) {
        mPath.addRect(l, t, l + dx, t + dy, Path.Direction.CCW);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.clipPath(mClipPath);

        canvas.drawColor(0xff378585);
        Rect bounds = getBounds();
        canvas.rotate(mProgress, 0, bounds.centerY());
        canvas.drawPath(mPath, mPaint);
    }

    public void switchIcons() {
        float[] values = { 0, 180 };
        if (mProgress != 0) {
            values[0] = mProgress;
            values[1] = 0;
        }
        ValueAnimator animator = ValueAnimator.ofFloat(values).setDuration(2000);
        animator.setInterpolator(new AnticipateOvershootInterpolator());
        animator.addUpdateListener(this);
        animator.start();
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        mProgress = (Float) animation.getAnimatedValue();
        invalidateSelf();
    }

    @Override
    public int getOpacity() {
        return mPaint.getAlpha();
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter filter) {
        mPaint.setColorFilter(filter);
    }
}
编辑:这是不带Canvas.clipPath且不创建遮罩位图的绘制方法:

其中:mDstInPaint是在Drawable的构造函数中设置了xfermode的绘制对象:

mDstInPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

canvas.restore没有用处,因为没有canvas.save/saveLayerIt有效。如果没有它,画布将保持其旋转状态,绘制遮罩时遮罩也将旋转。restore0 docs:此调用平衡先前的保存调用,并用于删除自上次保存调用以来对矩阵/剪辑状态的所有修改。调用restore的次数超过调用save的次数是错误的。请参阅粗体的最后一句。restore时不会抛出错误。之前一定有人打电话要保存。它删除了自上次保存以来对矩阵和剪辑的修改,但没有删除我在画布上绘制的内容。如果我没有删除我在本例中对矩阵所做的修改,那么修改也会影响遮罩。你也可以使用我的代码。我尝试删除还原,但它使问题恶化。您看到我的答案了吗?我的代码也工作正常。我只需要Canvas.save,但我没有。顺便说一下,您的代码看起来更干净。我也不熟悉这个画布的东西。非常感谢,伙计。这就是我从一开始就说的:调用还原时没有匹配的保存调用
mDstInPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));