当前位置： 首页 > news >正文

TouchGFX之画布控件

news 2025/6/30 20:58:17

TouchGFX的画布控件，在使用相对较小的存储空间的同时保持高性能，可提供平滑、抗锯齿效果良好的几何图形绘制。

TouchGFX 设计器中可用的画布控件：

  • Line
  • Circle
  • Shape
  • Line Progress
  • 圆形进度条

存储空间分配和使用​

为了生成反锯齿效果良好的复杂几何图形，需要额外的存储空间。 为此，CWR必须具有专门分配的存储缓冲区，以便在渲染过程中使用。 CWR与TouchGFX的其余部分一样，没有动态存储空间分配。

在TouchGFX Designer中，可以在屏幕属性中重写画布缓冲区大小

需要的CWR存储空间的量取决于要在应用中绘制的最大图形大小。 但是，您可以保留比最复杂形状所需内存空间更少的内存。 为了应对这种情况，CWR将图形绘制分割成较小的帧缓存部分，在这种情况下，由于有时需要不止一次地渲染图像，因此渲染时间稍长。 在模拟器模式下运行时，可以更细致地查看存储空间消耗并进行微调。 只需向main.cpp中添加函数CanvasWidgetRenderer::setWriteMemoryUsageReport(true)，具体操作如下：

