android:照片涂画功能实现过程及原理详解

这个功能可以帮你实现,在图片上进行随意的涂抹,可以用于SNS产品。

绘图本身很简单,但是要实现在图片上指定的部分精确(位置,缩放)的绘图,就有点麻烦了。

下面讲讲实现过程及原理:

UI构图
这个UI,看似简单,还是有点复杂的,下面需要一个底图,上面再来一个透明的图片控件,画图的时候要同步两个控件的变形。

UI层次简图

为什么,需要上面一个Canvas Image与Back保持一致?因为,Canvas Image会被画到Canvas上,它是Canvas的宿主,即ImageView被变成了一块画布,原来ImageView上的内容会被擦除。如果只有Back Image那么一旦开启画布,你什么也看不到。

神奇的Matrix
ImageView控件是常用的Android控件之一,主要用于图片展示。基本上所有的高级语言中,都有类似控件。但是,有一样东西让他化腐朽为神奇,那就是Matrix。有了Matrix我们就可以实现图片平移、放大、旋转、扭曲等常用的特效。Matrix本身是一个9*9的矩阵,里面存放的是平移坐标、放大系数、sin/cos角度值。我们可以通过getMatrix()来获取一个IV的矩阵,或者通过setMatrix()来设置它的值。

上面的东西拿来有什么用?试想一下,当我们打开相册,查看一张照片的时候,可以通过触摸,平移或者放大图片。我们,要在上面绘图,先把Canvas Image 变为Canvas,但是,Canvas Image没有经过变化。必须,至少确保两个Img控件拥有相同的变形,否则无法对齐画的坐标点。这个时候,要么当Back Image变的时候,Canvas Image立即同步操作,要么,最画到canvas上的时候,同步变形。前一种方案是没有必要的,果断使用后一种。这个时候你就要问,怎么得到IV的变形参数?IV提供了一些方法来单独的获取和设置某种变形,当时折腾了很久,不但繁琐,而且达不到效果。这时候,上面的Matrix就派上用场了。当时,可没人这么愉快的告诉我这个。

坐标映射
上面完成了图形的变换,现在终于可以再上面作画了。但是一画,你就会发现一个问题,画不到指定位置上。这是什么问题呢?坐标系偏移。(0,0)点默认为屏幕的左上角。但是,想一下当我们的图片不满一个屏幕,很小的时候,Canvas的坐标系在什么位置?我在屏幕(0,0)坐标画一个点,canvas上就会出现一个点,即使两者的位置相差很远。

这个时候,我们需要将两个坐标系进行映射,通过偏移对齐坐标系。偏移多少?这时候该使用矩阵的translate值了。这样我们就可以知道图片在坐标系上的偏移了,随边你怎么移动坐标都能准确对齐。

代码如下:

private HashMap getImageViewIneerSize(ImageView iv){
    HashMap size=new HashMap();
    //获得ImageView中Image的变换矩阵
    Matrix m = iv.getImageMatrix();
    float[] values = new float[10];
    m.getValues(values);

//Image在绘制过程中的变换矩阵,从中获得x和y方向的缩放系数
    float sx = values[0];
    float sy = values[4];

//计算Image在屏幕上实际绘制的宽高
   size.put("scaleX",  1/sx);
   size.put("scaleY",  1/sy);
   size.put("offsetX", values[2]); //X轴的translate的值
   size.put("offsetY",values[5]);

return size;
}

其中width=backImage.getDrawable().getBounds().width();

你会发现有个scaleX,这是干什么的?我们假设现在图片经过缩放后的宽度恰好等于屏幕宽度,图片的实际宽度是960px。但是我们在X=480px的地方画一个点,这个点应该显示在图片的什么地方呢?我们的意图是要在图片的最后面,即X=960px的地方画一个点,但是现在却跑到了480处,明显不满足要求。这时,就需要乘上上面的scaleX了。

画线的最终代码:

代码如下:

/*根据两点坐标,绘制连线

*startX、stopX 为触摸事件开始、结束的地方

*offsetX,为图片在X轴的位移值

*scaleX,为图片在X轴的缩放值的倒数

*/
if((startY-offsetY)>=0&&(stopY-offsetY)>=0)
    canvas.drawLine((startX-offsetX)*scaleX, (startY-offsetY)*scaleY, (stopX-offsetX)*scaleX, (stopY-offsetY)*scaleY, pen);

【注】

ImageView的实际大小等于屏幕的大小,Canvas的实际大小由图片实际大小决定。

ImageView的宽高很容易取得,但是它里面的图片是变过形的,怎么获取它的当前大小呢?用(原始大小*缩放系数)。

合并
最后一步就是将两个图层合并为一张图片。参考代码如下:

代码如下:

/**
* 合并两张bitmap为一张
* @param background
* @param foreground
* @return Bitmap
*/
public static Bitmap combineBitmap(Bitmap background, Bitmap foreground) {
    if (background == null) {
       return null;
    }
    int bgWidth = background.getWidth();
    int bgHeight = background.getHeight();
    int fgWidth = foreground.getWidth();
    int fgHeight = foreground.getHeight();

Bitmap newmap = Bitmap.createBitmap(bgWidth, bgHeight, Config.ARGB_8888);
    Canvas canvas = new Canvas(newmap);
    canvas.drawBitmap(background, 0, 0, null);
    canvas.drawBitmap(foreground, (bgWidth - fgWidth) / 2,
    (bgHeight - fgHeight) / 2, null);
    canvas.save(Canvas.ALL_SAVE_FLAG);
    canvas.restore();
    return newmap;
} //end of combineBitmap

