[教程] TZSvgImageLite 使用教程

TZSvgImageLite 是一个简化版的 SVG 图片及路径格式支持,隶属于 Z.UI 的组成部分,用于提供 svg 矢量图片的支持。我们提供了一个单独的 z.svg.single.pas 将依赖的类型和定义合并成一个单独的文件,方便不安装而直接引用。

【功能特性】

  • 不依赖 Skia 和三方的 XML 解析单元
  • 支持常见的 SVG 图形元素
  • 自定义实现了二进制的 SVG 格式支持(svgb),体积更小,在 svg 目录下,可以看到原始 svg 和 svgb 格式的尺寸差异
    • 以边牧的 SVG 图片为例,原始 SVG 格式为 17374 字节,使用 SVGB 格式为 5978 字节,体积只有原始格式的 34%
  • 自定义实现了二进制的路径格式支持(zpb),缩减体积
  • 支持直接使用 TPicture 直接加载 SVG/SVGB/ZPB和路径文本的支持,并支持无级缩放,也就是说,你可以直接使用 TImage 组件来显示 SVG 图片或路径
  • 支持直接解析 SVG 字符串
  • 支持直接提取 SVG 图片中的路径
  • 增加 AsString/AsBytes/PathBytes 属性

【兼容性】

  • 样式支持: 填充颜色/填充规则/画笔颜色/画笔宽度/透明度
  • 元素支持: 支持 path / rect / circle / ellipse / polygon / polyline / line / g
  • 不支持: SVG 文本/滤镜/阴影/模糊/渐变

【使用建议】

  • 安装为运行时包:
    • 设计期,直接通过 TImage.Picture 加载对应的文件
    • 优点: 图片数据直接集成到了 DFM 中,设计期可以直接看到效果
    • 缺点: 使用标准SVG格式文本嵌入,体积更大,解析更慢
  • 直接引用文件:
    • 设计期将其通过 Project/Resource and Images 对话框潜入资源,运行时通过 TImage 的 Picture 属性 LoadFromResourceName 方法加载图片
    • 优点: 可以转换为 SVGB 格化以减少体积并提升解析效率
    • 缺点: 需人工编码

【示例效果】

【包含类型】

  • TZPathData : FMX 里 TPathData 的增强,主要做了以下处理
    • Data 字符串生成时,优先使用相对坐标以减少字符串体积
    • 增加 AsBytes 属性,直接生成和还原字节流,提升效率并减少内存占用
    • 增加 SaveToFile / SaveToStream / LoadFromFile / LoadFromStream 函数
    • 增加 Draw / Fill 函数,将路径绘制到指定的画布上
  • TZGraphicObject<T> : 基础类,子类实现画笔、画刷、字体及版式信息
  • TZMetaStroke<T>: 画笔的基础类
  • TZGpGraphicObject <T>: 基于 GDI+ 的 TZGraphicObject 子类
  • TGZpBrush : 基于 GDI+ 的画刷,目前只支持单色
  • TZGpFont: 基于 GDI+ 的字体,支持从流/文件/资源中加载字符
  • TZGpStroke: 基于 GDI+ 的画笔,目前只支持单色
  • TZGpTextFormat: 基于 GDI+ 的字体样式
  • TZGpCanvas: 基于 GDI+ 的画布,相比 FMX 实现的 GDI+ 画布,增加了与 VCL 的字体/画刷等的兼容
  • TZSvgImageLite: SVG 图片格式支持

【版本区别】

  • 完整版本额外支持以下功能特性
    • TPicture.LoadFromStream 的格式自动识别完整支持
    • 支持转换SVG图片为 Icon 图标格式
    • 未来增加的其它更新内容会优先添加到完整版本

滚动至顶部