2. 程式人生 > >自定義元件開發三 Graphics 繪製動態效果

自定義元件開發三 Graphics 繪製動態效果

阿新 • • 發佈：2018-11-14

概述

上文https://blog.csdn.net/u011733020/article/details/80220513主要介紹了Graphics相關的api的繪圖方法。繪製的都是靜態的，這裡使用Graphics 來實現動態效果繪圖，來達到讓畫面動起來，或者讓圖案與我們的手指互動。

過去我們在 ImageView 上繪圖，這裡嘗試定義一個繼承自 View 的
子類，重寫 onDraw()，在該方法中繪圖，當 View 顯示時會回撥 onDraw()方法
展方法，用於繪製元件的外觀。

public class MyView extends View{
    public void onDraw
 
(Canvas canvas){

    }
}

View 的子類必須定義三個不同版本的構造方法。

invalidate()

View 類定義了一組 invalidate()方法，該方法有好幾個版本：

public void invalidate()
public void invalidate(int l, int t, int r, int b)
public void invalidate(Rect dirty)

invalidate()用於重繪元件，不帶引數表示重繪整個檢視區域，帶引數表示重繪指定的區域。如果要去追溯該方法的原始碼，大概就是將重繪請求一級級往上提交到 ViewRoot，呼叫 ViewRoot的 scheduleTraversals()方法重新發起重繪請求，scheduleTraversals()方法會發送一個非同步訊息，呼叫 performTraversals()方法執行重繪，而 performTraversals()方法最終呼叫 onDraw()方法。所以，簡單來說，呼叫 View 的 invalidate()方法就相當於呼叫了 onDraw()方法，而 onDraw()方法中就是我們編寫的繪圖程式碼。

如果要重新整理元件或者讓畫面動起來，我們只需呼叫 invalidate()方法即可。通過改變資料來影響繪製結果，這是實現元件重新整理或實現動畫的基本思路。

invalidate()方法只能在 UI 執行緒中呼叫，如果是在子執行緒中重新整理元件，View 類還定義了另一組名為 postInvalidate 的方法：

public void postInvalidate()
public void postInvalidate(int left, int top, int right, int bottom)

先拿小車來演示一下，讓小車在 View 的 Canvas 中水平往返移動。
這裡寫圖片描述

package bczm.graphics.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import bczm.graphics.R;



public class CarMoveView extends View {
    /**
     * 小車的水平位置
     */
    private int x;
    /**
     * 小車的垂直位置，固定為 100
     */
    private static final int y = 100;
    /**
     * 小車的寬度
     */
    private static final int carWidth = 320;

    private static final int COLOR = Color.RED;
    private Paint paint;
    /**
     * 移動的方向
     */
    private boolean direction;
    private Bitmap newBitMap;

    public CarMoveView(Context context) {
        super(context);
    }

    public CarMoveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化畫筆，引數表示去鋸齒
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//        paint.setColor(COLOR);
        x = 0;

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.space_art);
        newBitMap = calculate(bitmap);
    }

    public CarMoveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public Bitmap calculate(Bitmap bm) {
        // 獲得圖片的寬高
        int width = bm.getWidth();
        int height = bm.getHeight();
        // 設定想要的大小
        int newWidth = 320;
        int newHeight = 320;
        // 計算縮放比例
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // 取得想要縮放的matrix引數
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        // 得到新的圖片
        Bitmap newbm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix,
                true);
        return newbm;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //根據 x、y 的座標值 初始小車位置
        canvas.drawBitmap(newBitMap, x, y, paint);
        //改變 x 座標的值，呼叫 invalidate()方法後，
        //小車將因 x 的值發生改變而產生移動的效果
        int width = this.getMeasuredWidth();//獲取元件的寬度
        if (x <= carWidth) {
            direction = true;
        }
        if (x >= width - carWidth) {
            direction = false;

        }
        x = direction ? x + 5 : x - 5;
    }
}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <bczm.graphics.view.CarMoveView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/ballview"
        />
</LinearLayout>
public class CarViewActivity extends Activity {
    private CarMoveView ballview;
    @Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ball_move);
        ballview = (CarMoveView) findViewById(R.id.ballview);
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                ballview.postInvalidate();
            }
        }, 200, 50);
    }
}

