跳转到主要内容

SVG图像

SVG图像是一种绘制SVG图像文件的控件，能围绕可调旋转中心自由缩放和旋转。

Note
  • 必须在TouchGFX Generator中启用Vector Rendering（矢量渲染），才能使用SVG Image（图像）控件。
  • 复杂的SVG图像文件会对MCU负载产生重大影响。

    • 在模拟器中运行的SVG图像

    控件组​

    SVG 图像位于TouchGFX 设计器中的图像控件组中。

    TouchGFX Designer中的SVG 图像

    属性​

    TouchGFX Designer中SVG 图像的属性。

    属性组属性说明
    名称控件的名称。 名称是TouchGFX设计器和代码中使用的唯一标识符。
    位置X 和 Y 指定控件左上角相对于其父的位置。

    W 和 H 指定控件的宽度和高度。 控件的大小是由关联的图像大小决定的。

    锁定指定控件是否应锁定为其当前的X、Y、W和H。
    如果锁定控件，还会禁止通过屏幕与控件进行交互。

    可见指定控件的可见性。 如果将控件标记为不可见，还会禁止通过屏幕与控件进行交互。
    SVGSVG指定关联的SVG图像。 从“项目”选项卡中的已导入图像中选择，或从“Stock”选项卡中的免费TouchGFX图像集合中选择。

    锁定图像到中心 指定图像位置是否应锁定在小部件的中心。
    此选项仅适用于TouchGFX 设计器，即：如果在运行时调整SVG图像的大小，此选项对图像的居中位置无任何影响。

    Fit Image To Size将缩放图像以适应SVG图像控件的大小。
    此选项仅适用于TouchGFX 设计器，即：如果在运行时调整SVG图像的大小，此选项对图像大小无任何影响。

    图像位置 X 和 Y 指定图像左上角在模式窗口中的位置。

    图像缩放 X 和Y 指定X和/或Y方向缩放图像的缩放因子。

    旋转中心 X和 Y 指定旋转中心， 旋转(度) 指定旋转图像的角度(度)。
    Mixin可拖动指定在运行时控件是否可拖动。

    ClickListener指定控件被点击时是否会调用回调函数。

    MoveAnimator指定控件是否可绘制 X和 Y 值变化的动画。

    交互​

    下面的部分介绍了SVG图像支持的操作和触发条件。

    操作​

    控件特有的动作说明
    旋转SVG图像相对于SVG图像的当前方向或特定角度围绕其旋转中心旋转SVG图像。
    缩放SVG图像缩放SVG图像（相对于其当前尺寸或相对于特定尺寸）。
    调整控件的尺寸调整控件的宽度和高度。
    标准控件动作说明
    移动控件在一定时间内将控件移动到新位置。
    隐藏控件隐藏控件（将可见性设为False）。
    显示控件使隐藏的控件可见（将可见性设为True）。

    触发​

    SVG图像不会产生任何触发条件。

    性能​

    SVG图像控件的性能取决于所使用的SVG图像文件的复杂性，如：元素数量、路径数量、路径大小、渐变的使用等。 因此，在大部分平台上，会将SVG图像视为要求高的控件。

    更多关于绘图性能的信息，请阅读通用UI组件性能部分。

    示例​

    生成代码​

    在生成的视图基类的代码中，可以查看TouchGFX 设计器是如何创建SVG图像的。

    Screen1ViewBase.cpp
    #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
    #include <touchgfx/canvas_widget_renderer/CanvasWidgetRenderer.hpp>
    #include <touchgfx/Color.hpp>
    #include<images/SVGDatabase.hpp>

    Screen1ViewBase::Screen1ViewBase()
    {
        touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

        svgImage.setSVG(SVG_ALTERNATE_THEME_IMAGES_LOGOS_TOUCHGFX_GRADIENT_EMBOSSED_SVG_ID);
        svgImage.setPosition(26, 25, 260, 180);
        svgImage.setScale(1.2f, 0.8f);
        svgImage.setImagePosition(40, 30);
        svgImage.setRotationCenter(130, 90);
        svgImage.setRotation(5);

        add(svgImage);
    }

    Screen1ViewBase::~Screen1ViewBase()
    {
        touchgfx::CanvasWidgetRenderer::resetBuffer();
    }

    void Screen1ViewBase::setupScreen()
    {
    }
    Tip
    可在用户代码中使用这些函数以及SVG Image类中提供的其他函数。 如果更改控件的外观，请必须调用 svgImage.invalidate() 强制进行重新绘制。

    用户代码​

    以下代码示例显示了如何通过连续调整handleTickEvent（）中的旋转来旋转SVG图像：

    mainView.cpp
    #include <gui/screen1_screen/Screen1View.hpp>

    Screen1View::Screen1View()
    {
    }

    void Screen1View::setupScreen()
    {
        Screen1ViewBase::setupScreen();
    }

    void Screen1View::tearDownScreen()
    {
        Screen1ViewBase::tearDownScreen();
    }

    void Screen1View::handleTickEvent()
    {
        svgImage.setRotation(svgImage.getRotation() + 2.0f);
        svgImage.invalidate();
    }

    TouchGFX Designer示例​

    如需进一步了解基于文本的SVG图像，请尝试在TouchGFX 设计器中使用以下UI模板创建新应用：

    TouchGFX 设计器中的SVG图像UI模板

    API参考​

    Further reading
  • TouchGFX Generator中的矢量渲染配置
  • SVG图形
  • SVG Image类的API参考