你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

STM32的“GPU”——DMA2D实例详解

[复制链接]
STMCU小助手 发布时间:2021-7-7 11:12
前言
3 k$ O! L$ u5 V( r! YGPU即图形处理器,是现代显卡的核心。在没有GPU的时代,所有图形的绘制都是由CPU来完成的,CPU需要计算图形的边界、颜色等数据,并且负责将数据写入显存。简单的图形还没有什么问题,但随着计算机的发展(尤其是游戏的发展),需要显示的图形图像越来越复杂,CPU也就越来越力不从心。所以后来GPU应运而生,将CPU从繁重的图形计算任务中拯救了出来,大大加速了图形的显示速度。* j6 E5 m% U0 Z

0 F9 n; @$ L+ o+ a6 X

6 `4 X( d. V. }4 K1 I! z- y而单片机这边也有类似的发展历程。在早期的单片机使用场景中,极少有图形显示的需求。即使有,也只是简单的12864之类的显示设备,运算量不大,单片机的CPU可以很好的处理。但是随着嵌入式图形的发展,单片机需要承担的图形计算和显示任务越来越多,嵌入式系统的显示分辨率和色彩也一路飙升。慢慢地,单片机的CPU对这些计算就开始力不从心了。所以,自STM32F429开始,一个类似GPU的外设开始加入到STM32的单片机中,ST称之为Chrom-ART Accelerator,也叫DMA2D(本文将使用此名称)。DMA2D可以在很多2D绘图的场合提供加速,完美嵌合了现代显卡中“GPU”的功能。2 U$ s" {/ w3 Y/ y9 L1 u, I# _
" H. N  f( ^- }' _  G6 `7 E

9 ~- x6 H- M- ~* z虽然这个“GPU”只能提供2D加速,而且功能非常简单,与PC中的GPU不可同日而语。但是它已经可以满足大多数嵌入式开发中的图形显示加速需求,只要用好了DMA2D,我们在单片机上也可以做出流畅、华丽的UI效果。! p2 S' ?: M9 L- p) x5 p4 o

6 F  }% {- Q. R, ]3 w

# r4 x( R8 e5 d1 t0 f& ?( K本文将从实例出发,介绍DMA2D在嵌入式图形开发中的可以发挥的作用。目的是使读者能简单、快速地对DAM2D的建立最基本的概念并且学会最基本的用法。为了防止内容过于晦涩和难懂,本文不会对DMA2D的高级功能和特性进行深入地刨析(如详细介绍DMA2D的架构、全部的寄存器等等)。如果需要更加详细、专业地学习DAM2D,可以在阅读完本文后参考《STM32H743中文编程手册》。
- X. R4 S9 n, x
( @! A4 [4 |4 }# t: F
7 O) A+ h$ _2 H8 w
阅读本文之前需要对STM32中的TFT液晶控制器(LTDC)和基本的图形知识(如帧缓冲framebuffer、像素、颜色格式等概念)有一定的了解。
  P2 u. O5 e* n0 Q8 v+ O, N4 m" i3 o3 u7 y# r7 b

1 A. y0 w- D" e1 E4 N7 N# |另,除了ST之外,其他不少厂商生产的MCU中也存在类似功能的外设(如NXP在RT系列中设计的的PxP),不过这些不在本文的讨论范围内,有兴趣的朋友可以自行了解。
4 |, L# S% h1 y# b$ ^
  W' G3 |' j+ i

$ G5 ^7 X7 C- ]) o2 z3 j# U2 W准备工作, \  }, D% H( K/ d
硬件准备
' [* ~  N9 P$ t  j可以使用任何的,带有DMA2D外设的STM32开发板来验证本文中的例子,如STM32F429,STM32F746,STM32H750等MCU的开发板。本文中使用的开发板是ART-Pi 。ART-Pi是由RT-Thread官方出品的开发板,采用了主频高达480MHz的STM32H750XB+32MB SDRAM的强悍配置。而且板载了调试器(ST-Link V2.1),使用起来非常方便,特别适合各种技术方案的验证,用来作为本文的硬件演示平台再合适不过了。2 o, G3 R' z3 o& ]1 D2 C" B3 [
! S0 l- m3 B2 T2 w  O" z
) \7 t* o9 k1 _9 F8 p1 V. J9 i- s
显示屏可以是任意的彩色TFT显示屏,推荐使用16位或24位颜色的RGB接口显示屏。本文中使用的是一块 3.5‘’ 的TFT液晶显示屏,接口为RGB666,分辨率为320x240(QVGA)。在LTDC中,配置使用的颜色格式为RGB565
2 h$ [5 m8 d. N7 R
; X9 r& d. i$ ]

; N$ Q" k- G9 n) i% u+ W 1625626562(1).png
' s- W. c! n3 t- _2 ?8 o4 J  a
5 P  i. o0 C  e+ m8 z! I  _; g
/ P; L. ?0 N( N: J! Q% Q. @
开发环境准备
1 `$ \2 K, a0 F2 f% V& W9 P本文中介绍的内容和出现的代码可以在任何你喜欢的开发环境中使用,如RT-Thread Studio,MDK,IAR等。$ G3 L3 \/ j0 r6 _4 k" b

* {" D: W/ N) g! l& r

6 D& p3 s8 _) i) [" R" u开始本文的实验前你需要一个以framebuffer技术驱动LCD显示屏的基本工程。运行本文中所有的代码前都需要预先使能DMA2D。
7 O! f2 F. u& t" u3 B
$ z& J% ?' }$ }8 P# N6 j& L

2 C" T' V$ U3 |8 z% S% \使能DMA2D可以通过这个宏来实现(硬件初始化时使能一次即可):
  m9 v+ U0 h# U6 Y/ v% w8 Z% \( F; V/ y; P% j8 z4 F( ?. v# f' y
- a5 V3 k" n7 z# S# b  q; g
  1. <font face="微软雅黑" size="3">1// 使用DMA2D之前一定要先使能DMA2D外设- ^: z. K/ e' ^' N) M3 I" y& ~0 P1 T  d
  2. 9 X8 b6 ]( J& ~, E; s
  3. 2__HAL_RCC_DMA2D_CLK_ENABLE();
    9 g$ ~& t& R2 y7 u* p5 f
  4. 8 v" k7 w3 a2 }4 r! r( C4 A* W
  5. </font>
复制代码

' j* D" M" b& d. G" d. U# W7 sDMA2D的简介
' @% E0 ^# B, P: H我们先来看看ST是怎么描述DMA2D的
6 o7 t9 u. f; I- T9 n0 F2 X3 y5 X7 y5 j- t7 t/ y0 u) o' T
4 X5 o0 G7 B% J- f5 G0 }8 O& H' r7 e
1625626611(1).png
0 A' s5 M) M8 l% w
; r7 ^) u. m$ \1 G, v

7 I3 m! I6 r5 L) {乍一看有点晦涩,但其实说白了就以下几个功能:' t3 a' g- g0 H- X. x
  • 颜色填充(矩形区域)
  • 图像(内存)复制
  • 颜色格式转换(如YCbCr转RGB或RGB888转RGB565)
  • 透明度混合(Alpha Blend)
    # n  P0 V" c+ w5 D/ I

9 H4 ]) F2 K, z% v8 h9 R9 `! [- G* c
$ O- J! q0 i, ^) D  l5 z# S# i+ p
前两种都是针对内存的操作,后两个则是运算加速操作。其中,透明度混合、颜色格式转换可以和图像复制一起进行,这样就带来了较大的灵活性。1 k; x' ]  D7 r2 }8 d

$ \3 s' b* C# M
0 {& i( f$ l* o4 R8 D
可以看到,ST对DMA2D的定位就像它的名字一样,是一个针对图像处理功能强化过的DMA。而在实际开发的过程中,我们会发现DMA2D的使用方式也非常类似传统的DMA控制器。在某些非图形处理场合,DMA2D甚至也可以代替传统的DMA来发挥作用。
" Y8 k" D; Z/ s) A
! q' o1 e% a& t( m1 Z9 d

- O' {# N( ~; `1 j6 e需要注意的是,ST的不同产品线的DMA2D加速器是有微小区别的,比如STM32F4系列MCU的DMA2D就没有ARGB和AGBR颜色格式互转的功能,所以具体需要用到某个功能的时候,最好先查看编程手册看所需的功能是否被支持。
0 c. }4 x$ @: y" b# ~0 T5 @
( x- c1 _6 P% P' `# X
; w6 }5 F4 q# d8 w4 g( `+ X" g
本文只介绍所有平台的DMA2D共有的功能。
7 H2 u& o9 |' B9 r: P+ e7 T1 J7 P8 d# N7 m9 u  u5 l# S( c

. `" l/ i; G" q- m; nDMA2D的工作模式* s5 R0 }7 J5 w7 h! H0 N
就像传统DMA有外设到外设,外设到存储器,存储器到外设三种工作模式一样,DMA2D作为一个DMA,也分为以下四种工作模式:2 K2 z  d# |( ?$ b* Y

6 s$ @- Q- L- u$ J! f+ A
9 q- \+ b2 S% t; d" j  r8 O0 @
寄存器到存储器
% S& I4 H$ q- R! @/ p0 s2 r7 m1 s, X! w& U8 B$ M- v1 M
) `8 ]. z3 }1 I. S) `. M
存储器到存储器" M) k. f% B0 C1 [  O! s
- b. Z% b1 @# ?
1 _1 \2 \8 \8 U* s
存储器到存储器并执行像素颜色格式转换
2 y% d$ {4 U4 J; b, E! _, ~! {- t; e- Y4 t. G% g
- T- \  X$ @, k' k* K1 u* S0 ?; A
存储器到存储器且支持像素颜色格式转换和透明度混合( y: l) j; {7 m

1 z* s, S4 Y' r

' w2 J7 O7 b' c7 Z0 c1 z4 L# ^7 K可以看出,前两种模式起始就是简单的内存操作,而后面两种模式,则是在进行内存复制时,根据需要同时进行颜色格式转换或/和透明度混合。0 d# J* L7 e, X# {2 `, l. g
& R* F  ~/ ]5 d$ B* C
9 L: o! D* C: N! l; e' O6 E
DMA2D和HAL库
5 e" `2 x( y( [* L大多数情况下,使用HAL库可以简化代码编写,提高可移植性。但是在DMA2D的使用时则是个例外。因为HAL库存在的最大问题就是嵌套层数再加上各种安全检测过多效率不够高。在操作别的外设时,使用HAL库损失的效率并不会有多大的影响。但是对于DMA2D这种以计算和加速为目的的外设,考虑到相关的操作会在一个屏幕的绘制周期内被多次调用,此时再使用HAL库就会导致DAM2D的加速效率严重下降。
7 ~: C8 X! A) Z8 d
' x* a* M% G& p6 y% u; B
- Q! |% c, f$ u  T9 u
所以,我们大多时候都不会用HAL库中的相关函数来对DMA2D进行操作。为了效率,我们会直接操作寄存器,这样才能起到最大化的加速效果。
4 l+ P* j- y5 K0 E
+ b1 z. G; @7 @' T' T

