鸿蒙开源项目图形图像教程—如何实现svg格式图片的解析和渲染功能

本项目是基于开源项目BigBadaboom/androidsvg进行适用harmonyos的移植和开发的

1. 项目介绍

项目名称：androidsvg

所属系列：harmonyos的第三方组件适配移植

功能：

1. 实现svg格式图片的解析和渲染功能；
2. 支持更多的svg element和css样式；

项目移植状态：

1. 主要功能已经移植；
2. 添加了demo模块用于效果展示；

调用差异：暂无

编程语言：java

2. 集成指引

方式一

1. 下载或自行编译生成androidsvg的.har文件，文件路径为：./demo/libs/ohossvg-debug.har。
2. 自行编译时，需要注意要自行添加签名。
3. 导入你的harmonyos项目模块的**./libs**中。
4. 在模块下的build.gradle中确认依赖**./libs**下的.har包，

   implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])。

5. 在代码中使用。

方式二：

1. 在根目录的build.gradle文件中添加mavenCentral()：

   // Top-level build file where you can add configuration options common to all sub-projects/modules.
   ...
   buildscript {
       repositories {
           ...
           mavenCentral()
       }
       ...
   }
   
   allprojects {
       repositories {
           ...
           mavenCentral()
       }
   }

2. 在module目录下的build.gradle文件中添加``

   ...
   dependencies {
       ...
       implementation 'com.gitee.ts_ohos:androidsvg-for-ohos:1.0.1'
   }

3. 使用说明

更多用法参考本项目的demo，原项目Java Doc与OHOS的文档。 **Java doc : ** https://gitee.com/ts_ohos/androidsvg-for-ohos/tree/ohos_main/doc 主要用法如下：

/** SVG Reading */

/** Generate SVG obj from InputStream. */
public static SVG getFromInputStream(java.io.InputStream is)
 throws SVGParseException

/** Generate SVG obj from svg String. */
public static SVG getFromString(java.lang.String svg)
 throws SVGParseException

/** Generate SVG obj from hap resource. */
public static SVG getFromResource(Context context, int resourceId)
 throws SVGParseException

/** Generate SVG obj from hap rawfile resource. */ 
public static SVG getFromAsset(ResourceManager resManager, String filename)
 throws SVGParseException, IOException

/** SVG Rendering */

/** Render SVG obj to a Picture obj. */
public void renderToCanvas(Canvas canvas) 
public void renderToCanvas(Canvas canvas, RectF viewPort)

/** Render SVG obj to a Canvas obj. */
public void renderToCanvas(Canvas canvas)
public void renderToCanvas(Canvas canvas, RectF viewPort)

/** Resolving references to external files. */
public class CachingImageLoader extends SVGExternalFileResolver {
    private static final String RESOURCE_PRE_FIX = "resources/rawfile/";
    private ResourceManager assetManager;
    private HashMap<String, PixelMap> cache = new HashMap<>();

    /**
     * CachingImageLoader constructor
     *
     * @param assetManager ResourceManager obj
     */
    public CachingImageLoader(ResourceManager assetManager) {
        super();
        this.assetManager = assetManager;
    }

    /**
     * Attempt to find the specified image file in the "assets" folder and return a decoded Bitmap.
     */
    @Override
    public PixelMap resolveImage(String filename) {
        String rawFileName = RESOURCE_PRE_FIX + filename;

        // Ignore invalid requests
        if (rawFileName.isEmpty()) {
            return null;
        }

        // Check file is in cache first
        if (cache.containsKey(rawFileName)) {
            return cache.get(rawFileName);
        }
        // Try loading it from assets folder
        try {
            // Get the image as an InputStream
            InputStream istream = assetManager.getRawFileEntry(rawFileName).openRawFile();

            // Attempt to decode it
            PixelMap image = ImageSource.create(istream, new ImageSource.SourceOptions())
                    .createPixelmap(new ImageSource.DecodingOptions());

            // Store it in the cache
            cache.put(rawFileName, image);
            return image;
        } catch (IOException ex) {
            return null;
        }
    }
}

4. 效果演示

1. 解析和渲染svg到pixelmap 2. 解析和渲染svg，添加css样式 3. 解析和渲染svg，并使用SVGImgeView显示，结合AnimatorValue和css样式增加动画效果 4. 解析和渲染svg，并使用SVGImgeView显示，结合AnimatorValue和css样式增加动画效果。并在svg中解析引用的其他静态图片。

*注 : demo中的图片透明度渐变效果暂无效果

5. 版本迭代

• v1.0.0 基于原项目最新版本，初次提交。
• v1.0.1 更新harmonyos API至5。

6. 版本和许可信息

• Apache License 2.0
• https://gitee.com/ts_ohos/androidsvg-for-ohos/blob/ohos_main/LICENSE

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

最后

如果你想快速提升鸿蒙技术，那么可以直接领取这份包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）

1.鸿蒙核心技术学习路线

​

2.大厂面试必问面试题

​

3.鸿蒙南向开发技术

​

 4.鸿蒙APP开发必备

​

 5.HarmonyOS Next 最新全套视频教程

​

 6.鸿蒙生态应用开发白皮书V2.0PDF

​

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击 鸿蒙Next全套VIP学习资料→免费领取（安全链接，放心点击）