我們定義了一個 BallMoveView 類，繼承自 View，並且重寫了 onDraw()方法，該方法是用於在元件上繪圖的方法，同時，我們定義了有兩個引數的構造方法，如果在佈局檔案中定義了該元件，則會呼叫此構造方法來建立物件。

在 onDraw()方法中，畫布 Canvas 物件自動傳入，第一章我們已經知道該物件的來源，顯示在 View 上的內容都最終都必須繪製在該 canvs 物件上。我們呼叫 canvas 物件的 drawCircle()方法

那麼，小車是如何水平移動的呢？在 onDraw()方法中，我們發現該方法的最後幾行程式碼會
根據 direction 來修改成員變數 x 的值，如果 direction 為 true，x 累加 5，否則累加-5。正如上面所說，我們在 Activity 中恰恰是通過定時器週期性呼叫了 invalidate()方法不斷重繪元件，也就是不斷呼叫 onDraw()方法，因為小車的位置由 x 來決定，onDraw()每呼叫一次，x 的值就會變化一次，小車繪製的位置自然也會跟著一起改變，最後形成了小車移動的效果。

座標轉換

預設情況下，畫布座標的原點就是繪圖區的左上角，向左為負，向右為正，向上為負，向下為正，但是通過 Canvas 提供的方法可以對座標進行轉換。轉換的方式主要有 4 種：平移、旋轉、縮放和拉斜：

public void translate(float dx, float dy)

座標平移，在當前原點的基礎上水平移動 dx 個距離，垂直移動 dy 個距離，正負符號決定方向。座標原點改變後，所有的座標都是以新的原點為參照進行定位。

這裡寫圖片描述

下面兩段程式碼是等效的：

程式碼段 1：canvas.drawPoint(10, 10, paint);
程式碼段 2：canvas.translate(10, 10); canvas.drawPoint(0, 0, paint);

public void rotate(float degrees)

將畫布的座標以當前原點為中心旋轉指定的角度，如果角度為正，則為順時針旋轉，
否則為逆時針旋轉。

這裡寫圖片描述

public final void rotate(float degrees, float px, float py)

以點(px, py)為中心對畫布座標進行旋轉 degrees 度，為正表示順時針，為負表示逆時針。

public void scale(float sx, float sy)

縮放畫布的座標，sx、sy 分別是 x 方向和 y 方向的縮放比例，小於 1 表示縮小，等於1 表示不變，大於 1 表示放大。畫布縮放後，繪製在畫布上的圖形也會等比例縮放。縮放的單位是倍數，比如 sx 為 0.5 時，就是在 x 方向縮小 0.5 倍。

public final void scale(float sx, float sy, float px, float py)

以（px，py）為中心對畫布進行縮放。

public void skew(float sx, float sy)

將畫布分別在 x 方向和 y 方向拉斜一定的角度，sx 為 x 方向傾斜角度的 tan 值，sy 為y 方向傾斜角度的 tan 值，比如我們打算在 X 軸方向上傾斜 45 度，則 tan45=1，寫成：canvas.skew(1, 0)。

座標轉換後，後面的圖形繪製功能將跟隨新座標，轉換前已經繪製的圖形不會有任何的變化。另外，為了能恢復到座標變化之前的狀態，Canvas 定義了兩個方法用於儲存現場和恢復現場：

public int save()
儲存現場。

public void restore()
恢復現場到 save()執行之前的狀態。

Android 中定義了一個名為 Matrix 的類，該類定義了一個 3 * 3 的矩陣，通過 Matrix 同樣可以實現座標的變換，相關的方法如下：

移位

public void setTranslate(float dx, float dy)

旋轉

public void setRotate(float degrees, float px, float py)
public void setRotate(float degrees)

縮放

public void setScale(float sx, float sy)
public void setScale(float sx, float sy, float px, float py)

拉斜

public void setSkew(float kx, float ky)
public void setSkew(float kx, float ky, float px, float py)

Matrix 的應用範圍很廣，Canvas、Shader 等都支援通過 Matrix 實現移位、旋轉、縮放等效果。Matrix 的基本使用形如：

Matrix matrix = new Matrix();
matrix.setTranslate(10, 10);
canvas.setMatrix(matrix);

