PS合成雨夜中冷静思考的酷哥,圆形图片绘制代码

来源:http://www.downLoad-pangu.com 作者:新闻资讯 人气:173 发布时间:2019-10-09
摘要:PS合成雨夜中冷静思考的酷哥 (载入中...) 来源:一起ps吧 作者:不详教程虽然是黑白效果,仔细观察后会发现很多亮点:对比强烈的黑白效果,人物轮廓上溅起的水雾等。这些都是非

PS合成雨夜中冷静思考的酷哥 (载入中...) 来源:一起ps吧 作者:不详 教程虽然是黑白效果,仔细观察后会发现很多亮点:对比强烈的黑白效果,人物轮廓上溅起的水雾等。这些都是非常细致的部分,也是值得我们学习的部分。 最终效果 图片 1 <点小图查看大图> 1、首先打开背景素材,矩形选区内的图像保留,用剪裁工具处理即可。 图片 2

极品滤镜KPT3(11) (载入中...)

andorid中圆形图片很早就有啦,今天算是搞了一把,自己写了出来,并且可以实际使用的代码。
先看效果图:
图片 3

第十三部分 KPT Pixel f/x(光点效果)

图片的原图是:
图片 4

光点效果滤镜用于将图像分化成无数的点。它有三种应用方式:

先看看xml的布局文件是怎么样的:

Diffuse Nore:增加扩散;Pixel Weather 1;多像素点模式1;Pixel Weather 2;多像素点模式2。

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

    <com.husy.surfaceviewexample.PorterDuffViewImage
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@mipmap/zly"
    android:visibility="visible"
    />
</LinearLayout>

请参照下面两幅图片。

布局文件很简单,只要是ImageView的属性都可以在自定义的圆形图片组件中使用。
由于布局文件中规定了图片大小60dp,所以你看到效果图中,相对于原图来说,是由缩放效果的,但是整体的图片是居中进行缩放显示。

原图 使用Pixel效果以后

好了,说到这里,首先补充一些基础知识。
代码中使用到了PorterDuffXfermode 类:

第十四部分 KPT Smudge f/x(混合色彩模糊)

PorterDuffXfermode 这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。
该类的用法如下:

混合色彩模糊效果滤镜可以用Smudge和Drip两种方式沿特定方向产生模糊效果,如图。

//创建PorterDuffXfermode
PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
//设置mode画笔风格
paintnew.setXfermode(mode);
原图 使用Smudge效果后 使用Drip效果后

这样设置画笔,到底什么效果,看看Google的效果图:
图片 5

第十五部分 KPT Notise f/x(杂质效果)

1.PorterDuff.Mode.CLEAR
所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
显示上层绘制图片
3.PorterDuff.Mode.DST
显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
正常绘制显示,上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
异或:去除两图层交集部分
13.PorterDuff.Mode.DARKEN
取两图层全部区域,交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
取两图层全部,点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
取两图层全部区域,交集部分变为透明色
(以上内容参考我的博友的文章内容:原文链接请猛戳这里是个妹子呦~~~哈哈)

杂质效果滤镜是用于在图像中加人杂质,它有三中方式:Hue Protected:保护色模式Grime Layer:暗层模式Special Color:特别色模式

看了上面的内容,我觉得对于刚开始接触这个类的同学来说,太过抽象啦。
下面我给解释一下,希望能达到解惑的目的吧。

Hue Protected是在图像上加一层保护色 Grim Laye在图像上增加暗色杂质 Special Color可以让用户选取颜色,添加彩色杂点

首先看上面的16副图中的第二幅和第三幅图,里面都是一幅图片,Src代表原图,是一个正方形,Dst代表目的图,是一个圆形。
下面接着看第四幅图,SrcOver模式,你会发现正方形放在了圆形的上面,并且正方形显示完全,圆形被正方形覆盖了一部分。这就是SrcOver模式的效果。
下面再看第五幅图,PorterDuff.Mode.DST_OVER,你会发现圆形放在了正方形的上面,圆形显示完全,正方形被覆盖了,这就是这种模式达到的效果。

第十六部分 KPT Metatoys f/x(万花筒效果)

我们看了这几幅图之后,就可以做一个总结啦。
也就是说上面的PorterDuffXfermode 类完成的效果,应该是两幅图或者说两个位图完成的效果
这个时候,你在看下面的11中模式,会发现都是在两幅图或者两幅位图的基础上进行显示的效果。

万花筒效果滤镜能使图像上产生万花筒和旋涡效果。