0 h# R6 P+ ]$ u因为我们使用DMA2D的大多数场合都会频繁变更工作模式,所以CubeMX中对DMA2D的图形化配置也失去了意义。" c& c# n8 g. i0 P8 g( G

: [- P" r8 Y9 T9 [5 {
& g; Y6 d  b( e/ {0 d
DMA2D场景实例3 ]) y- j& H, X2 F9 _0 H
1. 颜色填充
1 P4 u- P) ~! p' G9 g下图是一个简单的柱状图:# [9 R3 X' A; |7 I" ~9 D; \

# H! E) |, _7 q- `4 i
- g. I' S4 @3 ]2 _4 B
1625626641(1).png
9 d( m. R1 v3 K4 Z
9 _3 t; k4 p6 r2 l- L
$ c: `! p2 P3 w, Z5 h
我们来思考一下如何把它绘制出来。
2 U; O$ s; W# q; j0 u! m" E7 T  s, ?6 y
' L5 s$ r- m2 q0 {4 M
- _& v8 |, D4 D( a  ]; L9 D5 X
首先,我们需要使用白色来填充屏幕,作为图案的背景。这个过程是不能忽略的,否则屏幕上原来显示的图案会对我们的主体产生干扰。然后,柱状图其实是由4个蓝色的矩形方块和一条线段构成的,而线段也可以视作一个特殊的,高度为1的矩形。所以,这个图形的绘制可以分解为一系列“矩形填充”操作:
8 U8 A+ i( \( Z+ {+ t" B* y8 `5 r( J$ l" b' V6 b. p
# A" J& r( z; C% x; H2 `
  • 使用白色填充一个大小等于屏幕大小的的矩形
  • 使用蓝色填充四个数据条
  • 使用黑色填充一根高度为1的线段0 v' {( T6 Q/ A0 H7 p
  f. ~2 y- ?# e* W9 W; ]& i
9 [$ n& v7 z+ r0 M; Z: u5 O: C: ^  I; p

5 m+ ^2 F3 \! |3 K3 r在画布中实现任意位置绘制任意大小的矩形的本质就是将内存区域中对应像素位置的数据设定为指定的颜色。但是因为framebuffer在内存中的存储是线性的,所以除非矩形的宽度正好和显示区域的宽度重合,否看似连续的矩形的区域在内存中的地址是不连续的。  q/ O( n  G0 h6 y
$ s: E/ T* _$ l3 n6 H9 p

; f0 s0 a. l% h+ ^2 m  W下图展示了典型的内存分布情况,其中的数字表示了frame buffer中每个像素的内存地址(相对首地址的偏移,这里忽略掉了一个像素占多个字节的情况),蓝色区域是我们要填充的矩形。可以看出矩形区域的内存地址是不连续的。
2 @. q0 z9 B7 u# y8 v5 P0 `8 c. J2 J$ O$ d* C. ]5 V: q3 w6 L
& v( L/ c- Z$ h6 k! ?
1625626666(1).png 8 r( b5 I3 H* k5 x3 Y1 W, m1 @9 s
framebuffer的这种特性使得我们不能简单使用memset这类高效的操作来实现矩形区域的填充。通常情况下,我们会使用以下方式的双重循环来填充任意矩形,其中xs和ys是矩形左上角在屏幕上的坐标,width和height表示矩形的宽和高,color表示需要填充的颜色:
( G1 x; @6 [9 B# T5 W7 W/ a  w& l( C6 B- \2 m2 s

: C6 ?8 q6 a4 {+ \* u- A
  1. <font face="微软雅黑" size="3">1for(int y = ys; y < ys + height; y++){
    " a9 a% I$ P" e7 ^* e
  2. 4 U2 B' |5 P$ R. C% H7 S& s
  3. 2    for(int x = xs; x < xs + width; x++){! t6 h" i! T! ?, ~  g

  4. & E% f& A7 ~8 ~( ?0 x
  5. 3        framebuffer[y][x] = color;        * Y- |7 f0 E& Y- j; z

  6. % p0 a* R  l+ L" \0 m# \
  7. 4    }! `  K; V! L% Z, t/ l% s. i

  8. ( l# |1 |1 f) P. ^3 k& C* Z/ v$ i/ s
  9. 5}</font>
复制代码
4 L' B  s; P; r5 S) {( n+ C) q
$ L, @5 L. @% P/ q- A$ T
代码虽然简单,但实际执行时,大量的CPU周期浪费在了判断、寻址、自增等的操作,实际写内存的时间占比很少。这样一来,效率就会下降。  C6 V+ F9 l: P. F- Y: A% M* O
2 ~# y: f* }3 H6 d

6 T1 L: G; ?1 X, x# {+ w. i( U这时候DMA2D的寄存器到存储器工作模式就可以发挥用场了,DAM2D可以以极高的速度填充矩形的内存区域,即使这些区域在内存中实际是不连续的。$ l3 K8 C( T7 U! [
: I. }" M3 H9 J! J
3 x0 L. n0 b; x9 y6 ]  w2 h. c' w
依然以这张图中演示的情况为例,我们来看它是如何实现的:4 j. {/ {9 }2 z+ p
) H, w7 ^1 c& J- n. e0 W

: O" }8 I- y  u7 ?2 O$ d% Y 1625626688(1).png
6 H. [3 ~5 M) S* f# P/ c; Y3 P$ R5 N4 S7 ^# O9 K
9 ]& W# X7 H# Q( ?) ~* m; ?, y# J
首先,因为我们只是进行内存填充,而不需要进行内存拷贝,所以我们要让DAM2D工作在寄存器到存储器模式。这通过设置DMA2D的CR寄存器的[17:16]位为11来实现,代码如下:
# e6 k& m4 V& d8 F3 N; S
  1. <font face="微软雅黑" size="3">1DMA2D->CR = 0x00030000UL;</font>
复制代码
然后,我们要告诉DAM2D要填充的矩形的属性,比如区域的起始地址在哪里,矩形的宽度有多少像素,矩形的高度有多少。
. P  @. Z2 Q6 a" V
  ]- A$ }- ~; }: R

. I& [( W4 o, @" K- m% D区域起始地址是矩形区域左上角第一个像素的内存地址(图中红色像素的地址),这个地址由DAM2D的OMAR寄存器管理。而矩形的宽度和高度都是以像素为单位的,分别由NLR寄存器的高16位(宽度)和低16位(高度)来进行管理,具体的代码如下:; ]6 b) ]8 {6 o( w, h
, K  d" G" ?6 h  I4 g6 Q' V
; d6 h6 `$ T( o, r; l
  1. <font face="微软雅黑" size="3">1DMA2D->OMAR = (uint32_t)(&framebuffer[y][x]); // 设置填充区域的起始像素内存地址
    $ x8 a* T2 @- i3 n  |
  2. # [- X0 o' D- ]/ X: C
  3. 2DMA2D->NLR  = (uint32_t)(width << 16) | (uint16_t)height; // 设置矩形区域的宽高
    + b+ C3 r0 L* Y5 G/ V0 B

  4. ' d" G. D* C' G7 _1 _; R
  5. </font>
复制代码

( V6 j! O5 Z' \5 z. d1 I, D

# j8 G: s! f% ?: l接着,因为矩形在内存中的地址不连续,所以我们要告诉DMA2D在填充完一行的数据后,需要跳过多少个像素(即图中黄色区域的长度)。这个值由OOR寄存器管理。计算跳过的像素数量有一个简单的方法,即显示区域的宽度减去矩形的宽度即可。具体实现代码如下:& n( G* q7 d, K9 z; Z) \' F" s: q
  1. <font face="微软雅黑" size="3">1DMA2D->OOR = screenWidthPx - width; // 设置行偏移,即跳过的像素</font>
复制代码

. c- H( a% j( ~8 P3 e  B  ?
0 s& Y, T$ E7 t7 R6 x
最后,我们需要告知DAM2D,你将使用什么颜色来进行填充,颜色的格式是什么。这分别由OCOLR和OPFCCR寄存器来管理,其中颜色格式由LTDC_PIXEL_FORMAT_XXX宏来定义,具体代码如下:
" ^! e7 l6 M4 E0 N7 M4 i" T+ @$ t) f; n* R- g# F7 e
7 c" f; t1 K! q! K+ C0 |
  1. <font face="微软雅黑" size="3">1DMA2D->OCOLR   = color; // 设置填充使用的颜色: Z7 D: }0 }  f) \6 M3 O

  2. . R' B" U3 i4 h; H
  3. 2DMA2D->OPFCCR  = pixelFormat; // 设置颜色格式,比如想设置成RGB565,就可以使用宏LTDC_PIXEL_FORMAT_RGB565</font>
复制代码
9 p0 H" \' K+ r1 W- {- V
- m$ k1 I1 `3 `4 E# j4 L
8 g( ]+ k+ [1 J7 S. N

' @9 i6 Y* u5 b, V一切都设置完毕,DMA2D已经获取到了填充这个矩形所需要的全部信息,接下来,我们要开启DMA2D的传输,这通过将DMA2D的CR寄存器的第0位设置为1来实现:; F; m+ }% D) O! O3 l$ S
9 h# ]. V) b3 w6 V2 n3 I! J* T

/ t* c( K- o% I3 O4 N
  1. <font face="微软雅黑" size="3">1DMA2D->CR |= DMA2D_CR_START; // 开启DMA2D的数据传输,DMA2D_CR_START是一个宏,其值为0x01</font>
复制代码

5 ~  C4 ]- w$ p9 V$ Y9 M- B  W  C
# {9 G- {7 ~) ~' z

, Q- W* Q! f4 u5 W$ a
, u1 \" j3 @# D5 C2 z4 S* |
等DMA2D传输开始后,我们只需要等待它传输完毕即可。DAM2D传输完成后,会自动把CR寄存器的第0位设置为0,所以我们可以通过以下代码来等待DAM2D传输完成:6 e* }/ s% s: s" Y  C0 R
+ [+ `: Q3 k1 _) u* k7 j5 a
. m5 ^0 Z2 x. ]" O; F
  1. <font face="微软雅黑" size="3">1while (DMA2D->CR & DMA2D_CR_START) {} // 等待DMA2D传输完成</font>
复制代码
tips0:如果你使用了OS,则可以使能DMA2D的传输完毕中断。然后我们可以创建一个信号量并且在开启传输后等待它,随后在DMA2D的传输完毕中断服务函数中释放该信号量。这样的话CPU就可以在DMA2D工作的时候去干点别的事儿而不是在此处傻等。2 g& M7 J# `* t& f% t% R  d& M' X0 X

& R2 T( Z+ u5 @$ u3 E

5 j1 Y5 \1 j1 b- s. u7 O; Ktips1:当然,由于实际执行时,DMA2D进行内存填充的速度实在是太快了,以至于OS切换任务的开销都比这个时间要长,所以即便使用了OS,我们还是会选择死等
7 q. K6 M3 Z2 l7 T$ ~: {4 w/ s/ _% f# H; L( Q, }! ~4 y' M( B8 b* Q
3 g$ p3 h) y+ y; L0 ?
为了函数的通用性考虑,起始传输地址和行偏移都在函数外计算完毕后传入,我们抽出的完整的函数代码如下:
' z# m* ^6 y% o2 Z- g: S
  1. <font face="微软雅黑" size="3">1static inline void DMA2D_Fill( void * pDst, uint32_t width, uint32_t height, uint32_t lineOff, uint32_t pixelFormat,  uint32_t color) {# j7 B- p! G! A) I; g
  2. 2) n  R! s) Q4 ], Z7 D
  3. 3    /* DMA2D配置 */  ) _7 V& E* A: v" l5 a/ L) F' j
  4. 4    DMA2D->CR      = 0x00030000UL;                                  // 配置为寄存器到储存器模式
    , t8 V& o$ @7 z; t  o. v
  5. 5    DMA2D->OCOLR   = color;                                         // 设置填充使用的颜色,格式应该与设置的颜色格式相同
    - x, [  D) {' m, {$ O& e0 h+ _
  6. 6    DMA2D->OMAR    = (uint32_t)pDst;                                // 填充区域的起始内存地址  d* u. X7 s- {& U+ D6 g% H* \0 U
  7. 7    DMA2D->OOR     = lineOff;                                       // 行偏移,即跳过的像素,注意是以像素为单位
    ! o  D; F/ v" r( n
  8. 8    DMA2D->OPFCCR  = pixelFormat;                                   // 设置颜色格式
    3 a0 G+ U9 M& J  a. t
  9. 9    DMA2D->NLR     = (uint32_t)(width << 16) | (uint16_t)height;    // 设置填充区域的宽和高,单位是像素1 V, O4 d! u4 F2 r
  10. 10
    ! r4 Q1 U5 g: \/ t8 g9 s
  11. 11    /* 启动传输 */: y% _7 k3 b4 q* Q; D
  12. 12    DMA2D->CR   |= DMA2D_CR_START;   2 x8 W" j6 E! t5 x4 l) z
  13. 13
    5 e& \1 F8 p9 t4 X6 e
  14. 14    /* 等待DMA2D传输完成 */
    - J1 g' L- j. y  s' U, w
  15. 15    while (DMA2D->CR & DMA2D_CR_START) {} 1 o2 U5 A# p* I8 j
  16. 16}</font>
复制代码
为了方便编写代码,我们再包装一个针对所使用屏幕坐标系的矩形填充函数:
" J7 T' h9 ], M0 X6 R2 n& r/ ?+ m! z: g& x) t! ^& T6 c

' f0 L* T1 u$ q, H3 q& k
  1. <font face="微软雅黑" size="3">1void FillRect(uint16_t x, uint16_t y, uint16_t w, uint16_t h, uint16_t color){
    / e) V# h/ M; q7 E
  2. " s. p/ [0 w& e( N0 F: Z
  3. 2    void* pDist = &(((uint16_t*)framebuffer)[y*320 + x]);# C4 c. Z0 Q+ [1 G8 q0 v
  4. ) r5 G  Y& j* x
  5. 3    DMA2D_Fill(pDist, w, h, 320 - w, LTDC_PIXEL_FORMAT_RGB565, color);
    6 c) W  y; q! q8 i- y" r

  6. 0 N( v  O7 {6 S$ h
  7. 4}
    & i$ d7 @1 D. j5 e/ I

  8. 5 b: {2 i9 J9 q! o2 s
  9. </font>
复制代码

6 t1 u# I, b* x8 i, Y% h/ e最后我们尝试用代码把本小节刚开始的示例图表画出来:' |9 m5 p! o- T

: k2 u5 S3 J9 s+ K! y: i# X* b7 O# ^

! ~( f( e0 q$ i$ \5 I5 q/ D
  1. <font face="微软雅黑" size="3">1  // 填充背景色
      X7 G" A' a2 `9 k
  2. 1 B) i  a' h, V
  3. 2  FillRect(0,   0,   320, 240,  0xFFFF);! P4 ?. S+ B/ M
  4. 6 R, W0 T( {( h3 N1 S( [" E
  5. 3  // 绘制数据条
      d& }. I: g; a

  6. ; L) b# {. u' V
  7. 4  FillRect(80,  80,  20,  120,  0x001f);% F  N9 i5 g' ?( R+ g6 }6 G

  8.   w( |( |) \" L; d
  9. 5  FillRect(120, 100, 20,  100,  0x001f);
    * ?+ G9 s1 m7 [+ W  G; Z( d2 z$ [

  10.   {! K* V* ~- y+ _4 Q, x. f, m
  11. 6  FillRect(160, 40,  20,  160,  0x001f);
    $ @, V6 r" s% u2 H
  12. & M- v: b5 N3 K: T
  13. 7  FillRect(200, 60,  20,  140,  0x001f);
    $ A, m: s, P2 P" m9 B' L

  14. 4 \' b! z. }0 }, \& J
  15. 8  // 绘制X轴
    0 v3 u/ W) n- o

  16. 5 M% f  w9 P! O# _3 B6 Y
  17. 9  FillRect(40,  200, 240, 1,    0x0000);
    2 S, N- {3 A& [/ A, S5 g  j6 v" B! B

  18. ; t* ~3 k5 i+ N' q
  19. </font>
复制代码

& |0 H% E, a: C  H/ f" z! O代码运行效果:/ ]9 I, ~" ]% x
1625626727(1).png $ N2 {# b' P1 F

/ J7 L4 I+ m& P3 y- A' ^
0 Z, \' A/ F' ?

" `2 C8 g! u" S* S1 C
1 U6 K9 d6 y& r5 K$ |
2.图片显示(内存复制)
+ g2 R' t- K& T, ^- g; t5 O假设我们现在要开发一个游戏,然后想在屏幕上显示一团跳动的火焰。一般是由美工先把火焰的每一帧都画出来,然后放到同一张图片素材里面,如下图所示:
* ~3 N  t: H7 ?( C8 | 1625626755(1).png & g# c# \9 e( G! ]4 e0 x5 D
5 f+ A9 X( d. U
) y3 l) B1 w4 R' Q9 O
然后我们以一定的间隔轮流显示每一帧图像,就可以在屏幕上实现“跳动的火焰”这个效果了。% l  k: }* [0 j& D. S5 f

% C$ n* G* D3 i  b0 e$ ?0 U( @* |

% |# g' ^; b& j- \8 j我们现在略过素材文件加载到内存的过程,假设这张素材图片已经在内存中了。然后我们来考虑如何将其中的一帧图片显示到屏幕上。通常情况下,我们会这样实现:先计算得出每一帧的数据在内存中的地址,然后将这一帧图片的数据复制到framebuffer中相应的位置即可。代码类似于这样:4 O9 O- H! G& m3 T. t0 f: {+ z2 H
  1. <font face="微软雅黑" size="3">1/**
    0 V) k6 O5 }$ _$ Z& o1 ^
  2. 2 * 将素材中的一帧画面复制到framebuffer中的对应位置
    ) g. V; m4 h* G) @- C
  3. 3 * index为画面在帧序列中的索引
    / v0 F9 F9 G- U6 H
  4. 4 */
    8 E4 m6 y. M( d: d1 @+ U/ S
  5. 5static void General_DisplayFrameAt(uint16_t index) {% _; r( |: H7 U+ c' l8 J4 T
  6. 6    // 宏说明
    ! n* T+ e; S1 ^0 F0 z3 w
  7. 7    // #define FRAME_COUNTS     25  // 帧数量% j$ n9 h0 C# @
  8. 8    // #define TILE_WIDTH_PIXEL 96  // 每一帧画面的宽度(等于高度)& b9 d$ \2 v- I# [
  9. 9    // #define TILE_COUNT_ROW   5   // 素材中每一行有多少帧
    6 l4 C1 P+ ?, ^, m8 m
  10. 10" [) A1 W! O) I4 I. y
  11. 11    // 计算帧起始地址4 j* R- E& r* Q! ]. ?# ~
  12. 12    uint16_t *pStart = (uint16_t *) img_fireSequenceFrame;
    * ^. t6 R) \9 Z" \$ {2 J. |
  13. 13    pStart += (index / TILE_COUNT_ROW) * (TILE_WIDTH_PIXEL * TILE_WIDTH_PIXEL * TILE_COUNT_ROW);6 Z  F! j5 N. @, v" w
  14. 14    pStart += (index % TILE_COUNT_ROW) * TILE_WIDTH_PIXEL;
    ( ~& `+ ?% x7 Y& [3 X: u
  15. 15# y, V4 o8 I2 y! Q" k
  16. 16    // 计算素材地址偏移
      g6 s( Q. m6 E$ J9 g$ f# A
  17. 17    uint32_t offlineSrc = (TILE_COUNT_ROW - 1) * TILE_WIDTH_PIXEL;
    3 Z4 _8 s  x( V1 A( {2 M$ m
  18. 18    // 计算framebuffer地址偏移(320是屏幕宽度)* s7 b, @7 h6 n  i! Y, w8 I
  19. 19    uint32_t offlineDist = 320 - TILE_WIDTH_PIXEL;! t8 X& o& n- X& \
  20. 207 v2 i8 l5 s, E8 N& W1 Y4 O8 F
  21. 21    // 将数据复制到framebuffer
    / E+ a  A9 M' Z# O# b- j3 G" O
  22. 22    uint16_t* pFb = (uint16_t*) framebuffer;
    ; a" S6 }) [- k6 K
  23. 23    for (int y = 0; y < TILE_WIDTH_PIXEL; y++) {$ F7 K% [% _8 E3 Y
  24. 24        memcpy(pFb, pStart, TILE_WIDTH_PIXEL * sizeof(uint16_t));! J! k6 P2 |5 U: j
  25. 25        pStart += offlineSrc + TILE_WIDTH_PIXEL;! a' A5 i! E# l
  26. 26        pFb += offlineDist + TILE_WIDTH_PIXEL;4 J0 A& X" }  R" K0 N  G# U* ^
  27. 27    }
    6 Z7 R, w& U; X$ ?+ y
  28. 28}</font>
复制代码
可见要实现这个效果需要大量的内存复制操作。在嵌入式系统中,需要大量数据复制的时候,硬件DMA的效率是最高的。但是硬件DMA只能搬运地址连续的数据,而这里,需要复制的数据在源图片和frambuffer中的地址都是不连续的,这引来了额外的开销(与第一小节中出现的问题相同),也导致我们无法使用硬件DMA来进行高效的数据复制。+ H! Z! E, D" m! }, `. [

5 ?& p9 \# T6 U# K/ T: j

5 Z1 F3 j( Q, ^4 e- M所以,虽然我们实现了目标,但是效率不高(或者说没有达到最高)。$ P1 X: Y+ Y! Z% F- w7 u" r+ S
6 [; y1 m% u' ?1 R  i' P/ e
. r! ^0 n/ Y- t% `$ v# g" c
为了以最快的速度把素材图片中的某一块数据搬运到帧缓冲中,我们来看如何使用DMA2D来实现。
  `, l% j7 m/ _7 Q2 U, t5 A4 I# D0 X
, b4 @. [6 b9 R1 q# B  _8 Q5 h
首先,因为这次是要在存储器中进行数据复制,所以我们要把DMA2D的工作模式设定为“存储器到存储器模式”,这通过设置DMA2D的CR寄存器的[17:16]位为00来实现,代码如下:
5 T7 Q9 [# [- G0 u' C0 |2 K7 @  B8 a9 _% J3 E# |, O6 c
" O- r' R& L7 q: E3 c! |% v
  1. <font face="微软雅黑" size="3">1DMA2D->CR      = 0x00000000UL;</font>
复制代码
% c" ]( {" o/ P- }2 a$ L# ^

4 S. U' P# ~4 R$ _+ D5 w* U1 L  I然后我们要分别设置源和目标的内存地址,与第一节中不同,因为数据源也存在内存偏移,所以我们要同时设定源和目标位置的数据偏移
+ z, i$ y; B) ]6 ^4 Z$ F
  1. <font face="微软雅黑" size="3">. @* Q3 n+ s! M6 j; B9 {
  2. 1DMA2D->FGMAR   = (uint32_t)pSrc; // 源地址
    " l. O  \2 O# [/ m% I( b1 |9 z

  3. 3 i/ [) k7 s- I/ n4 z6 _+ P
  4. 2DMA2D->OMAR    = (uint32_t)pDst; // 目标地址' n, K8 ^0 O7 M2 D* a' Z7 L
  5. * m0 W% r; G' R! }  @! m$ u
  6. 3DMA2D->FGOR    = OffLineSrc;     // 源数据偏移(像素)1 o) X1 {  z7 q, G; j2 m! f

  7. $ a) w- X, H4 @3 Y) p6 g
  8. 4DMA2D->OOR     = OffLineDst;     // 目标地址偏移(像素)
    * P2 _, E9 B5 @* y' V( V
  9. </font>
复制代码

+ u" h$ C  r* I0 h0 C$ _" |然后依然是设置要复制的图像的宽和高,以及颜色格式,这点与第一小节中的相同
' p, t2 A4 C+ H/ W8 w: C1 c: ?/ A) r' U8 z( W" b0 X/ t7 B0 j
8 L  U5 J% z, T7 ~; ?0 y6 g
  1. <font face="微软雅黑" size="3">1DMA2D->FGPFCCR = pixelFormat;1 _  F% W) S9 @6 M  M

  2. 7 P9 @3 K+ m' r
  3. 2DMA2D->NLR     = (uint32_t)(xSize << 16) | (uint16_t)ySize;</font>
复制代码

+ w0 _8 Q1 d/ C( J" P7 v) K同样的方式,我们开启DMA2D的传输,并等待传输完成:, r0 y1 @. D8 |+ w% k7 r
  1. <font face="微软雅黑" size="3">1/* 启动传输 */! `+ p9 B8 ^4 M4 P- h

  2. 9 `4 ]& Z6 q0 j4 f0 A7 W
  3. 2DMA2D->CR   |= DMA2D_CR_START;
    3 y( Q) W1 k- I! M6 |2 j3 Y2 C) _/ g

  4. 1 `; \; r6 R) Z
  5. 32 I& J$ U. _$ c
  6. ' S1 H) h. F% S6 ]3 Q: C
  7. 4/* 等待DMA2D传输完成 */
      `7 A8 A& i6 f; H( \& ^# S
  8. . v7 N. N" x( P5 I2 t
  9. 5while (DMA2D->CR & DMA2D_CR_START) {}
    , \% q: [  I. a) u
  10. </font>
复制代码

# Z* ^: X4 _: q% n9 q8 }最终我们抽出的函数如下:1 w  G8 L- W" h* V: u. T  W

) ~  o( a% W! ^. H: Z& Z9 U" X; c
6 r  ~$ U  J3 z1 \% v7 R  {  O
  1. <font face="微软雅黑" size="3"> 1static void DMA2D_MemCopy(uint32_t pixelFormat, void * pSrc, void * pDst, int xSize, int ySize, int OffLineSrc, int OffLineDst)% F& d0 P1 x1 _* O
  2. & K& t$ ~3 d& D7 G, p
  3. 2{1 C% u; f6 s1 H! b; Y2 s& v+ F
  4. 0 F2 }* ^. P* H% U9 o$ O0 E" w" n2 Z5 D
  5. 3    /* DMA2D配置 */3 d6 V2 c2 i& e" T$ i

  6. 6 y7 \+ ~0 @' E( Y6 u) ?' t) n
  7. 4    DMA2D->CR      = 0x00000000UL;
    8 u: D. K& Z9 e% [& S) R
  8. - u: h, D3 `4 i! o
  9. 5    DMA2D->FGMAR   = (uint32_t)pSrc;# c; n+ X# K3 H1 E: Z/ H
  10.   e9 }. }6 X; W& y9 c' \4 c2 [" v
  11. 6    DMA2D->OMAR    = (uint32_t)pDst;
    ; T6 x, I( I/ c& M8 x: ]# |

  12. % ]0 W4 M+ u* Q* G
  13. 7    DMA2D->FGOR    = OffLineSrc;  S2 c$ T, z5 O- g! e4 q
  14.   K# x; t' b) }% \
  15. 8    DMA2D->OOR     = OffLineDst;% f: C3 K, B/ a6 t" g: M8 P* N
  16. 6 e7 \/ B* F# O) q( `, b1 Y& x& P* M
  17. 9    DMA2D->FGPFCCR = pixelFormat;
    ( E- I2 V/ ~9 d: C: j/ W
  18. " t1 g7 `, {- f
  19. 10    DMA2D->NLR     = (uint32_t)(xSize << 16) | (uint16_t)ySize;5 Q- n' Z# V- X4 \1 l. D3 X6 q

  20. 4 ]2 @! U0 K) t3 v/ U
  21. 11
    . n$ t7 T  o, g1 Q# U9 d2 G- l

  22. ' [6 s+ i! P' ?
  23. 12    /* 启动传输 */% [: q8 ]9 h8 g3 ~! Y
  24. ! o" E2 ^1 {' g; Z
  25. 13    DMA2D->CR   |= DMA2D_CR_START;. Z7 v! H" p: a" K
  26. $ N/ l) J% c: b$ o% b
  27. 14
    0 x( C" p" y" {. |/ S1 x& j
  28. ( \5 U2 V2 x1 _( i0 }2 d1 r
  29. 15    /* 等待DMA2D传输完成 */
    ! Z, n9 L' w0 J+ F

  30. " h& X+ D) v1 B2 G$ |. j
  31. 16    while (DMA2D->CR & DMA2D_CR_START) {}5 K" g, O0 m# @; U/ o  M7 f, }! G
  32. / O- ~: T! k* j4 P; U, R
  33. 17}
    / E# g1 @! ]6 P" S! w" Y
  34. 8 z5 B' D8 h; `! P
  35. </font>
复制代码

' v6 d5 J' C, K# N) D
' e! u+ D9 z  I; Y; Z
为了方便,我们包装一个调用它的函数:* F, ?# h/ P' |; g
6 a6 n" x: q7 b- J1 l6 H* ?
  1. <font face="微软雅黑" size="3">1static void DMA2D_DisplayFrameAt(uint16_t index){% C+ t0 V5 G2 u/ b
  2. 5 M! c& \2 Z; `3 t
  3. 2
      M4 r1 u9 I" H% X& X
  4. ; s7 J6 h( t$ `  v' F
  5. 3    uint16_t *pStart = (uint16_t *)img_fireSequenceFrame;
    # D$ K8 {( [3 }

  6. ' J2 A' b% R' n4 D" H
  7. 4    pStart += (index / TILE_COUNT_ROW) * (TILE_WIDTH_PIXEL * TILE_WIDTH_PIXEL * TILE_COUNT_ROW);
    8 j! M+ O% h& {7 S

  8. ' ^; H3 F8 s* u* y  [
  9. 5    pStart += (index % TILE_COUNT_ROW) * TILE_WIDTH_PIXEL;* \! F0 V: k, {$ m5 [7 d$ [
  10. / M7 E$ E8 ~9 s: J
  11. 6    uint32_t offlineSrc = (TILE_COUNT_ROW - 1) * TILE_WIDTH_PIXEL;
    4 g# H* B- X7 B" f+ D
  12. 2 C0 _+ [9 J& ?2 m" q8 Y
  13. 77 t# u4 z; o1 R$ r& [' C
  14. 1 E$ v' h" J! z$ R5 b
  15. 8
    . p& K  M1 s4 c
  16. + |1 m: J6 A5 b
  17. 9    DMA2D_MemCopy(LTDC_PIXEL_FORMAT_RGB565, (void*) pStart, pDist, TILE_WIDTH_PIXEL, TILE_WIDTH_PIXEL, offlineSrc, offlineDist);
    % E) ]% ?( x( d

  18. 9 Z% r( w; u9 n; x/ ^- H
  19. 10}</font>
复制代码

/ w; A4 k9 c3 H4 @/ B然后轮流播放每一帧图片,这里设置的帧间隔是50毫秒,并且将目标地址定义到了frambuffer的中央:+ C9 ]1 g1 o( e$ e# m

! e& m+ y6 X) L1 V( x; b6 D

  h& B* b1 J8 U) J$ H1 M
  1. <font face="微软雅黑" size="3">1while(1){
    5 t% X. `, g$ f: X/ n6 u' }
  2. & e) h2 U: |5 K' T* B( e5 C
  3. 2    for(int i = 0; i < FRAME_COUNTS; i++){
    " _7 D# E0 Q  S" B! w; h

  4. 1 N# K" b: A9 `; J, Q4 p6 }
  5. 3        DMA2D_DisplayFrameAt(i);3 O/ \, d3 T% o! s1 m# Z

  6. 0 L8 X) E. b2 g% C8 e; L
  7. 4        HAL_Delay(FRAME_TIME_INTERVAL);
    " @6 c8 n1 C3 q/ a4 Q
  8. 4 a$ n$ M. Z9 L( j- S3 n
  9. 5    }6 g# S6 M9 d6 v+ H# H1 m0 Y8 R
  10. , x' }. y1 w4 @2 H6 {
  11. 6}</font>
复制代码
% L( M2 o4 K% I4 w  n
1 a  P+ P6 E9 c
最终运行的效果:" m- b- S- v; a# y4 @( ]. z3 \
640.gif 2 M( N/ X4 k/ u8 f

# r8 M6 q6 ~8 ^3 |% R
; `1 g: L* Z4 T1 t. s+ T2 e
( @- l5 K; _" S# p$ u* V! g

6 E" A' @/ H" R: x0 h3 ?- P' ^8 {" j3.图片渐变切换
$ V# W/ E& C1 u& h& ?: {! p假设我们要开发一个看图应用,在两张图片进行切换时,直接进行切换会显得比较生硬,所以我们要加入切换时的动态效果,而渐变切换(淡入淡出)是一个很经常使用的,而且看起来还不错的效果。8 X) c( R$ e" w# q" s
' {; x$ ~, Z( q7 v: [4 |9 R

! c3 {& S' m& S$ P" {就用这两张图片好了:
/ s8 F7 t" a+ k. G* b0 c; |  Q5 f- [( i, m8 Z, F

/ S) I& _' A' R) i3 C2 l3 r- A 1625626823(1).png
  u; D$ X$ @% g3 ^) ^( M
& A2 K, R# T/ a8 V. E
; d; @; ?4 m" e9 h- J
这里我们需要先了解一下透明度混合(Alpha Blend)的基本概念。首先透明度混合需要有一个前景,一个背景。而混合的结果就相当于透过前景看背景时的效果。如果前景完全不透明,那么就完全看不到背景,反之如果前景完全透明,那么就只能看到背景。而如果前景是半透明的,则结果就是两者根据前景色的透明度按照一定的规则进行混合。
3 E" G- c! d' \' X8 }0 ~
9 @  x/ w7 D, a/ y! ^% r) `! n

. a$ F8 \8 `) P) c如果1表示完全透明,0表示不透明,则透明度的混合公式如下,其中A是背景色,B是前景色:) J* ?2 e9 y3 `: T
  1. <font face="微软雅黑" size="3">1X(C)=(1-alpha)*X(B) + alpha*X(A)</font>
复制代码
2 k8 o9 s+ A8 P; I

% Q. i) M3 o1 G1 t. Z; L1 H因为颜色有RGB三个通道,所以我们需要对三通道都进行计算,计算完成后在进行组合:: g) Y% U$ c* o) x+ m( C

- ~1 W7 s! E) d  `( ~/ G& h
0 F- S/ |; y5 T! c+ i4 Q8 o% l
  1. <font face="微软雅黑" size="3">1R(C)=(1-alpha)*R(B) + alpha*R(A)+ S4 T' P$ x2 W+ R4 k8 _
  2. 8 h3 f2 J- ?$ G2 _/ l5 @
  3. 2G(C)=(1-alpha)*G(B) + alpha*G(A)* r, E$ t( n. n6 x4 b. H

  4. + x1 K! u4 T: q1 m7 ]" o/ k
  5. 3B(C)=(1-alpha)*B(B) + alpha*B(A)</font>
复制代码

$ E) F* c! d' w; k& T. P8 H% b

+ b+ S" ?* L4 C! i% y而在程序中为了效率起见(CPU对于浮点的运算速度很慢),我们并不用0~1这个范围的值。通常情况下我们一般会使用一个8bit的数值来表示透明度,范围从0~255。需要注意的是,这个数值越大表示越不透明,也就是说255是完全不透明,而0表示完全透明(所以也叫不透明度),然后我们可以得到最终的公式:0 m! I+ F" g" Z. w/ k0 ?  J

0 }2 x5 h' e2 Y& j; w- h- I+ s
% c: g* X% K" t- x
  1. <font face="微软雅黑" size="3">1outColor = ((int) (fgColor * alpha) + (int) (bgColor) * (256 - alpha)) >> 8;</font>
复制代码
) o  v. C% @% I  M; s
( i8 h5 p3 \3 y4 `' C( L$ T# J* x
实现RGB565颜色格式像素的透明度混合代码:
$ b, h7 c( K3 I8 |2 o
" P7 g, W- O6 D/ r/ c% B

( ^% y' q- p! w6 B5 V8 y
8 W- A6 _. D# z" x" a
  1. <font face="微软雅黑" size="3">1typedef struct{! t8 r  \3 R. u  H7 X

  2. 2 a0 M+ z6 l4 p8 x+ D
  3. 2    uint16_t r:5;: r% J" `) A6 n; {* G7 A7 |. A
  4. 0 R8 ~- F8 p) @+ x' D
  5. 3    uint16_t g:6;
    7 U  Z% Y& ^# [9 O0 ?

  6. 8 ~. C- \* V' j% Q. ~, Z/ {
  7. 4    uint16_t b:5;
    / x. i4 o4 S5 d* @. |& F- ]! E
  8. 9 N2 f! l) l4 i/ E! l+ V. ]0 c
  9. 5}RGB565Struct;
    - l% w6 K* X6 x, k

  10. 0 g  K. v3 W4 w7 ~. p: B: G' U
  11. 6% q) ~  }, O6 y
  12. + s9 }8 n% k! v0 V( m) {4 }" H1 c- Q& q
  13. 7static inline uint16_t AlphaBlend_RGB565_8BPP(uint16_t fg, uint16_t bg, uint8_t alpha) {( v& R$ S8 y" D" y3 n! P3 z
  14. 0 ^; n& @) B% P3 g0 Q, S* j& p
  15. 8    RGB565Struct *fgColor = (RGB565Struct*) (&fg);' P: h3 V' U, M/ _0 `$ ^0 F8 ^' r

  16. + S8 n! f6 S( v- @) F" L
  17. 9    RGB565Struct *bgColor = (RGB565Struct*) (&bg);3 p4 s* v- _9 _$ s" l1 Q
  18. & m) n( |8 b- T! h
  19. 10    RGB565Struct outColor;
    2 C+ U' c% U* ^' K5 r

  20. & e7 Y' b: X$ Y  q
  21. 11
    % N# V+ s! y6 N/ }/ I; h
  22. + k( `- ~+ b2 f1 B, W: P# _! V, a
  23. 12    outColor.r = ((int) (fgColor->r * alpha) + (int) (bgColor->r) * (256 - alpha)) >> 8;
    . j5 e. P( ]: x' t1 \
  24. & G2 e; o5 ^5 k* k# m( l
  25. 13    outColor.g = ((int) (fgColor->g * alpha) + (int) (bgColor->g) * (256 - alpha)) >> 8;1 G9 Z* W% g, Z+ r; m/ f0 X

  26. ; e3 y* _5 c, j+ h* t. J) u
  27. 14    outColor.b = ((int) (fgColor->b * alpha) + (int) (bgColor->b) * (256 - alpha)) >> 8;) w' A1 Y/ y8 K: ^
  28. 4 G. J0 |6 T1 V6 u4 @
  29. 15
    $ B2 B! M( }' F* f

  30. ) ~( A1 h0 R) r, b' M
  31. 16' A4 W3 R4 e+ I$ N

  32. / |3 S# c8 w; E
  33. 17    return *((uint16_t*)&outColor);
    ; D- J# ~7 m- L' O/ u" M
  34. 6 O. s- ~# C: b9 m$ v! C
  35. 18}</font>
复制代码
+ C1 @  }4 G. R/ t3 j# Q
3 B: i9 V' Y& l' s
了解了透明度混合的概念,也实现了单个像素的透明度混合后,我们来看如何实现图片的渐变切换。
2 c1 l& C* T$ P& M1 K' U. p" {3 g
7 E% g2 c1 d# F3 ^, I- t$ ?& w

1 k8 k1 L8 v  }- D6 ^' z9 \假设整个渐变在30帧内完成,我们需要在内存中开辟一块儿大小等于图片的缓冲区。然后我们以第一张图片(当前显示的图片)为背景,第二张图片(接下来显示的图片)为前景,然后为前景设置一个透明度,对每个像素进行透明度混合,并且将混合结果暂存至缓冲区中。待混合结束后,将缓冲区中的数据复制到framebuffer中即完成了一帧的显示。接下来继续进行第二帧、第三帧……逐渐增大前景的不透明度,直到前景色的变为不透明,即完成了图片的渐变切换。
! A0 J4 ~: Q( T3 z! L0 B$ r! @
8 G1 |+ j. b* L9 ^: A( K

7 `: ]/ o  |* G9 j* X因为每一帧都需要对两张图片中的每一个像素都进行混合运算,这带了来巨大的运算量。交给CPU实现是很不明智的行为,所以我们还是把这些工作交给DMA2D来实现吧。
2 k: }2 S. C/ ~5 l6 l% y. _. P1 g: O) M6 a) `) ?& B: c! n
$ U9 d) ~/ A" b- g% Y  F6 X
这次用到了DMA2D的混合功能,所以我们要使能DAM2D的带颜色混合的存储器到存储器模式,对应CR寄存器[17:16]位的值为10,即:+ {" Q" f* ~) [% P

0 O0 K" l8 H/ E; ^7 L+ D/ T

! g' J3 v2 R$ z  i4 _- @' m9 P
  1. <font face="微软雅黑" size="3">1DMA2D->CR    = 0x00020000UL;                // 设置工作模式为存储器到存储器并带颜色混合
    - i. U" ]- c& J: }
  2. </font>
复制代码

, ]* t8 s% o; h; {

; o' p1 D! _# y( p0 f. |然后分别设置前景、背景和输出数据的内存地址和数据传输偏移、传输图像的宽和高:5 P8 `: a$ h; B, _2 c! g
3 {7 {$ j3 X6 S7 z" T* q5 m3 d
  \1 F* n3 @% I- [8 h0 z/ p# [
  1. <font face="微软雅黑" size="3">1DMA2D->FGMAR = (uint32_t)pFg;               // 设置前景数据内存地址8 V# f- @7 h$ M" t3 e  f9 C

  2. * i* _5 X9 \; L- `* q2 G- d" t
  3. 2DMA2D->BGMAR = (uint32_t)pBg;               // 设置背景数据内存地址' U6 l1 F+ ~2 X! y2 h7 Q, C

  4. 0 k3 P( q" C, N* y; d3 H& A
  5. 3DMA2D->OMAR  = (uint32_t)pDst;              // 设置数据输出内存地址$ L% l3 S3 `1 G* N$ W2 F
  6. ) B* S4 g) v. l5 N, L3 z! S& A
  7. 4
    6 @7 G: r7 _/ o: a
  8. 8 F6 R. f! P4 @/ Y* a9 L
  9. 5DMA2D->FGOR  = offlineFg;                   // 设置前景数据传输偏移
    $ M: K9 {+ R3 d; f; z! Z; t
  10. 6 V7 n9 q1 s; m0 |' n
  11. 6DMA2D->BGOR  = offlineBg;                   // 设置背景数据传输偏移
    - B2 K/ i% S7 K- J- W) O* C9 W& E
  12. 4 n' r: f. j9 [5 P( q7 L3 v
  13. 7DMA2D->OOR   = offlineDist;                 // 设置数据输出传输偏移
    * x& h2 a! J# \& ~6 y

  14. 9 C, e; C5 m9 [5 ?. v
  15. 8
    # x6 R6 O5 q1 i1 Z0 o9 k
  16. 7 ]( d) i) b& m; Y. H3 p9 H
  17. 9DMA2D->NLR = (uint32_t)(xSize << 16) | (uint16_t)ySize; // 设置图像数据宽高(像素)</font>
复制代码

8 d$ _! C, h  {' |设置颜色格式。这里设置前景色的颜色格式时需要注意,因为如果使用的是ARGB这样的颜色格式,那么我们进行透明度混合时,颜色数据中本身的alpha通道就会对混合结果产生影响,所以我们这里要设定在进行混合操作时,忽略前景色自身的alpha通道。并强制设定混合时的透明度。' H& F0 P' c) X9 F* N2 a. y7 ?2 _
! P0 T) j: e9 F. x6 ~. {1 k* i

8 T+ K( C- P, l, r! t- _: f输出颜色格式和背景颜色格式
9 s( u5 ~0 J1 U! |
  1. <font face="微软雅黑" size="3">1DMA2D->FGPFCCR = pixelFormat                // 设置前景色颜色格式
    ' L& |0 L; Y2 X
  2. - c4 D" Y2 m# X/ z: t& D
  3. 2        | (1UL << 16)                       // 忽略前景颜色数据中的Alpha通道
    7 O( {4 E8 W, h: A- I+ X+ q& L
  4. ; p" h. Z# t4 I
  5. 3        | ((uint32_t)opa << 24);            // 设置前景色不透明度% ]1 P5 N! O0 K

  6. 7 s6 [; U" \2 i+ X0 i" h; S
  7. 4( w/ m# r- p8 M+ }% h0 C

  8. $ R* I: V4 t3 n  Y
  9. 5DMA2D->BGPFCCR = pixelFormat;               // 设置背景颜色格式
    ( N5 k- o( s9 ^* \- Y9 s# g

  10. % J" O$ X8 \9 ^: V& W% @& m# d
  11. 6DMA2D->OPFCCR = pixelFormat;                // 设置输出颜色格式</font>
复制代码
tips0:有时我们会遇到一张带有透明通道的图片与背景叠加显示的情况,此时就不应该禁用颜色本身的alpha通道, r+ v: O) H, @7 y0 l* }8 i
# d! s4 K0 Q7 D/ K( j4 b
! H/ T5 v2 ?  {$ z/ W- w: \8 h/ {
tips1:这个模式下,我们不仅可以进行颜色混合,还可以同时转换颜色格式,可以根据需要设置前景和背景以及输出的颜色格式
7 q0 Q6 p; J- d: o! c. e- U' p1 P% b1 d. @; [! [* W5 L
3 l+ ]; J" z/ |7 [
最后,启动传输即可:
4 E' P6 `5 Z0 {9 `+ h3 p
  1. <font face="微软雅黑" size="3">1/* 启动传输 */
    1 R5 B1 D1 {* |4 f: Z* B0 f# T
  2. 2DMA2D->CR   |= DMA2D_CR_START;
    / g/ H4 I+ B4 t! {7 ^1 ^+ Z
  3. 3
    $ [. I) H5 W4 @" X( m2 P, T9 e
  4. 4/* 等待DMA2D传输完成 */, p% i! E- V+ v) F- l; [
  5. 5while (DMA2D->CR & DMA2D_CR_START) {}</font>
复制代码
完整代码如下:/ I7 r) C. q8 P% v) j
  1. <font face="微软雅黑" size="3">1void _DMA2D_MixColors(void* pFg, void* pBg, void* pDst,
    4 [2 q$ ]% t( H
  2. 2        uint32_t offlineFg, uint32_t offlineBg, uint32_t offlineDist,; C: ]. C* p9 K6 q( v( i+ ]
  3. 3        uint16_t xSize, uint16_t ySize,+ }1 H/ w/ n: s
  4. 4        uint32_t pixelFormat, uint8_t opa) {
    , B0 U6 H/ R+ p' c, B
  5. 5
    4 ^# B3 e) A8 g
  6. 6    DMA2D->CR    = 0x00020000UL;                // 设置工作模式为存储器到存储器并带颜色混合) j8 {* c! E. \/ [1 i' l& k& D. D
  7. 7% E6 |! h  e: g$ L+ s
  8. 8    DMA2D->FGMAR = (uint32_t)pFg;               // 设置前景数据内存地址
    ! u# `8 a7 [$ X
  9. 9    DMA2D->BGMAR = (uint32_t)pBg;               // 设置背景数据内存地址
    1 G4 t: p5 D; N
  10. 10    DMA2D->OMAR  = (uint32_t)pDst;              // 设置数据输出内存地址5 ]+ M/ y  b+ d
  11. 11% L) x1 L/ w  `+ D
  12. 12    DMA2D->FGOR  = offlineFg;                   // 设置前景数据传输偏移
      v# G) O& Z8 G  q
  13. 13    DMA2D->BGOR  = offlineBg;                   // 设置背景数据传输偏移7 ^7 C5 M& d2 E4 Z; u( _8 h' j
  14. 14    DMA2D->OOR   = offlineDist;                 // 设置数据输出传输偏移
    ! C# k. e2 ?9 k* `/ [9 l
  15. 15
    ' p. l% F  {( K# B) e
  16. 16    DMA2D->NLR = (uint32_t)(xSize << 16) | (uint16_t)ySize; // 设置图像数据宽高(像素)
    3 y- r/ B. n$ Q9 a' {
  17. 17
    - N" u* j' H( |/ ~$ h
  18. 18    DMA2D->FGPFCCR = pixelFormat                // 设置前景色颜色格式0 S! X3 s* ^9 N$ D
  19. 19            | (1UL << 16)                       // 忽略前景颜色数据中的Alpha通道3 h- _. _! H% M$ H* R; g
  20. 20            | ((uint32_t)opa << 24);            // 设置前景色不透明度
    ) Y3 X7 [7 ?, H! T: o* |
  21. 21
    4 l4 z4 Y6 j' q
  22. 22    DMA2D->BGPFCCR = pixelFormat;               // 设置背景颜色格式
    $ b9 t3 t$ c. `. x, H" q
  23. 23    DMA2D->OPFCCR  = pixelFormat;                // 设置输出颜色格式
    9 c; Y  f8 c1 P, O# g0 N/ n
  24. 24" w0 j, Y. G5 f2 F$ S) D
  25. 25    /* 启动传输 */+ E: Q8 u1 O- J: E, e- C8 L3 Z
  26. 26    DMA2D->CR   |= DMA2D_CR_START;
    ( s+ B2 C2 W- P. r- ^$ [$ H7 C0 P/ B
  27. 27
    4 s$ B! P! ?7 T% t  X" N
  28. 28    /* 等待DMA2D传输完成 */
    , z! N* J+ Z; u2 B
  29. 29    while (DMA2D->CR & DMA2D_CR_START) {}5 B5 P: d; Z1 T
  30. 30}</font>
复制代码
编写测试代码,这次不需要二次包装函数了:6 m/ q2 a. d7 _- j
  1. <font face="微软雅黑" size="3">1void DMA2D_AlphaBlendDemo(){
    , G( f. T; X4 O) E) p+ k) m/ d
  2. 2
    7 B, s. R4 ?& z8 N8 P- A
  3. 3    const uint16_t lcdXSize = 320, lcdYSize = 240;
    3 j0 a' }7 e! e( v7 W
  4. 4    const uint8_t cnvFrames = 60; // 60帧完成切换# u% f+ l. }7 M
  5. 5    const uint32_t interval = 33; // 每秒30帧
    $ Y- g$ @  m9 M# t" Q. r
  6. 6    uint32_t time = 0;
    . U- ~- V- k8 Q$ N7 v* G
  7. 7
    2 O# u, p, a4 ^: _% A
  8. 8    // 计算输出位置的内存地址9 X1 q0 l/ J3 e4 |; H
  9. 9    uint16_t distX = (lcdXSize - DEMO_IMG_WIDTH) / 2;
    : t  a# x3 p( \) C; ]: I
  10. 10    uint16_t distY = (lcdYSize - DEMO_IMG_HEIGHT) / 2;
    ) G* g5 T) y6 @. `7 }1 u
  11. 11    uint16_t* pFb = (uint16_t*) framebuffer;
    4 A, I0 u  O3 @" S5 X
  12. 12    uint16_t* pDist = pFb + distX + distY * lcdYSize;! D$ {$ C8 r- F  [
  13. 13    uint16_t offlineDist = lcdXSize - DEMO_IMG_WIDTH;" U) B: Q. ]# i! H5 l7 b( `
  14. 14$ y7 k9 }* }& x8 m, o
  15. 15    uint8_t nextImg = 1;6 s! r3 l8 [0 D# F8 J; R4 ~
  16. 16    uint16_t opa = 0;8 s. r; g, z" y  I6 j6 N3 u
  17. 17    void* pFg = 0;4 o; o, f7 e. T/ x$ C
  18. 18    void* pBg = 0;1 J4 o8 b0 F) E* f% p
  19. 19    while(1){; F; B8 F) Z. v& l
  20. 20        // 切换前景/背景图片" d# N! M6 I) w4 N4 [: B% d
  21. 21        if(nextImg){
    7 U6 V! X0 \/ `
  22. 22            pFg = (void*)img_cat;, y# \" `- V  L9 V( p
  23. 23            pBg = (void*)img_fox;
    / S0 A3 T& L7 c1 X" G1 C
  24. 24        }
    $ U, _- z3 A' M
  25. 25        else{, K0 ^. I! Z  N. s$ @% V( D  D( k
  26. 26            pFg = (void*)img_fox;
    ) E, t; C0 {' z# |. y- g2 ]! W- z
  27. 27            pBg = (void*)img_cat;
    ( R8 x1 D4 ?0 B2 d( M
  28. 28        }3 W" B4 ^  c0 j0 b5 ]0 P
  29. 29
    $ d6 `5 F) ?7 E2 |
  30. 30        // 完成切换3 B& E2 q% i) @& m5 `
  31. 31        for(int i = 0; i < cnvFrames; i++){
    1 p2 ], ^) M7 u- _: ?
  32. 32            time = HAL_GetTick();8 A) n0 E# r; \$ n. H2 `; s9 v  _  \
  33. 33            opa = 255 * i / (cnvFrames-1);
    9 }* X: i7 m( j5 b+ J- r6 N
  34. 34            _DMA2D_MixColors(pFg, pBg, pDist,) ~( G1 s7 s8 K6 ?+ E' x6 A
  35. 35                    0,0,offlineDist,# U0 T7 Z9 L: t0 S  [
  36. 36                    DEMO_IMG_WIDTH, DEMO_IMG_HEIGHT,
    + h" A& R, h) z6 q0 `- l9 ~. F% \
  37. 37                    LTDC_PIXEL_FORMAT_RGB565, opa);4 |! R* E' E' V' V$ T7 L
  38. 38            time = HAL_GetTick() - time;( h3 K3 t$ |1 e8 ^& ^" z+ H
  39. 39            if(time < interval){
    $ h* _& \( c: ?. S
  40. 40                HAL_Delay(interval - time);7 [9 j& G0 Q0 h3 S, u4 o- Y
  41. 41            }
    ; C0 p% h* I2 M
  42. 42        }. T8 X2 L! k" {) f3 k+ x7 x: i
  43. 43        nextImg = !nextImg;
    5 m6 d  |+ C6 K7 B: N) K
  44. 44        HAL_Delay(5000);
    ! y# o# p: ?9 |. H
  45. 45    }
    " q* s# O6 ^9 @. X4 P2 f. z1 [
  46. 46}</font>
复制代码
最终效果:
# y" |4 K# t2 E( _( h 2.gif
- h; u8 _! D4 _' N/ V; K
- ^8 u% _8 S" v1 {$ L# r9 V, u0 S# e$ L5 D7 L7 X! {/ E# m9 j6 m, x  b
性能对比% m1 P, ^4 V$ q$ y
前面介绍了三种嵌入式图形开发种的实例,并对分别介绍了通过传统和DMA2D实现的方法。这时候肯定有朋友会问,DMA2D实现,比起传统方法实现,到底能快多少呢?我们来实际测试一下。4 h! y7 b4 o& u+ L
8 [% t9 F* u, H; n, L; ?; o
! O$ }) e$ G* g' j7 e
共同的测试条件如下:
, V, j! m# l* _- x0 u" i! J+ s
& l9 b/ V2 x  z/ `: k* O

( P8 T5 s: E' X: K: Yframebuffer放置在SDRAM中,320x240,RGB565: V/ H; d3 ~  b9 N. N
1 P, y# f! \( L. a6 t0 o2 g% l
. Z  s/ C5 m- Y
SDRAM工作频率100MHz,CL2,16位带宽。
9 d, c) Q2 L: U, B- Z
# k& Q( j1 a, H" N5 ]

1 k; o8 L! _2 M8 {MCU为STM32H750XB,主频400MHz,开启I-Cache和D-Cache" G5 ?5 {- [- Z- V( {) L
: ^5 V0 B) n8 k; _
3 `! i6 y; F% p; a3 V1 h
代码和资源在内部Flash上,64位AXI总线,速度为200MHz。% ~! @$ }3 _0 s) i3 h# q
% ^- s7 M: P4 q1 [4 m8 z
. K  P7 c6 V% Y9 K& j! ^1 z
GCC编译器(版本:arm-atollic-eabi-gcc-6.3.1)
% g# e2 `$ M; X7 X2 M! D! I1 X8 a( b4 D* L

2 W( n3 ?2 V1 U7 c  F测试项目:矩形填充! J5 X" E/ e+ R  c

" t+ ^7 b0 B% v+ g# f

1 u. [0 K: Z: O' Q绘制上一章第1节中的图表,绘制10000次,统计结果% R+ u6 S% }- N2 Z

- {( w( ]5 T4 N$ K
( Z% ]+ s6 G# r2 O. P4 v7 ?8 `/ e
测试结果:
7 V' Q# a% A3 q/ O( }' c 1625626909(1).png 6 D5 F0 m$ w% N  z$ Y1 f
测试项目:内存复制7 ^( h) C" l0 v$ {7 X3 o
绘制上一章第2节中的序列帧10000帧,统计结果2 Y; _+ G, E9 ]
" w$ P$ L( |4 d5 p1 O' D- g

7 r* U# a# `5 W4 u$ U* T; Z测试结果:1 d% {+ F7 ~/ u6 f9 e* C; M/ w- V

( B5 Q- w, l# [* M  S% e. h9 d
5 v5 C2 u$ `6 P# O! f/ t
1625626939(1).png # p1 F: f' X; w% u1 e0 E2 C& y' M

& i, e: F# T+ m/ P

/ z  j* X, T, B. d* P  I+ R测试项目:透明度混合9 I3 T; a" h  M4 Z9 k3 e  h
渐变切换上一章第3小节中的两张图片100次,每次30帧完成,共计3000帧
4 i! l( g0 @5 g7 q# L/ K
2 R3 ~  v! i- P$ G
) a' Q; v$ q* H
混合结果直接输出到framebuffer,不再通过缓冲区缓冲/ S8 ?/ b; ^; e) N" H8 R- @& @; e

& ~4 A* m' n# E3 W
% h1 K& _$ u) w' Z: C# E) w
测试结果:
0 C8 j$ Z/ p# ^- V& M% A8 U8 [* g6 o1 J5 V0 {  z& x  b! r/ [7 m

) r0 _& `) q5 p$ [" E3 ` 1625626967(1).png ; U! P2 e: }4 D
0 h1 T; z, K5 O  Z1 P; |7 C

; U& C# I% }9 T5 n0 }% ]6 r% T0 P. h! Q5 m- g  W) H5 Q+ e* D
性能测试总结7 b  m  o5 X( C5 b0 O/ I
由上面的测试结果可以看出,DAM2D至少有2个优势:4 P" T) e( G4 d# a
, A! P' P. b$ F% j# a

& j. T6 Q* h# a1 {6 ?一是速度更快:在部分项目中,DMA2D实现的速度相比纯软件实现最高可以达到30倍的差距!这还是在主频高达400MHz还带L1-Cache的STM32H750平台上测试的结果,如果是在无cache且主频较低的STM32F4平台上进行测试,差距会进一步拉大。
7 r/ @6 p& i5 _5 W% P/ Z3 K2 y
# m" _" D0 Z6 z% q* E' l

" |6 j% P) C' e% y+ G* [: \" F二是性能更加稳定:由测试结果可以看出,DMA2D实现的方式受编译器优化等级的影响非常小,几乎可以忽略不计,这意味着,无论你使用IAR,GCC或是MDK,使用DMA2D都可以达到相同的性能表现。不会出现同一段代码移植后性能相差很大的情况。! f1 n( ~; A+ [+ Y( A& v
: a0 A5 C, u' Q( y7 r6 R

0 U2 b' G- B+ Q& r4 m) ]1 N6 V除这两个直观的结果外,其实还有第三点优势,那就是代码编写更加简单。DMA2D的寄存器不多,而且比较直观。在某些场合,使用起来要比软件实现方便的多。
6 P$ e" l8 q& x7 g) e& ~) ^: X! t  I
, R) I* B  c+ Y! D. ]3 {
结语
1 t6 P! J+ J4 Z; l本文中的三个实例,都是我本人在嵌入式图形开发中经常遇到的情况。实际上,DMA2D的用法还有很多,有兴趣的话可以参考《STM32H743中文编程手册》中的相关内容,相信有了本文的基础,在阅读里面的内容时一定会事半功倍。
  a* I' a" n2 N- q: |  l% S  b: m4 n: H$ h* n& K# }/ S

, l$ N( z& O/ F1 |4 D+ F, V2 I
8 `  I& M. k& h! V. j7 h受限于作者的技术,文章中的内容无法做到100%的正确,如果存在错误,请大家指出,谢谢。" S5 z' C- e2 x
6 U+ V4 e0 Q6 z1 s

. a6 W) z4 I3 g8 R; h
' P" v1 }/ i5 i4 P: ~9 a+ x

2 L0 ]* `- o- {* X5 O1 V
5 t1 D- f( k" j- E6 n3 d! J! a* I7 U6 R8 W
收藏 评论1 发布时间:2021-7-7 11:12

举报

1个回答
ghost110 回答时间:2021-7-7 13:14:14
很全面和详尽。直接就是学习教程啊。
% G- Z: S6 _0 \: T' G( R6 E

所属标签

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版