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