下面我们就有了画圆形图头像的思路了。
利用的就是上面的PorterDuff.Mode.SRC_IN或者是PorterDuff.Mode.DST_IN这两种模式达到的效果。

单击界面框左下方的模式指针,选择Kaleida或Twirl项拖动对话框就可得到不同的效果,效果如图。

首先说说PorterDuff.Mode.SRC_IN这种模式的思路:
图片 6
这种效果如上图。正方形在圆形图上面的部分显示出来,正方形的其他部分不显示。并且圆形图也不显示。

原图 Kaleida效果图 Twirl效果图

我们可以把正方形的部分设置我们要显示的头像图片,把圆形部分设置为我们的圆形的位图,并且这两个图都居中显示,这样达到的效果就是圆形头像图片的效果!!

第十七部分 KPT Gussian f/x(高斯模糊效果)

再说说PorterDuff.Mode.DST_IN这种模式的思路:
图片 7
这种效果图上,正方形部分不显示,只显示圆形图在正方形重合的部分,圆形图的其他部分不显示。

高斯模糊效果滤镜可以使图像模糊,产生朦胧效果。它比内置的Gaussian Blur更方便、更强大。

这个模式下,我们把圆形图设置为我们想要显示的头像图片,把正方形设置为圆形的位图,并且这两个图都居中显示,这样达到的效果就是圆形头像的效果。

操作界面下方是模式选择按钮,有四种方式可以选择:Blocks(高斯团)Blur(柔化)Weaves(编织)Diamonds(钻石)它们所产生的效果与PHOTOSHOP的滤镜有相似之效果,不再图示。

对比上面两种模式下的思路,会发现我们只是把图片调换了以下就可以啦。

第十八部分 KPT Intensity f/x(调整亮度)

好了,下面给出两种模式下的代码,首先给出PorterDuff.Mode.SRC_IN模式下的代码:

由于与前面提到的f/x界面基本相同,就不多说了

public class MyXfermode extends View{
    private int width;
    private int height;
    private Paint mpaint;
    private Bitmap mbitmap;
    private Bitmap moutbitmap;
    public MyXfermode(Context context) {
        super(context);

    }
    public MyXfermode(Context context, AttributeSet attrs) {
        super(context, attrs);

        initBitmap();
    }
    public void initBitmap(){
    //禁用硬件加速器,因为有些硬件加速器不支持
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        //设置抗锯齿
        mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mpaint.setColor(Color.YELLOW);      
        mbitmap=BitmapFactory.decodeResource(getResources(),R.drawable.yourimg);
        //以后的绘制都将显示在moutbitmap上面
       moutbitmap=Bitmap.createBitmap(mbitmap.getWidth(), mbitmap.getHeight(), Config.ARGB_8888);
       Log.d("图片信息", mbitmap.getWidth()+ "高"+mbitmap.getHeight());
        Canvas canvas_outbitmap=new Canvas(moutbitmap);

        //Dst
        canvas_outbitmap.drawCircle(mbitmap.getWidth()/2, mbitmap.getHeight()/2,mbitmap.getWidth()/2,mpaint);
        PorterDuffXfermode mode=new PorterDuffXfermode(Mode.SRC_IN); 
        mpaint.setXfermode(mode);
        //Src
        canvas_outbitmap.drawBitmap(mbitmap, 0, 0, mpaint);

    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(moutbitmap,0,0,null);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
    }
}

布局文件就很简单啦:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center">

  <com.example.myview.MyXfermode

        android:id="@+id/myarcprogress"
                android:layout_width="400dp"
        android:layout_height="400dp" />
</LinearLayout>

(这里实例代码是我从妹子的博客里面搞过来的,你会发现这里代码不通用,使用的资源文件图片,我们先要实现的是xml布局文件中进行的设置的图片或者代码中设置的图片,请看下面的另一种方式)

第二种方式,PorterDuff.Mode.DST_IN
代码如下:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

/**
 * Created by husy on 2015/10/18.
 * @link http://blog.csdn.net/u010156024
 * @description:
 */
public class PorterDuffViewImage extends ImageView {
    private Paint mpaint;
    private static Xfermode xfermode;
    private static Bitmap bitmap;
    private RectF rect;
    public PorterDuffViewImage(Context context) {
        super(context);
        init();
    }

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

