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();

  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: 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

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/1655.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uni-app HBuilderX通过easycom省略import自动导入自定义组件

快速尝试 自HBuilderX 2.5.5起支持easycom组件模式。更新HBuilderX即可尝试。 easycom默认已启用,并对项目下的components和uni_modules目录开启自动扫描,对符合下面路径和命名规则的组件自动导入。 components/组件名/组件名.vue uni_modules/组件名/…

使用飞桨快速部署stable diffusion模型

这可以说是最快的部署stable diffusion模型的方法了,而且星河社区还有免费的GPU算力提供,这样再也不用担心没有算力了! 操作方法: # 安装相关库 pip install docarray0.21.0 pip install paddlehub# 初始化 from PIL import Imag…

踊跃参与,您有机会尊享300000水晶奖励!【AI书童】代言形象大投票活动开启~~~

【AI书童】运营官 未来智慧人工智能 2024-04-19 09:55 ✧ 快来选出你心目中的【AI书童】 ✦ 我们想为【AI书童】选择一个形象代言,使用【AI书童】软件生成了一部分形象照片。大家觉得哪个书童最合适呢?希望你们能给出宝贵的建议! 【AI书童…

手把手教你实现 OceanBase 数据到 Apache Doris 的便捷迁移|实用指南

作者|SelectDB 技术团队 作为广受认可的分布式数据库,OceanBase 已在众多企业关键业务系统中得到广泛应用。在 Apache Doris 社区,有众多用户选择基于 OceanBase 与 Apache Doris 以构建强大的数据处理与分析链路,本文将详细介绍如何便捷高效…

Java反序列化-CC3链

前言 前面的CC1与CC6链都是通过 Runtime.exec() 进行命令执行的。当服务器的代码将 Runtime放入黑名单的时候就不能使用了。 CC3链的好处是通过动态加载类的机制实现恶意类代码执行。 版本限制 jdk8u65Commons-Collections 3.2.1 动态类加载 loadClass -> 负责加载load…

38. UE5 RPG 修改火球术的攻击方向以及按住Shift攻击

在前面,我们实现了火球术火球的制作,能够在释放火球术时,角色将播放释放技能动画,并实现了对火球的目标的服务器同步功能。 我们先回忆一下之前完成的内容。 在前面,我们先做了一个Actor,用于承载发射的火…

集成学习-Bagging与随机森林回归

reg_fRFR() reg_tDTR()#实例化决策树 cvKFold(n_splits5,shuffleTrue,random_state1412)#实例化验证方式 result_tcross_validate(reg_t#要进行交叉验证的评估器,X,y,cvcv,scoringneg_mean_squared_error#评估指标,return_train_scoreTrue#是否返回训练分数,后面这几…

Git 原理及使用 (带动图演示)

文章目录 🌈 Ⅰ Git 安装🌙 01. Linux - centos 🌈 Ⅱ Git 工作区、暂存区和版本库🌙 01. 认识工作区、暂存区和版本库🌙 02. 使用 Git 管理工作区的文件 🌈 Ⅲ Git 基本操作🌙 01. 创建本地仓库…

动态Web项目讲解+Demo

web流程演示 请求路径 请求路径明确要请求的是哪个servlet 请求方式 servlet含有两种请求方式:doGet和doPost doGet&doPost 返回数据就是httpResponse,返回给success 参数 包含在request当中 成功 上述流程任何一步都没出问题,就会…

SpringBoot+layuimini实现左侧菜单动态展示

layuimini左侧菜单动态显示 首先我们看一下layuimini的原有菜单显示格式 {"homeInfo": {"title": "首页","href": "page/welcome-2.html?t2"},"logoInfo": {"title": "LAYUI MINI","…

cv2技术原理-图像旋转原理及手动实现

cv2技术原理-图像旋转原理及手动实现 1、图像旋转opencv实现2、cv2.getRotationMatrix2D函数解释3、数学原理推导旋转矩阵M4、手动计算旋转矩阵M5、旋转矩阵M的使用6、使用旋转矩阵M手动实现旋转功能 1、图像旋转opencv实现 图像旋转在对数据集数据增强(主要是随机…

Java语言——封装

一.封装的定义 在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部分包装、隐藏起来的方法。 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机访问…

linux|将用户加入白名单

一 用root用户找到etc\sudoers文件 cd etc 二 修改etc\sudoers 文件的权限 默认是只读的 修改为可写的 chmod uw sudoers 三 打开 sudoers文件,在Allow root to run any commands anywhere 后面 添加一条(把上面的一条内容复制下来 修改用户名即…

什么是程控电源?以及程控电源的工作原理与应用。

一、程控电源的简介: 程控电源是一种具有编程功能的电源设备,它可以通过外部控制来设定输出电压、电流的稳压、稳流或稳压/稳流模式,因此可以进行电压、电流、相位、频率、功率等参数的试验和检定。一些具体的产品特性包括微机控制、高精度、…

表达式求值(后缀表达式)(数据结构)

一、概念 算术表达式是由操作数(运算数)、运算符(操作符)、和界线符(括号)三部分组成,在计算机中进行算术表达式的计算是通过堆栈来实现的。 二后缀表达式的逻辑和实现方式(逆波兰…

电商平台数据有哪些?如何进行电商平台数据分析?(内附模板及工具)

在电商日常的贩卖工作中会产生大量的数据,如果你还不知道如何利用这些宝贵的数据指导未来的销售策略、增长销售额的话,就和我一起看下去吧!电商数据采集API接口包含哪些数据? 电商平台数据可以大致分为以下几个组成部分&#xff…

Java中的封装

package day32; ​ public class Person {private String name;private int age; ​public String getName() {return name;} ​public void setName(String name) {this.name name;} ​public int getAge() {return age;} ​public void setAge(int age) {if (age>120 || …

蚓链数字化营销系统与数字资产的关系

蚓链数字化营销系统是一种利用数字技术来实现营销目标的系统。它集成了多种数字营销工具和渠道,以收集、分析和利用客户数据,优化营销活动,并提高营销效果。 数字资产是一种新型的资产类别,它们以电子数据的形式存在,可…

笔试狂刷--Day3

大家好,我是LvZi,今天带来笔试狂刷--Day3 一.牛牛的快递 1.题目链接:牛牛的快递 2.分析: 简单的模拟 3.代码实现: import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner i…

计算机经典黑皮书分享

计算机经典黑皮书是一套计算机科学丛书,其中包含了多本计算机科学领域的经典教材 提供了全面的知识体系:黑皮书涵盖了计算机科学的多个领域,如计算机组成与设计、操作系统、数据库、人工智能等。它们深入浅出地介绍了相关领域的基本概念、原…