美文网首页
【Android群英传】——第六章(下) Android绘图机制

【Android群英传】——第六章(下) Android绘图机制

作者: 感同身受_ | 来源:发表于2020-02-02 23:49 被阅读0次

上一部分的博客和源码地址：【Android群英传】——第六章(上) Android绘图机制与处理技巧，源码放在我的GitHub上

6.5 Android图像处理之色彩特效处理

1. 改变光色属性：

【注】代码中，private static int MID_VALUE = 127;这个属性是设置一个中值，方便通过获取seekbar的progress来获得百分比

  1. 布局：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekbarLum"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="127"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.475"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="0.784" />

    <SeekBar
        android:id="@+id/seekbarSaturation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="127"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.475"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="0.517" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="328dp"
        android:layout_height="285dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.125"
        app:srcCompat="@drawable/apple"
        android:contentDescription="TODO" />

    <SeekBar
        android:id="@+id/seekbarHue"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="127"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.475"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="0.215" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.86" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/seekbarHue"
        app:layout_constraintBottom_toTopOf="@+id/seekbarHue"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.045"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="0.52" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/seekbarSaturation"
        app:layout_constraintBottom_toTopOf="@+id/seekbarSaturation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.045"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seekbarHue"
        app:layout_constraintVertical_bias="0.56" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/seekbarLun"
        app:layout_constraintBottom_toTopOf="@+id/seekbarLum"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.041"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seekbarSaturation"
        app:layout_constraintVertical_bias="0.52" />
</androidx.constraintlayout.widget.ConstraintLayout>

  1. 代码：


    Activity
    ImageHelper

2. Android颜色矩阵——ColorMatrix、常用图像像素处理效果

  1. 布局：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="289dp"
        android:layout_height="218dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/apple" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.374829" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9042408" />

    <Button
        android:id="@+id/reset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/resetBtn"
        app:layout_constraintBottom_toBottomOf="@+id/negativeBtn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/negativeBtn"
        app:layout_constraintTop_toTopOf="@+id/negativeBtn" />

    <Button
        android:id="@+id/negativeBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/negativeBtn"
        app:layout_constraintBottom_toBottomOf="@+id/change"
        app:layout_constraintEnd_toStartOf="@+id/reset"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/change"
        app:layout_constraintTop_toTopOf="@+id/change" />

    <Button
        android:id="@+id/change"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/changeBtn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/negativeBtn"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline4" />

    <androidx.gridlayout.widget.GridLayout
        android:id="@+id/gridlayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:columnCount="5"
        app:layout_constraintBottom_toTopOf="@+id/guideline4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        app:rowCount="4">

    </androidx.gridlayout.widget.GridLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

  1. 代码：


    模拟颜色矩阵
    image.png

6.7 Android图像处理之图形特效处理

1. Android变形矩阵——Matrix

【注】这里之前一直卡着一个问题，就是添加的网格布局只显示一行，之前一直以为是带写错了，后面发现是网格布局中少添加了属性app:columnCount="3"和app:rowCount="3"

  1. 布局：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GraphicImageActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:contentDescription="TODO"
        app:layout_constraintBottom_toTopOf="@+id/guideline5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/apple" />

    <androidx.gridlayout.widget.GridLayout
        android:id="@+id/matrixGridLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:columnCount="3"
        app:rowCount="3"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline5">

    </androidx.gridlayout.widget.GridLayout>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9042408" />

    <Button
        android:id="@+id/matrixChange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/changeBtn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/matrixReset"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline6" />

    <Button
        android:id="@+id/matrixReset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/resetBtn"
        app:layout_constraintBottom_toBottomOf="@+id/matrixChange"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/matrixChange"
        app:layout_constraintTop_toTopOf="@+id/matrixChange" />

</androidx.constraintlayout.widget.ConstraintLayout>

  1. 代码：


    图形变化矩阵

2. 像素块分析——旗帜飘扬

【注】这里有一些需要初始化的变量：WIDTH，HEIGHT，A，k等等，还有verts,orig数组的初始化大小

  1. 布局：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.androidcolormatrix.FlagFlying
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline10"
        app:layout_constraintEnd_toStartOf="@+id/guideline12"
        app:layout_constraintHorizontal_bias="0.321"
        app:layout_constraintStart_toStartOf="@+id/guideline11"
        app:layout_constraintTop_toTopOf="@+id/guideline9"
        app:layout_constraintVertical_bias="1.0" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.7" />
</androidx.constraintlayout.widget.ConstraintLayout>

  1. 代码：


    旗帜飞扬

Android图像处理之画笔特效处理：

PorterDuffXfermode:圆角图片和刮刮乐效果：

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

    <com.example.androidcolormatrix.PorterDuffXfermodeTest
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

  1. 代码：


    圆角图片和刮刮乐效果

2. Shader：圆形头像框、图片倒影效果

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

    <!--<com.example.androidcolormatrix.ShaderTest
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>-->

    <com.example.androidcolormatrix.ReflectView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

  1. 代码：


    圆形头像框
    图片倒影效果

3. PathEffect

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

    <com.example.androidcolormatrix.PathEffectTest
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

  1. 代码：


    image.png

6.8 View之孪生兄弟——SurfaceView

1. SurfaceView的使用：模板代码

  1. 代码：


    模板代码

2. 正弦曲线：

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

    <com.example.androidcolormatrix.SinSurfaceView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

  1. 代码：


    正弦曲线

3. 绘图板

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

    <com.example.androidcolormatrix.DrawingBoard
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

  1. 代码：


    绘图板

源码放在我的GitHub上

相关文章

网友评论

      本文标题：【Android群英传】——第六章(下) Android绘图机制

      本文链接：https://www.haomeiwen.com/subject/otccxhtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|【Android群英传】——第六章(下) Android绘图机制|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！