通过Canvas来合并和改变Bitmap的大小,由于两个图层的大小、位置完全一致,故坐标对齐(0,0)点就可以了。

如果,没有前面的工作,你是很难精确的进行图片合并的。

(0)

相关推荐

  • Android瀑布流照片墙实现 体验不规则排列的美感

    传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大小参差不齐,

  • Android仿微信照片选择器实现预览查看图片

    好了下面进入正题,我们先看一下实现效果吧: 下面来介绍一下代码: 本思路就是: 1.先到手机中扫描jpeg和png的图片 2.获取导图片的路径和图片的父路径名也就是文件夹名 3.将图片路径和文件夹名分别添加导数据源中 4.数据源有了就是显示了,文件夹显示是利用的popwindow,而图片显示则是GridView 看一下具体代码: 首先开启一个线程去扫描图片 /** * 利用ContentProvider扫描手机中的图片,此方法在运行在子线程中 完成图片的扫描,最终获得jpg最多的那个文件夹 */

  • Android调用相机并将照片存储到sd卡上实现方法

    Android中实现拍照有两种方法,一种是调用系统自带的相机,然后使用其返回的照片数据. 还有一种是自己用Camera类和其他相关类实现相机功能,这种方法定制度比较高,洗染也比较复杂,一般平常的应用只需使用第一种即可. 用Intent启动相机的代码: 复制代码 代码如下: Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, 1);拍完照后就可以在onActivity

  • android获取照片的快照 思路及实现方法

    当我们在做相册.上传相关的应用的时候需要获取图片的快照,这时候就需要获取图片的快照. android中专门有一个BitmapFactory类可以来处理这类需求. 实现的步骤如下: 1.首先解析出图片文件(注意在这里为了节约内存将inJustDecodeBounds设为true,这样的话解析的图片的话只有图片的尺寸大小信息) 复制代码 代码如下: BitmapFactory.Options bmpFactoryOptions = new BitmapFactory.Options();bmpFac

  • Android应用中拍照后获取照片路径并上传的实例分享

    Activity 中的代码,我只贴出重要的事件部分代码 public void doPhoto(View view) { destoryBimap(); String state = Environment.getExternalStorageState(); if (state.equals(Environment.MEDIA_MOUNTED)) { Intent intent = new Intent("android.media.action.IMAGE_CAPTURE"); s

  • Android 调用系统相机拍摄获取照片的两种方法实现实例

    Android 调用系统相机拍摄获取照片的两种方法实现实例 在我们Android开发中经常需要做这个一个功能,调用系统相机拍照,然后获取拍摄的照片.下面是我总结的两种方法获取拍摄之后的照片,一种是通过Bundle来获取压缩过的照片,一种是通过SD卡获取的原图. 下面是演示代码: 布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http:

  • Android自定义View实现照片裁剪框与照片裁剪功能

    本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩

  • 完美解决Android三星手机从图库选择照片旋转问题

    最近解决了一个令我头疼好久的问题,就是三星手机拍照图片旋转的问题,项目中有上传图片的功能,那么涉及到拍照,从相册中选择图片,别的手机都ok没有问题,唯独三星的手机拍照之后,你会很清楚的看到会把照片旋转一下,然后你根据路径找到的图片就是已经被旋转的了,解决办法终于被我找到了.我们可以根据图片的路径读取照片exif(Exchangeable Image File 可交换图像文件)信息中的旋转角度,至于这个EXIF可以看一下大牛的文章 Android 下的EXIF 根据调试,可以清楚的发现三星手机拍照

  • Android开发仿扫一扫实现拍摄框内的照片功能

    就是仿照现在扫一扫的形式,周围是半透明的遮挡,然后中间是全透明的,拍摄后只截取框内的内容 查了很多博客,实现起来真的太复杂了,本人比较怕麻烦所以在很多地方偷懒了 先上效果图: 第一步:设置照相机预览以及拍照 这是所有步骤的前提,没有预览,用户怎么知道自己拍的什么呢.预览用的是SurfaceView 这篇博文写得已经十分详细了,打开照相机,然后拍照,而且十分简洁!不想别的博客一下就几百行代码不知所云.这篇代码可以复制下去当相机模版使用. 这里遇到一个问题,就是预览的效果是左转90度的,拍出来也是左

  • Android照片墙应用实现 再多的图片也不怕崩溃

    照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计思路其实也非常简单,用一个GridView控件当作"墙",然后随着GridView的滚动将一张张照片贴在"墙"上,这些照片可以是手机本地中存储的,也可以是从网上下载的.制作类似于这种的功能的应用,有一个非常重要的问题需要考虑,就是图片资源何时应该释放.因为随着GridView的滚动,加载的图片可能会越来越多,如果没有一种合理的机制对图片进行释放,那么当图片达到一定上限时,程序就必然

随机推荐