<commit_before># Android显示框架：自定义View实践之绘制篇

**关于作者**

>郭孝星，非著名程序员，主要从事Android平台基础架构与中间件方面的工作，欢迎交流技术方面的问题，可以去我的[Github](https://github.com/guoxiaoxing)提交Issue或者发邮件至<EMAIL>与我联系。

**文章目录**

- 一 View
- 二 Paint
    - 2.1 颜色处理
    - 2.2 文字处理
    - 2.3 特殊处理
- 三 Canvas
    - 3.1 界面绘制
    - 3.2 范围裁切
    - 3.3 集合变换
- 四 Path
    -  4.1 添加图形
    -  4.3 画线（直线或曲线）
    -  4.3 辅助设置和计算

**文章源码**

- [DrawView](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/DrawView.java)
- [WaveView](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/bazier/WaveView.java)
- [RippleLayout](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/RippleLayout.java)
- [LabelImageView](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/LabelImageView.java)

本文还提供了三个综合性的完整实例来辅助理解。

- View绘制 - 图片标签效果实现
- Canvas绘图 - 水面涟漪效果实现
- 二阶贝塞尔曲线的应用 - 杯中倒水效果实现


<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/label_view.png =250x500"/>

<p>
<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/label_view.png =250x500"/>

<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/ripple.gif" width="260" height="500"/>
<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/bezier_wave.gif" width="260" height="500"/>
</p>

第一次阅览本系列文章，请参见[导读](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/doc/导读.md)，更多文章请参见[文章目录](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/README.md)。

本篇文章我们来分析View绘制方面的实践。

一个简单的自定义View

```java
public class DrawView extends View {
<commit_msg>add ui framework document<commit_after># Android显示框架：自定义View实践之绘制篇

**关于作者**

>郭孝星，非著名程序员，主要从事Android平台基础架构与中间件方面的工作，欢迎交流技术方面的问题，可以去我的[Github](https://github.com/guoxiaoxing)提交Issue或者发邮件至<EMAIL>与我联系。

**文章目录**

- 一 View
- 二 Paint
    - 2.1 颜色处理
    - 2.2 文字处理
    - 2.3 特殊处理
- 三 Canvas
    - 3.1 界面绘制
    - 3.2 范围裁切
    - 3.3 集合变换
- 四 Path
    -  4.1 添加图形
    -  4.3 画线（直线或曲线）
    -  4.3 辅助设置和计算

**文章源码**

- [DrawView](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/DrawView.java)
- [WaveView](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/bazier/WaveView.java)
- [RippleLayout](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/RippleLayout.java)
- [LabelImageView](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/demo/src/main/java/com/guoxiaoxing/android/framework/demo/application/ui/LabelImageView.java)

本文还提供了三个综合性的完整实例来辅助理解。

- View绘制 - 图片标签效果实现
- Canvas绘图 - 水面涟漪效果实现
- 二阶贝塞尔曲线的应用 - 杯中倒水效果实现

![](https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/label_view.png =250x500)


<p>
<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/label_view.png =250x500"/>

<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/ripple.gif" width="260" height="500"/>
<img src="https://github.com/guoxiaoxing/android-open-source-project-analysis/raw/master/art/app/ui/bezier_wave.gif" width="260" height="500"/>
</p>

第一次阅览本系列文章，请参见[导读](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/doc/导读.md)，更多文章请参见[文章目录](https://github.com/guoxiaoxing/android-open-source-project-analysis/blob/master/README.md)。

本篇文章我们来分析View绘制方面的实践。

一个简单的自定义View

```java
public class DrawView extends View {

{'fraction_non_alphanumeric': 0.16347534705600766, 'fraction_numerical': 0.020105313547151747, 'mean_word_length': 4.542440318302387, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 18, 'https://': 22, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1225806', 'n_tokens_mistral': 2025, 'n_tokens_neox': 2064, 'n_words': 138}