剪下區（ Clip ）

clip 是指剪下區，理解“剪下區”這個概念不需要費什麼周折，我們想象一下，春暖花開的季節，您在海岸邊的豪華別墅裡，面朝海邊的牆上開了一個窗戶，您和美麗的妻子依偎在窗戶旁，一起看潮起潮落、鳥來鳥往，伴隨著落日餘輝和萬丈晚霞，好不愜意。這裡的剪下區就是在 Canvas上開一個口子， 開了這個口子後，接下來繪製的內容只有通過該口子才能看到，口子外的圖形就看不到了。
這裡寫圖片描述

Canvas 提供了剪下區的功能，剪下區可以是一個 Rect 或者是一個 Path，兩個剪下區還能進行圖形運算，得到更加複雜的剪下區。我們來看看相關的方法：

public boolean clipRect(Rect rect)
public boolean clipRect(RectF rect)
public boolean clipRect(float left, float top, float right, float bottom)
public boolean clipRect(int left, int top, int right, int bottom)

以上 4 個方法定義一個矩形的剪下區

public boolean clipPath(Path path)

以上方法定義一個 Path 剪下區，用於定義更加複雜的區域。

下面用一個例子演示

public class ClipView extends View {

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Bitmap srcBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sun);
        //繪製完整照片
        canvas.drawBitmap(srcBitmap, 0, 0, null);
        //平移座標
        canvas.translate(0, 500);
        //定義剪下區
        canvas.clipRect(new Rect(100, 100, 500, 500));
        //再次繪製裁剪後的照片
        canvas.drawBitmap(srcBitmap, 0, 0, null);
    }
}

最終的效果是下面這樣：

這裡寫圖片描述

從上圖看出，平移座標後，在 Rect(100, 100, 500, 500)區域定義了一個剪下區，接下來繪製的圖片只有該剪下區才會顯示了。

剪下區還能進行圖形運算，前面學習 Path 時我們接觸過 Op，事實上剪下區的 Op 運算也沒什麼太大的不同，一共有 6 種：

public static enum Op {
DIFFERENCE,
INTERSECT,
REPLACE,
REVERSE_DIFFERENCE,
UNION,
XOR
}

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

與剪下區 Op 運算相關的方法如下：

public boolean clipRect(RectF rect, Op op)
public boolean clipRect(Rect rect, Op op)
public boolean clipRect(float left, float top, float right, float bottom, Op op)
public boolean clipPath(Path path, Op op)

用Op 的UNION來顯示裁剪區程式碼如下：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Bitmap srcBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sun);
        //繪製完整原始照片
        canvas.drawBitmap(srcBitmap, 0, 0, null);
        //平移座標
        canvas.translate(0, 500);
        //定義剪下區
        canvas.clipRect(new Rect(100, 100, 500, 500));
        //定義一個新的剪下區，與上一剪下區做 Op 運算
        Path path = new Path();
        path.addCircle(400, 320, 200, Path.Direction.CCW);
        canvas.clipPath(path, Region.Op.UNION);
        //再次繪製照片
        canvas.drawBitmap(srcBitmap, 0, 0, null);
    }

這裡寫圖片描述

利用剪下區還可以實現幀動畫的播放
這裡寫圖片描述

上面一張大圖包含了 7 幀，定義一個 1/7 大小的剪下區，每隔一段時間按照順序連續播放其中的一幀，原理類似於以前的膠片電影，這樣就構成了一個動感十足的動畫。

這裡寫圖片描述

播放過程中，剪下區（clip）是固定不動的，實際上移動的恰恰是圖片，圖片每次向左移動一幀。假設圖片總長度為 70，顯示第一幀時，圖片的 left 為 0，然後向左移動一幀，left為-10，向左移動兩幀，left 為-20……向左移動 6 幀，left 為-60，此時，整個動畫播放完畢。如果要迴圈播放，將 left 的值重新置 0 即可，具體實現請看下面的程式碼。
···
public ClipBombView(Context context, AttributeSet attrs) {
super(context, attrs);
bmpBoom = BitmapFactory.decodeResource(getResources(), R.drawable.boom);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //獲取位置的寬度和高度
    int width = bmpBoom.getWidth();
    int height = bmpBoom.getHeight();
    //剪下區
    int frameWidth = width / 7;
    Rect rect = new Rect(0, 0, frameWidth, height);
    canvas.save();
    canvas.translate(100, 100);//平移座標
    canvas.clipRect(rect);//設定剪下區
    canvas.drawBitmap(bmpBoom, -i * frameWidth, 0, null);//播放一幀
    canvas.restore();
    i++; //i 加 1 以播放下一幀
    if (i == 7) i = 0;//播放完畢後將 i 重置為 0 重新播放
}

