一直想对之前做过的一款图片社交软件cos酱（类似in nice）的代码进行梳理，但是由于时间的关系拖到今天才开始这个工作。
在项目中，主要对照片裁剪、旋转、翻转（在之前的文章有提到过）、贴纸、滤镜、文字、边框、标签等功能。
如何添加贴纸
- 自定义WaterMarkView;
- 移动、缩放贴纸（用户的操作行为）；
- 合成图片。
自定义WaterMarkView
具体如下图
有图片中我们可以看到，贴纸由3部分组成（主体内容、删除按钮、缩放按钮）。
所以在ondraw中
canvas.drawBitmap(mBitmap, matrix, paint); mPath.reset(); mPath.moveTo(mLTPoint.x,mLTPoint.y); mPath.lineTo(mRTPoint.x, mRTPoint.y); mPath.lineTo(mRBPoint.x, mRBPoint.y); mPath.lineTo(mLBPoint.x, mLBPoint.y); mPath.lineTo(mLTPoint.x, mLTPoint.y); mPath.lineTo(mRTPoint.x, mRTPoint.y); canvas.drawPath(mPath, mPaint);//画旋转, 缩放图标controlDrawable.setBounds(mControlPoint.x - mDrawableWidth / 2, mControlPoint.y - mDrawableHeight / 2, mControlPoint.x + mDrawableWidth / 2, mControlPoint.y + mDrawableHeight/2); controlDrawable.draw(canvas); removeDrawable.setBounds(mremovePoint.x - mRemoveDrawableWidth / 2, mremovePoint.y - mRemoveDrawableHeight / 2, mremovePoint.x + mRemoveDrawableWidth / 2, mremovePoint.y + mRemoveDrawableHeight / 2); removeDrawable.draw(canvas);
然后结合GestureDetector和onTouchEvent进行缩放、移动、删除操作。具体代码如下：
switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: if (!isEditable) { //取消其余贴纸的编辑状态，只有一个处于编辑状态 Bundle bundle = new Bundle(); bundle.putSerializable("selectWaterMarkView", this); EventBus.getEventBus().post(new BasePostEvent(CosCameraConstants.WATER_MARK_EDITSTATE_CANCLE, bundle)); //设置本身被选中 setEditState(true); } mPreMovePointF.set(event.getX() + mViewPaddingLeft, event.getY() + mViewPaddingTop); mStatus = JudgeStatus(event.getX(), event.getY()); break; case MotionEvent.ACTION_UP: mStatus = STATUS_INIT; WaterMarkClicked(event.getX(), event.getY()); break; case MotionEvent.ACTION_MOVE: mCurMovePointF.set(event.getX() + mViewPaddingLeft, event.getY() + mViewPaddingTop); if (mStatus == STATUS_ROTATE_ZOOM) { float scale = 1f; int halfBitmapWidth = mBitmap.getWidth() / 2; int halfBitmapHeight = mBitmap.getHeight() / 2; //图片某个点到图片中心的距离 float bitmapToCenterDistance = FloatMath.sqrt(halfBitmapWidth * halfBitmapWidth + halfBitmapHeight * halfBitmapHeight); //移动的点到图片中心的距离 float moveToCenterDistance = distance4PointF(mCenterPoint, mCurMovePointF); //计算缩放比例 scale = moveToCenterDistance / bitmapToCenterDistance; //缩放比例的界限判断 if (scale <= MIN_SCALE) { scale = MIN_SCALE; } else if (scale >= MAX_SCALE) { scale = MAX_SCALE; } // 角度 double a = distance4PointF(mCenterPoint, mPreMovePointF); double b = distance4PointF(mPreMovePointF, mCurMovePointF); double c = distance4PointF(mCenterPoint, mCurMovePointF); double cosb = (a * a + c * c - b * b) / (2 * a * c); if (cosb >= 1) { cosb = 1f; } double radian = Math.acos(cosb); float newDegree = (float) radianToDegree(radian); //center -> proMove的向量， 我们使用PointF来实现 PointF centerToProMove = new PointF((mPreMovePointF.x - mCenterPoint.x), (mPreMovePointF.y - mCenterPoint.y)); //center -> curMove 的向量 PointF centerToCurMove = new PointF((mCurMovePointF.x - mCenterPoint.x), (mCurMovePointF.y - mCenterPoint.y)); //向量叉乘结果, 如果结果为负数， 表示为逆时针， 结果为正数表示顺时针 float result = centerToProMove.x * centerToCurMove.y - centerToProMove.y * centerToCurMove.x; if (result < 0) { newDegree = -newDegree; } mDegree = mDegree + newDegree; mScale = scale; transformDraw(); } else if (mStatus == STATUS_REMOVE) { this.mOnRemoveWaterListener.onRemoveClick(this); } else if (mStatus == STATUS_DRAG) { // 修改中心点 mCenterPoint.x += mCurMovePointF.x - mPreMovePointF.x; mCenterPoint.y += mCurMovePointF.y - mPreMovePointF.y; adjustLayout(); } mPreMovePointF.set(mCurMovePointF); break; }
重要方法transformDraw()介绍
/** * 设置Matrix, 强制刷新 */ public void transformDraw(){ int bitmapWidth = (int)(mBitmap.getWidth() * mScale); int bitmapHeight = (int)(mBitmap.getHeight()* mScale); computeRect(-framePadding, -framePadding, bitmapWidth + framePadding, bitmapHeight + framePadding, mDegree); //设置缩放比例 matrix.setScale(mScale, mScale); //绕着图片中心进行旋转 matrix.postRotate(mDegree % 360, bitmapWidth/2, bitmapHeight/2); //设置画该图片的起始点 matrix.postTranslate(offsetX + mDrawableWidth/2, offsetY + mDrawableHeight/2); invalidate(); }
重要方法transformDraw()介绍
/** * 调整View的大小，位置 */ public void adjustLayout(){ int actualWidth = mViewWidth + mDrawableWidth; int actualHeight = mViewHeight + mDrawableHeight; int newPaddingLeft = (int) (mCenterPoint.x - actualWidth /2); int newPaddingTop = (int) (mCenterPoint.y - actualHeight/2); if(mViewPaddingLeft != newPaddingLeft || mViewPaddingTop != newPaddingTop){ mViewPaddingLeft = newPaddingLeft; mViewPaddingTop = newPaddingTop; layout(newPaddingLeft, newPaddingTop, newPaddingLeft + actualWidth, newPaddingTop + actualHeight); } }
合成图片
很笨挫的办法，通过view生成图片：
Canvas canvas = new Canvas(new_bitmap); photo_area_rl.draw(canvas);