    public PorterDuffViewImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init(){
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
        mpaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        Bitmap.Config config = Bitmap.Config.ARGB_8888;
        Canvas canvas1=null;
        BitmapDrawable drawable = (BitmapDrawable)getDrawable();
        drawable.setBounds(0, 0, width, height);
        drawable.draw(canvas);
        if (bitmap == null){
            Log.i("porterduffviewimage","bitmap==null");
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            rect = new RectF(0,0,width,height);
            bitmap = Bitmap.createBitmap(width, height, config);
            canvas1 = new Canvas(bitmap);
            canvas1.drawOval(rect, paint);
        }
        mpaint.setXfermode(xfermode);
        canvas.drawBitmap(bitmap,0,0,mpaint);
    }

}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <com.husy.surfaceviewexample.PorterDuffViewImage
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@mipmap/zly"
    android:visibility="visible"
    />

</LinearLayout>

显示效果就是文章开头实现的效果图。

下面我对第二种方式的代码一一进行解释:

  • 首先是三个构造器。这个是实现自定义view中必须的,当然,你也会看到只实现前两个构造器的,但是标准来说,应该是实现这两个构造器。并且从API 21开始增加了下面一种构造器:
public PorterDuffViewImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

不过,不影响,不实现这第四个构造器也没有问题的。

  • 接着是初始化的方法init(),在这里面进行初始化对象,利用绘制过程中使用到的画笔、模式等等。
  • 下面是重写onDraw()方法。这个是该类的重点。
int width = getWidth();
int height = getHeight();

这两行代码是获取组件的大小宽高。

BitmapDrawable drawable = (BitmapDrawable)getDrawable();
 drawable.setBounds(0, 0, width, height);
 drawable.draw(canvas);

这几行代码是绘制目标图片,也就是头像图片在这几行代码中完成,绘制到画板上面,此时是矩形的图片,为什么是矩形图片呢?因为在布局文件中使用android:src=”@drawable/zly”或者是在代码中设置:((PorterDuffViewImage)findViewById(R.id.porter))
.setImageResource(R.mipmap.zly);
这样通过getDrawable()获取的就是原始图片。
需要注意的是:画板中绘制PorterDuff.Mode类型的图片,需要先绘制目的DST图片!!在回事SRC图片! 请理解这句话!!

然后的代码请看:

if (bitmap == null){
            Log.i("porterduffviewimage","bitmap==null");
            Bitmap.Config config = Bitmap.Config.ARGB_8888;
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            rect = new RectF(0,0,width,height);
            bitmap = Bitmap.createBitmap(width, height, config);
            canvas1 = new Canvas(bitmap);
            canvas1.drawOval(rect, paint);
        }

这个代码中绘制一个位图bitmap的圆形位图,这就是SRC图!!为什么是圆形呢?因为我们想要的效果就是圆形头像!而这个bitmap位图没有图像,只是一个圆形区域,那么头像图片从何而来呢?就是从上面绘制的DST图中而来!!
要知道,我们此时采用的模式是:PorterDuff.Mode.DST_IN
这种模式是DST图在SRC图中重合的部分显示出来,DST图的重合区域外部不显示,并且SRC图整个不显示。
这里的代码使用了if判断,是因为为了复用!利用static修饰,当重复使用圆形图的时候,只用创建一个类变量!!!
不过我们上面只是利用canvas1画板得到一个圆形位图,要显示圆形头像图片,还要把圆形位图画在原来的画板上,所以有了以下的代码:

 mpaint.setXfermode(xfermode);
 canvas.drawBitmap(bitmap,0,0,mpaint);

设置画笔的模式,同时把位图显示在canvas上!!
这样,我们就得到了圆形头像!!效果就是刚开始展示的图像!!

既然有了自定义view,我们可能不在布局中定义android:src=”@drawable/zly”,我们可能在代码中定义:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ((PorterDuffViewImage)findViewById(R.id.porter))
                .setImageResource(R.mipmap.zly);
    }
}

这样也是OK的,布局中就简单了:

<com.husy.surfaceviewexample.PorterDuffViewImage
        android:id="@+id/porter"
        android:layout_width="60dp"
    android:layout_height="60dp"
    />

显示效果和文章开始的图像一样:
图片 8

到此,具有实际应用价值的自定义的圆形头像代码完成!!!
有点小感慨啊,看着挺简单的东西,自己一步步搞出来,遇到各种问题。建议大家好好敲一遍代码!

本文由必赢app注册送38元发布于新闻资讯,转载请注明出处:PS合成雨夜中冷静思考的酷哥,圆形图片绘制代码

关键词:

上一篇:必赢官网送38彩金敞开胸怀

下一篇:没有了

最火资讯