···

謝謝認真觀讀本文的每一位小夥伴，衷心歡迎小夥伴給我指出文中的錯誤，也歡迎小夥伴與我交流學習。
歡迎愛學習的小夥伴加群一起進步：230274309

相關推薦

自定義元件開發三 Graphics 繪製動態效果

概述 上文https://blog.csdn.net/u011733020/article/details/80220513主要介紹了Graphics相關的api的繪圖方法。繪製的都是靜態的，這裡使用Graphics 來實現動態效果繪圖，來達到讓畫面動起來，或者讓圖案與我們的手指互動

自定義元件開發二 Graphics API

Graphics是Android SDK 中的一個包含一系列繪圖相關的api的包，本文介紹並使用常用的繪圖方法。 Point 類和 和 PointF 我們都知道在座標系中給定x/y兩個座標就可以確定一個點。 Point類就是表示一個點，他有兩個成員變數x、y代表點的 x 座標和

自定義元件開發一 View 的繪製流程

Activity 的組成結構 Activity對於安卓開發來說，是熟悉的不能再熟悉的，它是安卓四大元件之一，用來做介面顯示用的，那麼我相信，並不是所有的朋友都對Activity的組成結構有清晰的認識，這裡簡單聊聊Activity的組成。 實際介面展示的是Activity中的Wind

自定義元件開發九 側邊欄

概述 側邊欄是一種常見的 UI 結構，使用者使用手指左滑或者右滑，可以像抽屜一樣拉出隱藏在屏 幕邊界之外的內容，既能增加 App 的 UI 的內容，又能給使用者帶來更新鮮的使用者體驗，網易新聞、QQ（如圖所示）等主流 App 都有類似的設計。 側邊欄和上一章節講的觸控滑屏有

自定義元件開發八 Scroller與平滑滾動

概述 Scroller 譯為“滾動器”，是 ViewGroup 類中原生支援的一個功能。我們經常有這樣的體驗：開啟聯絡人，手指向上滑動，聯絡人列表也會跟著一起滑動，但是，當我們鬆手之後，滑動並不會因此而停止，而是伴隨著一段慣性繼續滑動，最後才慢慢停止。這樣的使用者體驗完全照顧了人的習

自定義元件開發七 自定義容器

概述 自定義容器本質上也是一個元件，常見的 LinearLayout、FrameLayout、GridLayout、ScrollView和 RelativeLayout 等等元件都是容器，容器除了有自己的外觀，還能用來容納各種元件，以一種特定的規則規定元件應該在什麼位置、顯示多大。

自定義元件開發六 自定義元件

概述 Android SDK 為我們提供了一套完整的元件庫，數量多、功能強，涉及到方方面面，但是，我們依然看到軟體市場上的每個 App 都有自己獨特的東西，絕不是千遍一律的，而且也會和 IOS相互借鑑，這就需要我們對元件進行定製，實現自己獨樹一幟的使用者體驗和介面風格。自定義元件到底

自定義元件開發五 陰影、 漸變和點陣圖運算

介紹陰影、漸變和點陣圖運算等技術 陰影只是一個狹義的說法，實際上也包括髮光等效果；Android 也提供了強大的漸變功能，漸變能為物體帶來更真實的質感，比如可以用漸變繪製一顆五子棋或一根金屬圓棒；點陣圖運算就更有趣了，Android 為 Bitmap 的運算提供了多達16 種運算方法，

自定義元件開發四 雙快取技術

雙快取 為什麼叫“雙快取”？說白了就是有兩個繪圖區，一個是 Bitmap 的 Canvas，另一個就是當前View 的 Canvas。先將圖形繪製在 Bitmap 上，然後再將 Bitmap 繪製在 View 上，也就是說，我們在 View 上看到的效果其實就是 Bitmap 上的內容

React-Native開發八 react-navigation之自定義元件Counter

1 前言 我們知道RN中任何介面元素都可以看成元件，小到一個按鈕，大到一個頁面。RN開發就是不停的開發元件和使用元件，並讓他們協同工作，這樣高效率協同的執行起來，這樣就能完成一個APP的功能了 在實際的開發中，我們經常需要自定義一些滿足我們專案開發的自定義元件，類似於Android

009-Ambari二次開發之新增自定義元件Redis(二)

上一篇我們主要介紹了Ambari新增元件的答題流程並以REDIS為例說明了流程，本篇在上一篇的基礎上，進一步完善說明流程並介紹如何給元件新增metric 掃描二維碼，關注BearData，獲取最新文章 上篇中，我們已經制作出了redis的rpm包，並重新編譯了我們修改後的Ambar

008-Ambari二次開發之新增自定義元件Redis(一)

Ambari目前支援的元件有HDFS、YARN、HBase、Hive、Pig、ZooKeeper、Sqoop、Storm、Flume、Tez、Oozie、Falcon、Storm、Altas、Knox、Spark、Ranger、Mahout、Kerberos等，已經涵蓋了從大資料應用的

Android自定義View的三種方式：繼承佈局，繼承原生控制元件，繼承View

 自定義View非常的常用，也是Android開發的一項基本技能，自定義View有三種方式：繼承佈局，繼承原生控制元件，繼承View。一、繼承佈局先看效果圖：程式碼實現：1.在layout資料夾中建立佈局title_view.xml，這一步根據自己需要寫，本例中的佈局如下：佈

自定義個快三平臺開發快取資料庫”玩玩

有問題快三平臺開發快取資料庫q-2747044651 官網【征途原始碼論壇https://0x9.me/WV9jI】 前言：首先宣告，此文題目算是標題黨的一種，是本人為了完成與widows服務通訊程式設計學習幻想出來的一個模型（並不是真的快取資料庫），並且會作為本人以後加深多執行緒、設計模式、非關係型資料庫

cocos creator動態新增自定義元件

/** * 面板動畫陣列 */ var cow_skin = cc.Class({ name: "cow_skin", properties: { cow_anim: { type: cc.SpriteFrame,

手摸手教你微信小程式開發之自定義元件

前言  相信大家在開發小程式時會遇到某個功能多次使用的情況，比如彈出框。這個時候大家首先想到的是元件化開發，就是把彈出框封裝成一個元件，然後哪裡使用哪裡就呼叫，對，看來大家都是有思路的人，但是要怎樣實現呢。可能你會去看官方文件，但是微信的官方文件也是說的不太清楚，所以寫起來也

小程式開發-自定義元件的擴充套件

一個開始 由於本人喜歡封裝元件做到高內聚，這樣的好處是，拿來就用，如果封裝一個元件，需要外部耦合，那麼將沒法做到很好的複用，因為耦合的部分需要每次重新開發。 最近遇到了一個業務場景是這樣，如圖： 1. 頁面展示主頁，主頁可以瀏覽，也可以點選去其他頁面，主頁有登入按鈕，登入按鈕點選顯示登入view（注意：登入

自定義PopupWindow開發

popupwindow近期工作需求，需要做一個彈出窗口，並且裏面包含2個設置項，一個進入詳細設置，一個快捷開關，界面如下： //目前常規的動畫設置，如下幾種mPopWindow.setAnimationStyle(Animation_Toast); 其中，可以設置的動畫值如下：AnimationAnim

使用自定義annotation接口進行aspectj動態緩存

執行方法 rip [] method inter interface ber == 語言 由於系統需求需 要對各個接口進行key-value緩存(以參數為key,返回的對象為value),當然對於這種情況首先考慮到的是使用aop,前段時間看過 aspectj的一些介紹,借此

Axure RP自定義元件（隨時更新）

平常做原型時，遇到許多類似的頁面互動元件，如果自己定義一些元件，以後做原型可以節省很多時間了。 2015年12月12日 common     1.性別選擇元件（文字、圖示）     2.普通按鈕、藍色按鈕、紅色按鈕   &nb