今天是西方的圣诞节，祝西方人圣诞节快乐。
【实验目的】体难矢量图形显示
【实验器材】
Stm32U599J-DK开发板
【开发软件】
- stm32CubeIDE
- TouchGFX Designer 4.23
【实验步骤】
- 认真学习官方教程SVG图形显示：https://support.touchgfx.com/zh-CN/docs/development/ui-development/ui-components/images/svg-image。
- 官方的demo:
- 生成svg图片
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150pt" height="44pt" viewBox="0 0 150 44" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#fb944dfb">
<path fill="#fb944d" opacity="1.00" d=" M 9.80 26.58 C 16.10 23.97 17.65 16.89 20.98 11.68 C 25.92 12.27 20.13 17.51 19.31 20.02 C 23.09 18.52 27.25 18.46 30.39 21.35 C 28.43 23.54 25.73 24.64 22.96 25.40 C 22.50 29.68 22.63 33.99 22.13 38.27 C 19.83 37.09 17.50 35.91 15.50 34.24 C 14.80 34.09 13.38 33.78 12.67 33.63 C 12.85 30.48 14.77 27.55 17.84 26.55 C 17.41 29.12 16.71 31.63 15.89 34.09 C 17.21 33.98 18.54 33.88 19.87 33.81 C 20.10 30.07 20.13 26.29 19.24 22.63 C 17.24 24.50 15.15 26.46 12.20 26.24 C 11.56 29.42 10.89 32.62 10.96 35.88 C 10.41 36.27 9.31 37.05 8.76 37.44 C 8.60 33.81 8.76 30.18 8.70 26.54 C 6.96 28.06 5.29 29.69 3.20 30.72 C 6.19 25.14 9.18 19.56 11.72 13.76 C 12.55 14.64 13.38 15.53 14.21 16.41 C 12.34 19.61 9.65 22.64 9.80 26.58 M 20.38 22.47 C 21.13 23.87 25.25 23.20 24.80 21.29 C 23.38 20.48 21.35 21.29 20.38 22.47 Z" />
<path fill="#fb944d" opacity="1.00" d=" M 67.90 14.17 C 72.20 9.81 81.06 11.60 81.71 18.27 C 81.40 24.66 75.42 28.43 71.08 32.26 C 74.53 32.11 78.00 32.00 81.37 31.20 C 82.08 39.64 71.75 33.96 67.03 35.97 C 66.91 35.20 66.69 33.68 66.57 32.91 C 69.97 28.51 75.82 26.27 77.95 20.88 C 78.96 18.43 77.32 16.39 75.67 14.77 C 72.55 14.62 70.35 16.76 68.11 18.58 C 68.04 17.11 67.96 15.64 67.90 14.17 Z" />
<path fill="#fb944d" opacity="1.00" d=" M 86.52 16.62 C 88.46 11.93 95.35 10.08 98.80 14.19 C 104.32 20.60 102.27 31.24 95.62 36.10 C 85.08 37.94 82.53 23.81 86.52 16.62 M 90.05 16.26 C 87.27 21.68 86.47 30.46 92.95 33.48 C 101.55 31.20 100.40 11.29 90.05 16.26 Z" />
<path fill="#fb944d" opacity="1.00" d=" M 104.89 18.63 C 102.47 10.07 117.27 9.52 118.08 17.00 C 119.58 24.23 112.20 28.19 107.76 32.38 C 111.26 32.17 114.81 32.11 118.21 31.15 C 119.00 39.84 108.53 33.74 103.69 36.00 C 103.35 27.68 116.40 26.46 115.20 17.37 C 114.26 16.54 113.33 15.70 112.41 14.85 C 109.29 14.61 107.19 16.95 104.89 18.63 Z" />
<path fill="#fb944d" opacity="1.00" d=" M 121.13 26.92 C 125.20 21.39 129.27 15.54 134.83 11.41 C 135.22 16.36 134.95 21.32 134.76 26.26 C 135.66 26.06 137.47 25.65 138.37 25.45 C 138.32 26.34 138.20 28.12 138.15 29.01 C 137.38 29.03 135.85 29.07 135.08 29.09 C 135.32 32.09 135.31 38.02 130.85 35.34 C 131.25 33.34 131.76 31.32 131.65 29.26 C 128.46 29.14 125.30 29.77 122.14 30.09 C 121.89 29.30 121.38 27.72 121.13 26.92 M 124.61 26.22 C 127.03 26.14 129.45 26.05 131.87 25.98 C 131.82 23.17 131.81 20.36 131.78 17.54 C 129.16 20.24 126.71 23.10 124.61 26.22 Z" />
<path fill="#fb944d" opacity="1.00" d=" M 44.81 13.66 C 45.41 14.09 46.59 14.95 47.18 15.38 C 46.68 18.15 46.05 20.90 45.90 23.72 C 47.46 21.78 48.73 19.60 49.35 17.18 C 51.62 16.50 53.90 15.84 56.17 15.14 C 57.44 15.56 58.72 15.97 60.00 16.36 C 60.00 16.95 60.02 18.12 60.02 18.71 C 59.00 19.50 57.98 20.29 56.95 21.09 C 56.97 21.84 57.02 23.36 57.04 24.12 C 58.92 24.08 60.80 24.00 62.69 23.94 C 63.20 25.38 63.73 26.82 64.23 28.26 C 62.12 28.02 60.05 27.55 58.02 26.94 C 58.46 31.35 57.45 35.64 55.79 39.69 C 51.35 38.48 47.74 35.48 45.25 31.68 C 43.88 33.83 41.92 35.38 39.26 35.27 C 39.19 34.54 39.07 33.09 39.01 32.36 C 40.47 32.16 41.94 31.96 43.41 31.77 C 42.51 30.47 41.57 29.20 40.68 27.90 C 38.42 29.22 35.12 30.28 35.70 26.37 C 38.08 25.58 40.91 25.50 42.83 23.73 C 44.36 20.61 43.99 16.99 44.81 13.66 M 49.44 21.81 C 49.23 23.33 49.03 24.85 48.84 26.38 C 50.63 25.72 52.40 25.01 54.17 24.30 C 53.74 23.12 53.29 21.95 52.84 20.78 C 54.82 20.10 56.22 18.82 56.17 16.59 C 53.61 17.89 51.64 20.01 49.44 21.81 M 45.41 25.96 C 41.13 29.38 49.17 28.96 45.41 25.96 M 46.62 29.35 C 47.67 30.35 48.75 31.32 49.83 32.31 C 49.96 33.50 50.10 34.70 50.24 35.89 C 51.57 35.96 52.90 36.03 54.24 36.11 C 54.90 33.39 55.06 30.59 55.00 27.80 C 52.19 28.24 49.43 28.93 46.62 29.35 Z" />
<path fill="#fb944d" opacity="1.00" d=" M 24.66 25.64 C 26.50 26.98 28.32 28.34 30.21 29.59 C 30.34 31.74 29.51 33.53 27.61 34.60 C 26.47 31.67 25.27 28.74 24.66 25.64 Z" />
</g>
</svg>
【注意】目前编译器不对处理以text为标签的svg图片，在编译是会报错。所以我花了一天的时间学习如何自己生成图片，然后找专业转换工具，试了N次后才成功。
- 生成空白工程并加入自己制作的svg图片到工程中。
- 生成工程后添加图片移动的代码：
#include <gui/screen1_screen/Screen1View.hpp>
Screen1View::Screen1View():tick(0),state(0)
{
}
void Screen1View::setupScreen()
{
svgImage2024.moveTo(240, 480);
Screen1ViewBase::setupScreen();
}
void Screen1View::tearDownScreen()
{
Screen1ViewBase::tearDownScreen();
}
void Screen1View::svgImage1_handle()
{
static int svgimg1y = -152;
if(svgimg1y < 34)
{
svgimg1y++;
svgImage1.setY(svgimg1y);
svgImage1.invalidate();
}
else
{
state = 1;
}
}
void Screen1View::svgImage2024_handle()
{
static int svgImage2024y = 480;
static float s = 0.1;
if(svgImage2024y>250)
{
svgImage2024y --;
svgImage2024.setScale(0.6f + s);
svgImage2024.resizeToCurrentSVG();
svgImage2024.setY(svgImage2024y);
svgImage2024.setX(svgImage2024.getX() - 1);
svgImage2024.invalidate();
s = s+0.01;
}
else
{
state = 3;
}
}
void Screen1View::svgImageChris_handle()
{
static int svgImageChrisy = 480;
if(svgImageChrisy>200)
{
svgImageChrisy --;
svgImageChris.setY(svgImageChrisy);
svgImageChris.invalidate();
}
else
{
state = 2;
}
}
void Screen1View::handleTickEvent()
{
tick ++;
if(state == 0)
{
svgImage1_handle();
}
else if(state == 1)
{
svgImageChris_handle();
}
else if(state == 2)
{
svgImage2024_handle();
}
}
【实验效果】
矢量图形体验
提升卡
变色卡
千斤顶
1/10 
京公网安备 11010802033920号
Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved
