滑动解锁 android Canvas自定义控件中硬件加速引起的canvas.clipPath问题

我们知道，android中的图形都是矩形的。

要绘制一个如下的椭圆形控件（圆形图像，圆角listview，圆角按钮），我们需要裁剪画布

在4.4一下的设备上 使用canvas.clipPath裁剪画布以使得控件中绘制的内容能被不规则化

//裁剪画布

mContentRect.set(0, 0, getWidth(), getHeight());
mPath.addRoundRect(mContentRect, r/2,r/2, Path.Direction.CCW);

canvas.clipPath(mPath,android.graphics.Region.Op.REPLACE);

//绘制其他控件元素,灯泡 文字 背景

但是 在部分真是设备中，它的效果缺是这样的

裁剪失效，有没有？

问题在于canvas默认开启了硬件加速  

• Hardware Acceleration

硬件加速具体的介绍见官方文档

http://developer.android.com/guide/topics/graphics/hardware-accel.html

下面是硬件加速不支持的API和SDK等级对照表

	API level
	< 17	17	18
Support for large scale factors
drawText()	✗	✗	✓
drawPosText()	✗	✗	✗
drawTextOnPath()	✗	✗	✗
Simple Shapes*	✗	✓	✓
Complex Shapes*	✗	✗	✗
drawPath()	✗	✗	✗
Shadow layer	✗	✗	✗

	API level
	< 16	16	17	18
Canvas
drawBitmapMesh() (colors array)	✗	✗	✗	✓
drawPicture()	✗	✗	✗	✗
drawPosText()	✗	✓	✓	✓
drawTextOnPath()	✗	✓	✓	✓
drawVertices()	✗	✗	✗	✗
setDrawFilter()	✗	✓	✓	✓
clipPath()	✗	✗	✗	✓
clipRegion()	✗	✗	✗	✓
clipRect(Region.Op.XOR)	✗	✗	✗	✓
clipRect(Region.Op.Difference)	✗	✗	✗	✓
clipRect(Region.Op.ReverseDifference)	✗	✗	✗	✓
clipRect() with rotation/perspective	✗	✗	✗	✓
Paint
setAntiAlias() (for text)	✗	✗	✗	✓
setAntiAlias() (for lines)	✗	✓	✓	✓
setFilterBitmap()	✗	✗	✓	✓
setLinearText()	✗	✗	✗	✗
setMaskFilter()	✗	✗	✗	✗
setPathEffect() (for lines)	✗	✗	✗	✗
setRasterizer()	✗	✗	✗	✗
setShadowLayer() (other than text)	✗	✗	✗	✗
setStrokeCap() (for lines)	✗	✗	✗	✓
setStrokeCap() (for points)	✗	✗	✗	✗
setSubpixelText()	✗	✗	✗	✗
Xfermode
AvoidXfermode	✗	✗	✗	✗
PixelXorXfermode	✗	✗	✗	✗
PorterDuff.Mode.DARKEN (framebuffer)	✗	✗	✗	✗
PorterDuff.Mode.LIGHTEN (framebuffer)	✗	✗	✗	✗
PorterDuff.Mode.OVERLAY (framebuffer)	✗	✗	✗	✗
Shader
ComposeShader inside ComposeShader	✗	✗	✗	✗
Same type shaders inside ComposeShader	✗	✗	✗	✗
Local matrix on ComposeShader	✗	✗	✗	✓

clipPath 赫然就在其中

解决的办法的有2个;

1：依照上面的表不在不支持的设备上使用这个API，

2：对这个自定义的view 禁用硬件加速

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

例子中的自定义控件完整代码如下

/**
 * slide to control
 */
public class SlideControllerView extends RelativeLayout {
	private static final int STATE_DRAGGING = 1;
	private String mExampleString;
	private int mExampleColor = Color.RED;
	private float mExampleDimension = 0;
	private Drawable mExampleDrawable;

	private TextPaint mTextPaint;
	private Paint mMaskPaint;
	private float mTextWidth;
	private float mTextHeight;
	private Path mPath;
	private Drawable mDrawable_button;
	private Drawable mDrawable_background_button;
	int COLOR_BLUE_LIGHT = 0xff3094ff;
	private ScrollerCompat mScroller;

	public SlideControllerView(Context context) {
		super(context);
		init(null, 0);
	}

	public SlideControllerView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(attrs, 0);
	}

	public SlideControllerView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init(attrs, defStyle);
	}

	private void init(AttributeSet attrs, int defStyle) {
		// Load attributes
		final TypedArray a = getContext().obtainStyledAttributes(attrs,
				R.styleable.SlideControllerView, defStyle, 0);

		mExampleString = a
				.getString(R.styleable.SlideControllerView_exampleString);
		mExampleColor = a.getColor(
				R.styleable.SlideControllerView_exampleColor, mExampleColor);
		// Use getDimensionPixelSize or getDimensionPixelOffset when dealing
		// with
		// values that should fall on pixel boundaries.
		mExampleDimension = a.getDimension(
				R.styleable.SlideControllerView_exampleDimension,
				mExampleDimension);

		if (a.hasValue(R.styleable.SlideControllerView_exampleDrawable)) {
			mExampleDrawable = a
					.getDrawable(R.styleable.SlideControllerView_exampleDrawable);
			mExampleDrawable.setCallback(this);
		}
		if (a.hasValue(R.styleable.SlideControllerView_button)) {
			mDrawable_button = a
					.getDrawable(R.styleable.SlideControllerView_button);
			mDrawable_button.setCallback(this);
		}
		if (a.hasValue(R.styleable.SlideControllerView_background_button)) {
			mDrawable_background_button = a
					.getDrawable(R.styleable.SlideControllerView_background_button);
			mDrawable_background_button.setCallback(this);
		}

		a.recycle();

		// Set up a default TextPaint object
		mTextPaint = new TextPaint();
		mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
		mTextPaint.setTextAlign(Paint.Align.LEFT);
		// Set up a default TextPaint object
		mMaskPaint = new Paint();
		mMaskPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
		mMaskPaint.setAntiAlias(true);
		mMaskPaint.setDither(true);
		mMaskPaint.setColor(0xcccccc);

		mPath = new Path();
		paint_state = new Paint();

		mScroller = ScrollerCompat.create(getContext(), sInterpolator);
		// Update TextPaint and text measurements from attributes
		invalidateTextPaintAndMeasurements();
		
		setLayerType(View.LAYER_TYPE_SOFTWARE, null);
	}

	/**
	 * Interpolator defining the animation curve for mScroller
	 */
	private static final Interpolator sInterpolator = new Interpolator() {
		public float getInterpolation(float t) {
			t -= 1.0f;
			return t * t * t * t * t + 1.0f;
		}
	};
	int r = 0;
	RectF mleft = new RectF();
	RectF mcenter = new RectF();
	RectF mright = new RectF();
	RectF mContentRect = new RectF();
	private LinearGradient shader_stateFouse;
	private Paint paint_state;
	private int mDragState;

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		mPath.reset();
		mContentRect.set(0, 0, getWidth(), getHeight());
		mPath.addRoundRect(mContentRect, r/2,r/2, Path.Direction.CCW);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		return handerTouchEvent(event);
	}

	private boolean handerTouchEvent(MotionEvent ev) {
		final int action = MotionEventCompat.getActionMasked(ev);
		System.out.println("handerTouchEvent");
		switch (action) {
		case MotionEvent.ACTION_DOWN: {

			cancel();
			final float x = ev.getX();
			final float y = ev.getY();
			saveInitialMotion(x, y);
			saveLastMotion(x, y);
			mDragState = STATE_DRAGGING;
			break;
		}

		case MotionEvent.ACTION_MOVE: {
			if (mDragState == STATE_DRAGGING) {
				float x = ev.getX();
				final float y = ev.getY();
				if (x > getWidth() - r) {
					x = getWidth() - r;
				}
				if (x - getPaddingLeft() <= 0) {
					x = getPaddingLeft();
				}
				saveLastMotion(x, y);
				invalidate();
			} else {
			}
			break;
		}
		case MotionEvent.ACTION_UP: {
			if (mDragState == STATE_DRAGGING) {
			}
			reslease();
			break;
		}

		case MotionEvent.ACTION_CANCEL: {
			cancel();
			break;
		}
		}
		return true;
	}

	private void reslease() {
		if (isClickable()) {
			if (x_last > getWidth() / 2) {
				mScroller.startScroll((int) x_last, (int) y_last,
						(int) getWidth() - r - (int) x_last, 0);
				invalidate();
			} else {
				mScroller.startScroll((int) x_last, (int) y_last,
						getPaddingLeft() - (int) x_last, 0);
				invalidate();
			}
		}

	}

	private void cancel() {
		if (isClickable()) {
			mScroller.abortAnimation();
		}

	}

	@Override
	public void computeScroll() {
		super.computeScroll();
		// 先判断mScroller滚动是否完成
		if (mScroller.computeScrollOffset()) {

			// 这里调用View的scrollTo()完成实际的滚动
			x_last = mScroller.getCurrX();
			y_last = mScroller.getCurrY();

			// 必须调用该方法，否则不一定能看到滚动效果
			invalidate();
		}
	}

	private float x_down;
	private float y_down;

	private void saveInitialMotion(float x, float y) {
		x_down = x;
		y_down = y;
	}

	private float x_last;
	private float y_last;

	private void saveLastMotion(float x, float y) {
		x_last = x;
		y_last = y;
	}

	private void invalidateTextPaintAndMeasurements() {
		mTextPaint.setTextSize(mExampleDimension);
		mTextPaint.setColor(mExampleColor);
		mTextWidth = mTextPaint.measureText(mExampleString);

		Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
		mTextHeight = fontMetrics.bottom;
	}
	@Override
	protected void dispatchDraw(Canvas canvas) {
		super.dispatchDraw(canvas);
		onDraw(canvas);
	}
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		// clip canvas,
		r = getHeight();
		// mPath.reset();
		// mPath.moveTo(r, 0);
		// mleft.set(0, 0, r, r);
		// mPath.arcTo(mleft, 90, 180);
		// mcenter.set(r / 2, 0, getWidth() - r / 2, r);
		// mPath.addRect(mcenter, Path.Direction.CW);
		// mPath.lineTo(getWidth() - r / 2, 0);
		// mright.set(getWidth() - r, 0, getWidth(), r);
		// mPath.arcTo(mright, 270, 180);

		// boolean clip = canvas.clipPath(mPath,
		// android.graphics.Region.Op.REPLACE);
		// System.out.println(clip);

		canvas.clipPath(mPath,android.graphics.Region.Op.REPLACE);


		System.out.println(r);
		// clip draw state,
		if (shader_stateFouse == null) {
			shader_stateFouse = new LinearGradient(0, 0, getWidth(),
					getHeight(), 0xffcccccc, COLOR_BLUE_LIGHT,
					Shader.TileMode.CLAMP);
			paint_state.setShader(shader_stateFouse);
		}
		paint_state.setAlpha((int) (0xff * (x_last / getWidth())));
		canvas.drawRect(0, 0, getWidth(), getHeight(), paint_state);

		// TODO: consider storing these as member variables to reduce
		// allocations per draw cycle.
		int paddingLeft = getPaddingLeft();
		int paddingTop = getPaddingTop();
		int paddingRight = getPaddingRight();
		int paddingBottom = getPaddingBottom();

		int contentWidth = getWidth() - paddingLeft - paddingRight;
		int contentHeight = getHeight() - paddingTop - paddingBottom;

		// Draw the text.
		canvas.drawText(mExampleString, paddingLeft
				+ (contentWidth - mTextWidth) / 2, paddingTop
				+ (contentHeight + mTextHeight) / 2, mTextPaint);

		// Draw the example drawable on top of the text.
		// if (mExampleDrawable != null) {
		// mExampleDrawable.setBounds(paddingLeft, paddingTop, paddingLeft
		// + contentWidth, paddingTop + contentHeight);
		// mExampleDrawable.draw(canvas);
		// }

		if (mDrawable_background_button != null) {
			mDrawable_background_button.getIntrinsicWidth();
			mDrawable_background_button.setBounds((int) x_last + paddingLeft,
					getHeight() / 2 - r / 2 + paddingTop, r + (int) x_last
							- paddingRight, getHeight() / 2 + getHeight() / 2
							- paddingBottom);
			// mDrawable_button.setBounds((int)x_last, 0,(int)x_last+r,
			// getHeight());
			mDrawable_background_button.draw(canvas);
		}

		if (mDrawable_button != null) {
			mDrawable_button.getIntrinsicWidth();
			mDrawable_button
					.setBounds(
							(int) x_last + r / 2
									- mDrawable_button.getIntrinsicWidth() / 2,
							getHeight() / 2
									- mDrawable_button.getIntrinsicHeight() / 2,
							(int) x_last + r / 2
									+ mDrawable_button.getIntrinsicWidth() / 2,
							getHeight() / 2
									+ mDrawable_button.getIntrinsicHeight() / 2);
			// mDrawable_button.setBounds((int)x_last, 0,(int)x_last+r,
			// getHeight());
			mDrawable_button.draw(canvas);
		}

	}

	/**
	 * Gets the example string attribute value.
	 * 
	 * @return The example string attribute value.
	 */
	public String getExampleString() {
		return mExampleString;
	}

	/**
	 * Sets the view's example string attribute value. In the example view, this
	 * string is the text to draw.
	 * 
	 * @param exampleString
	 *            The example string attribute value to use.
	 */
	public void setExampleString(String exampleString) {
		mExampleString = exampleString;
		invalidateTextPaintAndMeasurements();
	}

	/**
	 * Gets the example color attribute value.
	 * 
	 * @return The example color attribute value.
	 */
	public int getExampleColor() {
		return mExampleColor;
	}

	/**
	 * Sets the view's example color attribute value. In the example view, this
	 * color is the font color.
	 * 
	 * @param exampleColor
	 *            The example color attribute value to use.
	 */
	public void setExampleColor(int exampleColor) {
		mExampleColor = exampleColor;
		invalidateTextPaintAndMeasurements();
	}

	/**
	 * Gets the example dimension attribute value.
	 * 
	 * @return The example dimension attribute value.
	 */
	public float getExampleDimension() {
		return mExampleDimension;
	}

	/**
	 * Sets the view's example dimension attribute value. In the example view,
	 * this dimension is the font size.
	 * 
	 * @param exampleDimension
	 *            The example dimension attribute value to use.
	 */
	public void setExampleDimension(float exampleDimension) {
		mExampleDimension = exampleDimension;
		invalidateTextPaintAndMeasurements();
	}

	/**
	 * Gets the example drawable attribute value.
	 * 
	 * @return The example drawable attribute value.
	 */
	public Drawable getExampleDrawable() {
		return mExampleDrawable;
	}

	/**
	 * Sets the view's example drawable attribute value. In the example view,
	 * this drawable is drawn above the text.
	 * 
	 * @param exampleDrawable
	 *            The example drawable attribute value to use.
	 */
	public void setExampleDrawable(Drawable exampleDrawable) {
		mExampleDrawable = exampleDrawable;
	}
}