近期需要实现一个照片编辑功能--涂抹马赛克，其中遇到一点问题，做个demo总结一下。实现功能过程中遇到的问题主要有：1、涂抹后的路径颜色是黑色，即使paint设置了透明色；2、涂抹时坐标偏移。原理很简单，一看代码就明白了，所以只做简单解释，借鉴了《安卓群英传》的思想。
1、效果实现：背景画处理过的（马赛克）图片，前景画原图，用前景图重新创建一个canvas，涂抹时，在该canvas上drawPath即可。
2、遇到的问题及解决思路：
（1）涂抹后背景黑色的问题
起初用的方法是：
Bitmap fgBitmap = ImageResizer.decodeSampledBitmapFromFile(bitmapPath, w, h);
mGPUImage.setImage(fgBitmap);
mGPUImage.setFilter(mGPUImagePixelationFilter);
bgBitmap = mGPUImage.getBitmapWithFilterApplied();
……
// fgBitmap1 = Bitmap.createBitmap(fgBitmap.getWidth(), fgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(fgBitmap);
// mCanvas.drawColor(Color.GRAY);
mCanvas.drawBitmap(fgBitmap,0,0, null);
这样处理后，涂抹时路径完全是黑色的，达不到效果，处理后代码：
Bitmap fgBitmap = ImageResizer.decodeSampledBitmapFromFile(bitmapPath, w, h);
mGPUImage.setImage(fgBitmap);
mGPUImage.setFilter(mGPUImagePixelationFilter);
bgBitmap = mGPUImage.getBitmapWithFilterApplied();
……
fgBitmap1 = Bitmap.createBitmap(fgBitmap.getWidth(), fgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(fgBitmap1);
// mCanvas.drawColor(Color.GRAY);
mCanvas.drawBitmap(fgBitmap,0,0, null);
其中fgBitmap1 是通过fgBitmap重新创建的一个空的bitmap，再将原图画上去，这样以来涂抹的时候就不会出现黑色背景了，猜测可能与图片透明通道有关。
（2）涂抹坐标偏移问题
引出这个问题是由于添加view的时候无法设置居中，后来检查发现是由于在onDraw中绘制起点坐标一直是（0,0）导致的，修改起始坐标后可以正常居中，但是引入一个问题，即涂抹的时候坐标偏移了，偏移量正好是起始坐标的偏移量，这个问题很容易解决，绘制path的时候减去偏移量就可以了，但是主要还是需要对新创建的canvas有一定理解。通过new Canvas(Bitmap bitmap)创建canvas后，该bitmap便和canvas关联，对该bitmap所做的更改也会反映到canvas上面，canvas的大小也与其中的bitmap一致，所以canvas的(0,0)和承载它的view的(0,0)不一定会重合，反映到代码中：
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.reset();
mPath.moveTo(event.getX() - left, event.getY() - top);
Log.e(TAG, "onTouchEvent: " + event.getX() + "----" + event.getY());
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX() - left, event.getY() - top);
break;
}
mCanvas.drawPath(mPath, mPaint);
invalidate();
就是event.getX()和event.getY()是相对于view的坐标，而
mCanvas.drawPath(mPath, mPaint)是相对于canvas的坐标，所以会偏移。以下是主要逻辑：
public class MosaicView extends View {
private Bitmap bgBitmap;
private Paint mPaint;
private Canvas mCanvas;
private Path mPath;
private int strokeWidth = 100;
private String bitmapPath;
private GPUImage mGPUImage;
private GPUImagePixelationFilter mGPUImagePixelationFilter;
public int getStrokeWidth() {
return strokeWidth;
}
public void setStrokeWidth(int strokeWidth) {
this.strokeWidth = strokeWidth;
}
public String getBitmapPath() {
return bitmapPath;
}
public void setBitmapPath(String bitmapPath) {
this.bitmapPath = bitmapPath;
}
public MosaicView(Context context, String imagePath) {
this(context);
this.bitmapPath = imagePath;
}
public MosaicView(Context context) {
super(context);
init(context);
}
public MosaicView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MosaicView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
mGPUImage = new GPUImage(context);
mGPUImagePixelationFilter = new GPUImagePixelationFilter();
mGPUImagePixelationFilter.setPixel(10);//马赛克滤镜.
mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(strokeWidth);
mPath = new Path();
}
Bitmap fgBitmap1;
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
Bitmap fgBitmap = ImageResizer.decodeSampledBitmapFromFile(bitmapPath, w, h);
mGPUImage.setImage(fgBitmap); // this loads image on the current thread, should be run in a thread
mGPUImage.setFilter(mGPUImagePixelationFilter);
bgBitmap = mGPUImage.getBitmapWithFilterApplied();
int w1 = w;
int h1 = h;
int photoWidth = fgBitmap.getWidth();
int photoHeight = fgBitmap.getHeight();
left = (float)(w1 - photoWidth)/2;
top = (float) (h1 - photoHeight)/2;
fgBitmap1 = Bitmap.createBitmap(fgBitmap.getWidth(), fgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(fgBitmap1);
// mCanvas.drawColor(Color.GRAY);
mCanvas.drawBitmap(fgBitmap,0,0, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.reset();
mPath.moveTo(event.getX() - left, event.getY() - top);
Log.e(TAG, "onTouchEvent: " + event.getX() + "----" + event.getY());
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX() - left, event.getY() - top);
break;
}
mCanvas.drawPath(mPath, mPaint);//此处是在mCanvas上画，所以在down和move中必须对坐标修正
invalidate();
return true;
}
private float left;
private float top;
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
mPaint.setStrokeWidth(strokeWidth);
canvas.drawBitmap(bgBitmap, left, top, null);
canvas.drawBitmap(fgBitmap1, left, top, null);
}
}
