【OpenHarmony】 鸿蒙 UI动画开发之ohos-svg

简介

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

效果展示

SVG图片解析并绘制:

下载安装

bash 复制代码
ohpm install @ohos/svg

接口使用方式变更

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

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

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

javascript 复制代码
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) => {
     ...
 }

DD一下: 鸿蒙开发各类文档,可关注公众号<程序猿百晓生>获取。

erlang 复制代码
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

使用说明

javascript 复制代码
import { SVGImageView } from '@ohos/svg'

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

build() {
  SVGImageView({ model: this.model })
}

接口说明

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

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

约束与限制

在下述版本验证通过:

  • DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530)
  • SDK: API12 (5.0.0.35(SP3))

HSP场景适配:

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

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

目录结构

lua 复制代码
|---- 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  # 安装使用方法         
相关推荐
坚果的博客14 小时前
坚果派已适配的鸿蒙版flutter库【持续更新】
flutter·华为·开源·harmonyos
NapleC15 小时前
HarmonyOS:Navigation实现导航之页面设置和路由操作
华为·harmonyos·navigation
HMSCore16 小时前
HarmonyOS SDK助力鸿蒙版今日水印相机,真实地址防护再升级
harmonyos
风中飘爻21 小时前
鸿蒙生态:鸿蒙生态校园行心得
华为·harmonyos
Otaku_尻男21 小时前
HarmonyOS 自定义RenderNode 绘图实战
android·面试·harmonyos
高心星2 天前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会2 天前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会2 天前
【仓颉三方库】工具类—— uuid4cj
harmonyos
__Benco2 天前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos