mafs-image-shape的源码分析

This is a library for making custom shape for your image on your image view. If you want to make a custom shape for your image you need to pass two image, first one is original image and second one is for your shape. First one is your actual image, this image will get the shape as like second image.

简单介绍它的功能即是,第一张图片为显示的图片,第二张图片作为整体显示内容的裁剪图形。源码地址
运行效果如下:

源码分析:

public class Shaper {

    /**
     * @param context you need to pass the context (ex: Your current activity's instance)
     * @param shapedImage pass an image from your drawable folder (Ex: R.drawable.sample_image_name)
     *                    which is shaped for your real image.Your expected image will look like this.
     * @param originalImage pass your image from your drawable (Ex: R.drawable.your_image_name).
     *                      This is your original image.
     * @param imgView pass an ImageView in which you want to set your expected image.
     * @param expectedHeight (int value) this is expected height for your image.
     * @param expectedWidth (int value) this is expected width for your image.
     *
     *           ***YOUR SHAPED IMAGE SIZE WILL BE FOR YOUR MDPI DEVICE.
     *                      IF YOUR SHAPED IMAGE SIZE IS 100PX THEN YOU
     *                      NEED TO PASS HEIGHT AND WIDTH 100 FOR YOUR MDPI DEVICE.
     *                      ***100X1.5 FOR YOUR HDPI DEVICE
     *                      ***100X2 FOR YOUR XHDPI DEVICE
     *                      ***100X3 FOR YOUR XXHDPI DEVICE
     *                      ***100X4 FOR YOUR XXXHDPI DEVICE
     *                      ######## height and width can be different ########
     *           ***
     * */
    public static void shape(Context context, int originalImage, int shapedImage, ImageView imgView, int expectedHeight, int expectedWidth) {

        Bitmap original = BitmapFactory.decodeResource(context.getResources(), originalImage);
        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), shapedImage);

        Bitmap mask = bitmap;

//        original = getResizedBitmap(original, expectedHeight, expectedWidth);
        original = getResizedBitmap(original, dipToPixels(context, expectedHeight), dipToPixels(context, expectedWidth));
        // 获取背景图形的大小
        int bitmapHeight = bitmap.getHeight();
        int bitmapWidth = bitmap.getWidth();
        // 创建背景画布大小为背景图片的大小
        Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
        final Canvas mCanvas = new Canvas(result);
        // 画笔抗锯齿
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

        int widthMask = mask.getWidth();
        int heightMask = mask.getHeight();
        // 绘制显示图片时的偏移量
        float centerX = (widthMask - original.getWidth()) * 0.5f;
        float centerY = (heightMask - original.getHeight()) * 0.5f;
        mCanvas.drawBitmap(original, centerX, centerY, null);
        mCanvas.drawBitmap(mask, 0, 0, paint);
        paint.setXfermode(null);

        imgView.getLayoutParams().height = bitmapHeight;
        imgView.getLayoutParams().width = bitmapWidth;
        imgView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imgView.setImageBitmap(result);
        // 调整ImageView的边界并保持drawable的宽高比
        imgView.setAdjustViewBounds(true);

    }

    /**
     * By using this method you can resize your image
     *
     * @param image pass a bitmap image for resizing.
     * @param newHeight pass your expected new height in px (int value).
     * @param newWidth pass your expected new width in px (int value).
     * */
    public static Bitmap getResizedBitmap(Bitmap image, float newHeight, float newWidth) {
        int width = image.getWidth();
        int height = image.getHeight();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // Matrix类用于对图像进行变换,如:平移、错切
        Matrix matrix = new Matrix();
        // 对图像进行缩放
        matrix.postScale(scaleWidth, scaleHeight);
        Bitmap resizedBitmap = Bitmap.createBitmap(image, 0, 0, width, height, matrix, false);

        return resizedBitmap;
    }


    public static float dipToPixels(Context context, float dipValue) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        // TypedValue.applyDimesion可以将dp、sp转换成px
        // 参数1为转换的单位,参数2要转换的具体数值,参数3为屏幕密度
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dipValue, metrics);
    }

}

首先按照用户指定的宽高来裁剪原始图片

original = getResizedBitmap(original,
 dipToPixels(context, expectedHeight), 
dipToPixels(context, expectedWidth));
  • getResizedBitmap()方法中使用了Matrix类具体介绍大家自行移步,Matrix类可以对图片进行变换,包括:
    • Translate————平移变换

    • Scale————缩放变换

    • Rotate————旋转变换

    • Skew————错切变换

所以学到了一种新的缩放图片的方法

Matrix matrix = new Matrix();
// 对图像进行缩放
matrix.postScale(scaleWidth, scaleHeight);
Bitmap resizedBitmap = 
Bitmap.createBitmap(image, 0, 0, width, height, matrix, false);

接下来我们回到主方法再看这段代码

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

第一句代码设置画笔的方锯齿标志,第二句代码setXfermode(Xfermode xfermode)该方法用来设置两张图片相交时的模式,系统已经实现的Xfermode子类有以下三个:

1、AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图)。
2、PixelXorXfermode 当覆盖已有的颜色时,应用一个简单的像素XOR操作。
3、PorterDuffXfermode 这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互

即Canvas的图像作为背景,在它上面绘制时显示的效果。

canvas原有的图片 可以理解为背景 就是dst
新画上去的图片 可以理解为前景 就是src

不同的模式效果如下:


所以该框架的源码采用了DstIn的模式,它的绘制图片的具体方法:

mCanvas.drawBitmap(original, centerX, centerY, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);

先绘制背景既要显示的original图片,在绘制需要裁减时使用的图形图片。
最后即是对ImageView的布局了,代码如下:

imgView.getLayoutParams().height = bitmapHeight;
imgView.getLayoutParams().width = bitmapWidth;
imgView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imgView.setImageBitmap(result);
// 调整ImageView的边界并保持drawable的宽高比
imgView.setAdjustViewBounds(true);

使用方式也很简单Demo中就有它的使用方法我这里也将代码贴出来,XML视图布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mafstech.imagelibrary.MainActivity">

    <ImageView
        android:id="@+id/ivOne"
        android:layout_width="150dp"
        android:layout_height="150dp"/>


    <ImageView
        android:id="@+id/ivTwo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="114dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp" />

    <ImageView
        android:id="@+id/ivThree"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_below="@+id/ivOne"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="66dp" />
</RelativeLayout>

MainActivity:

public class MainActivity extends AppCompatActivity {

    ImageView ivOne, ivTwo, ivThree;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ivOne = (ImageView) findViewById(R.id.ivOne);
        ivTwo = (ImageView) findViewById(R.id.ivTwo);
        ivThree = (ImageView) findViewById(R.id.ivThree);

        /**
         * This tasks are only for HDPI device. You need to convert all height and width to any other dpi as your expectation
         * */
        Shaper.shape(MainActivity.this, R.drawable.flag, R.drawable.tri, ivOne, 150, 150);
        Shaper.shape(MainActivity.this, R.drawable.flag, R.drawable.pro_pic, ivTwo, 100, 100);
        Shaper.shape(MainActivity.this, R.drawable.flag, R.drawable.shape2, ivThree, 150, 150);

    }
}

好了学习该框架的源码即到这里,希望有一天开发当中能够使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,104评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,816评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,697评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,836评论 1 298
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,851评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,441评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,992评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,899评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,457评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,529评论 3 341
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,664评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,346评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,025评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,511评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,611评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,081评论 3 377
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,675评论 2 359

推荐阅读更多精彩内容