OpenHarmony UI开发-ohos-svg

简介

ohos-svg是一个SVG图片的解析器和渲染器，解析SVG图片并渲染到页面上。它支持大部分 SVG 1.1 规范，包括基本形状、路径、文本、样式和渐变,它能够渲染大多数标准的 SVG 图像。ohos-svg的优点是性能好、内存占用低。

效果展示

SVG图片解析并绘制:

下载安装

ohpm install @ohos/svg

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

接口使用方式变更

1.需要在EntryAbility.ts引入this.context

import { GlobalContext } from '@ohos/svg/src/main/ets/components/GlobalContext';
...        
GlobalContext.getContext().setObject("context", this.context);

2.在需要的时候通过getObject获取context对象

import { GlobalContext } from '@ohos/svg/src/main/ets/components/GlobalContext';
import { Context } from '@ohos.abilityAccessCtrl';
let context: Context = GlobalContext.getContext().getObject("context") as Context;
context.resourceManager.getRawFileContent(rawfileName, (error, value) => {...}

使用说明

import { SVGImageView } from '@ohos/svg'model: SVGImageView.SVGImageViewModel = new SVGImageView.SVGImageViewModel();build() {SVGImageView({ model: this.model })
}

接口说明

model: SVGImageView.SVGImageViewModel = new SVGImageView.SVGImageViewModel();

设置svg资源文件 this.model.setImageRawfile(filename: string, context?:common.UIAbilityContext)
设置svg对象 this.model.setSVG(svg: SVG, css?: string, context?:common.UIAbilityContext)
设置svg资源图片 this.model.setImageResource(resource: Resource, context?:common.UIAbilityContext)
设置svg图片的源文件字符串 this.model.setFromString(url: string, context?:common.UIAbilityContext)

约束与限制

在下述版本验证通过：

DevEco Studio: 4.1 Canary2-4.1.3.322, SDK: API11 (4.1.0.36)
DevEco Studio: 4.0 (4.0.3.700), SDK: API10 (4.0.10.15)
DevEco Studio: 4.0 (4.0.3.600), SDK: API10 (4.0.10.11)
DevEco Studio: 4.0 (4.0.3.513), SDK: API10 (4.0.10.10)

HSP场景适配:

SVGImageViewModel配置类部分对外接口新增可选参数context, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。

非HSP场景不影响原功能, context可以不传。

目录结构

|---- ohos-svg  
|     |---- entry  # 示例代码文件夹
|     |---- library  # ohos_svg库文件夹
|           |---- index.ets  # 对外接口|---- components  # 组件代码目录|---- CSS.ts|---- GlobalContext.ts|---- PreserveAspectRatio.ts|---- RenderOptions.ts|---- SimpleAssetResolver.ts|---- SVG.ts|---- SVGExternalFileResolver.ts|---- SVGImageView.ets|---- SVGParseException.ts   |---- utils  |---- Character  |---- CSSBase  |---- CSSFontFeatureSettings  |---- CSSFontVariationSettings  |---- CSSTextScanner  |---- IntegerParser  |---- Matrix  |---- mini_canvas  |---- NumberParser  |---- Rect  |---- RenderOptionsBase  |---- Style  |---- SVGBase  |---- SVGParser  |---- SVGParserImpl  |---- SVGRenderer  |---- SVGXMLChecker  |---- SVGXMLConstants  |---- TextScanner  |     |---- README.md  # 安装使用方法

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05