#include <platform/hal/simulator/sdl2/HALSDL2.hpp>
#include <touchgfx/hal/NoDMA.hpp>
#include <common/TouchGFXInit.hpp>
#include <gui_generated/common/SimConstants.hpp>
#include <platform/driver/touch/SDL2TouchController.hpp>
#include <touchgfx/lcd/LCD.hpp>
#include <stdlib.h>
#include <simulator/mainBase.hpp>
#include <touchgfx/canvas_widget_renderer/CanvasWidgetRenderer.hpp>using namespace touchgfx;#ifdef __linux__
int main(int argc, char** argv)
{
#else
#include <shellapi.h>
#ifdef _UNICODE
#error Cannot run in unicode mode
#endif
int CALLBACK WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{int argc;char** argv = touchgfx::HALSDL2::getArgv(&argc);
#endiftouchgfx::NoDMA dma; //For windows/linux, DMA transfers are simulatedLCD& lcd = setupLCD();touchgfx::SDL2TouchController tc;touchgfx::HAL& hal = touchgfx::touchgfx_generic_init<touchgfx::HALSDL2>(dma, lcd, tc, SIM_WIDTH, SIM_HEIGHT, 0, 0);setupSimulator(argc, argv, hal);// Ensure there is a console window to print to using printf() or// std::cout, and read from using e.g. fgets or std::cin.// Alternatively, instead of using printf(), always use// touchgfx_printf() which will ensure there is a console to write// to.//touchgfx_enable_stdio();CanvasWidgetRenderer::setWriteMemoryUsageReport(true);touchgfx::HAL::getInstance()->taskEntry(); //Never returnsreturn EXIT_SUCCESS;
}

自定义画布控件

实现自定义画布控件需要用下列函数实现新类：

virtual bool drawCanvasWidget(const Rect& invalidatedArea) const;
virtual Rect getMinimalRect() const;

drawCanvasWidget() 必须绘制自定义控件需要绘制的任何内容，并且 getMinimalRect() 应该返回 Widget 中包含几何形状的实际矩形。

举例：在10x10方块内部粗略实现一个菱形块

Diamond10x10.hpp#ifndef DIAMOND10X10_HPP
#define DIAMOND10X10_HPP#include <touchgfx/widgets/canvas/CanvasWidget.hpp>
#include <touchgfx/widgets/canvas/Canvas.hpp>using namespace touchgfx;class Diamond10x10 : public CanvasWidget
{
public:virtual Rect getMinimalRect() const{return Rect(0,0,10,10);}virtual bool drawCanvasWidget(const Rect& invalidatedArea) const{Canvas canvas(this, invalidatedArea);canvas.moveTo(5,0);canvas.lineTo(10,5);canvas.lineTo(5,10);canvas.lineTo(0,5);return canvas.render(); // Shape is automatically closed}
};#endif

screenView.hpp#ifndef SCREENVIEW_HPP
#define SCREENVIEW_HPP#include <gui_generated/screen_screen/screenViewBase.hpp>
#include <gui/screen_screen/screenPresenter.hpp>
#include <gui/common/Diamond10x10.hpp>
#include <touchgfx/widgets/canvas/PainterRGB565.hpp>class screenView : public screenViewBase
{
public:screenView();virtual ~screenView() {}virtual void setupScreen();virtual void tearDownScreen();
protected:private:Diamond10x10 box;PainterRGB565 myPainter; // For 16bpp displays
};#endif // SCREENVIEW_HPP

screenView.cpp#include <gui/screen_screen/screenView.hpp>
#include <touchgfx/Color.hpp>screenView::screenView()
{}void screenView::setupScreen()
{screenViewBase::setupScreen();myPainter.setColor(Color::getColorFromRGB(0xFF, 0x0, 0x0));box.setPosition(100,100,10,10);box.setPainter(myPainter);add(box);
}void screenView::tearDownScreen()
{screenViewBase::tearDownScreen();
}

运行模拟器，效果如下（意味着画布缓冲区大小可以调整到大于168字节即可）

平铺位图

首先在模拟器中添加图片资源

然后修改程序

#ifndef DIAMOND10X10_HPP
#define DIAMOND10X10_HPP#include <touchgfx/widgets/canvas/CanvasWidget.hpp>
#include <touchgfx/widgets/canvas/Canvas.hpp>using namespace touchgfx;class Diamond10x10 : public CanvasWidget
{
public:virtual Rect getMinimalRect() const{return Rect(0,0,100,100);}virtual bool drawCanvasWidget(const Rect& invalidatedArea) const{Canvas canvas(this, invalidatedArea);canvas.moveTo(50,0);canvas.lineTo(100,50);canvas.lineTo(50,100);canvas.lineTo(0,50);return canvas.render(); // Shape is automatically closed}
};#endif

#ifndef SCREENVIEW_HPP
#define SCREENVIEW_HPP#include <gui_generated/screen_screen/screenViewBase.hpp>
#include <gui/screen_screen/screenPresenter.hpp>
#include <gui/common/Diamond10x10.hpp>
#include <touchgfx/widgets/canvas/PainterRGB565Bitmap.hpp>class screenView : public screenViewBase
{
public:screenView();virtual ~screenView() {}virtual void setupScreen();virtual void tearDownScreen();
protected:private:Diamond10x10 box;PainterRGB565Bitmap bitmapPainter;
};#endif // SCREENVIEW_HPP

#include <gui/screen_screen/screenView.hpp>
#include <touchgfx/Color.hpp>
#include <images/BitmapDatabase.hpp>screenView::screenView()
{}void screenView::setupScreen()
{screenViewBase::setupScreen();bitmapPainter.setBitmap(touchgfx::Bitmap(BITMAP_TEST_ID));bitmapPainter.setTiled(true);box.setPosition(100,100,100,100);box.setPainter(bitmapPainter);add(box);
}void screenView::tearDownScreen()
{screenViewBase::tearDownScreen();
}

运行模拟器，效果如下

定制绘图器

尽管TouchGFX提供一组预定义的画笔类，涵盖了大多数用例场景，但也可实现定制画笔

#ifndef REDPAINTER_HPP
#define REDPAINTER_HPP#include <touchgfx/widgets/canvas/AbstractPainterRGB565.hpp>using namespace touchgfx;class StripePainter : public AbstractPainterRGB565
{
public:virtual void paint(uint8_t* destination, int16_t offset, int16_t widgetX, int16_t widgetY, int16_t count, uint8_t alpha) const{if ((widgetY & 2) == 0){return; // Do not draw anything on line 0,1, 4,5, 8,9, etc.}uint16_t* framebuffer = reinterpret_cast<uint16_t*>(destination) + offset;const uint16_t* const lineend = framebuffer + count;if (alpha == 0xFF){do{*framebuffer = 0xF800;} while (++framebuffer < lineend);}else{do{*framebuffer = alphaBlend(0xF800, *framebuffer, alpha);} while (++framebuffer < lineend);}}
};#endif

#ifndef SCREENVIEW_HPP
#define SCREENVIEW_HPP#include <gui_generated/screen_screen/screenViewBase.hpp>
#include <gui/screen_screen/screenPresenter.hpp>
#include <gui/common/Diamond10x10.hpp>
#include <gui/common/RedPainter.hpp>class screenView : public screenViewBase
{
public:screenView();virtual ~screenView() {}virtual void setupScreen();virtual void tearDownScreen();
protected:private:Diamond10x10 box;StripePainter myPainter;
};#endif // SCREENVIEW_HPP

#include <gui/screen_screen/screenView.hpp>
#include <touchgfx/Color.hpp>screenView::screenView()
{}void screenView::setupScreen()
{screenViewBase::setupScreen();box.setPosition(100,100,100,100);box.setPainter(myPainter);add(box);
}void screenView::tearDownScreen()
{screenViewBase::tearDownScreen();
}

运行模拟器，效果如下

http://www.lryc.cn/news/173067.html

相关文章：

  • STM32F103RCT6学习笔记2：串口通信
  • Opencv-图像噪声（均值滤波、高斯滤波、中值滤波）
  • MasterAlign相机参数设置-增益调节
  • 9月22日，每日信息差
  • Java版本企业工程项目管理系统源码+spring cloud 系统管理+java 系统设置+二次开发
  • Android studio中如何下载sdk
  • STM32单片机中国象棋TFT触摸屏小游戏
  • 【PHP图片托管】CFimagehost搭建私人图床 - 无需数据库支持
  • CCITT 标准的CRC-16检验算法
  • docker启动mysql服务
  • Postman应用——Request数据导入导出
  • 十四、MySql的用户管理
  • 01.自动化交易综述
  • 基于SpringBoot的网上超市系统的设计与实现
  • 国内首家！阿里云 Elasticsearch 8.9 版本释放 AI 搜索新动能
  • uniapp获取一周日期和星期
  • QT之QListWidget的介绍
  • 数据结构--排序(1)
  • 【AI视野·今日NLP 自然语言处理论文速览 第三十七期】Thu, 21 Sep 2023
  • 高防服务器防护效果怎么样？
  • tomcat架构概览
  • 海康的资料
  • 【ELFK】之消息队列kafka
  • Qt核心：元对象系统、属性系统、对象树、信号槽
  • 【若依框架2】前后端分离版本添加功能页
  • Unity Bolt模块间通信
  • please choose a certificate and try again.(-5)报错怎么解决
  • 国产自研BI系统，更懂中国企业数据分析需求
  • 基于Java的高校竞赛管理系统设计与实现（亮点：发起比赛、报名、审核、评委打分、获奖排名，可随意更换主题如蓝桥杯、ACM、王者荣耀、吃鸡等竞赛）
  • 出血性脑卒中临床智能诊疗建模