【鸿蒙实战开发】如何将SVG插入到画布中

本文会详细介绍如何将矢量图（SVG）插入画布，矢量图需要被编码为base64，然后直接保存到js代码中。如显示动物列表的js代码如下图所示：

每一个svg是一个数组元素。最终的SVG显示界面如下图所示。

这个界面是使用InsertImages组件实现的。。

InsertImages类实现的详细解释与注释

代码解释

这段代码实现了一个用于选择图像的组件 InsertImages。该组件由一组按钮和一个Webview组成，按钮用于选择不同的图像类别，Webview用于显示图像列表。用户可以点击按钮从不同的图像类别中选择图像，并将选择的结果通过回调函数返回。

详细代码注释

// 从相对路径引入常量，这些常量定义了一些面板和按钮的背景颜色
import { PANEL_BACKGROUND_COLOR, PANEL_BUTTON_BACKGROUND_COLOR } from '../common/const'

// 引入ArkWeb中的webview模块
import { webview } from '@kit.ArkWeb';

// 引入常用的工具函数，如去除引号
import { trimQuotes } from '../common/common';

// 使用@Entry标记这个组件为入口组件
@Entry

// 声明一个组件InsertImages
@Component
export struct InsertImages {

  // 可选的回调函数，当选择图像时触发，传递图像列表的名称和索引
  imageSelected?: (imageListName: string, imageListIndex: number) => void;

  // 可选的回调函数，当图像列表关闭时触发
  imageListClosed?: () => void;

  // 声明一个WebviewController，用于控制Webview组件
  controller1: webview.WebviewController = new webview.WebviewController();

  // 声明一个状态变量formatName，用于存储格式名称
  @State formatName: string = '';

  // build方法定义了组件的UI结构
  build() {
    // 创建一个Column组件，用于垂直布局
    Column() {

      // 创建一个Row组件，用于水平布局
      Row() {

        // 再次创建一个Column组件，内嵌的Column，用于放置多个按钮
        Column() {

          // 创建一个Row组件，用于放置选择按钮和关闭图标
          Row() {

            // 创建一个按钮组件，用于触发选择图像的操作
            Button({ type: ButtonType.Normal }) {
              // 按钮内部的文本
              Text('选择')
                .fontSize(16) // 设置字体大小
                .fontColor('#FFFFFF') // 设置字体颜色
                .width('100%') // 设置宽度为100%
                .height('100%') // 设置高度为100%
                .textAlign(TextAlign.Center) // 设置文本居中对齐
            }
            .borderRadius(5) // 设置按钮的圆角半径
            .width(60) // 设置按钮的宽度
            .height(30) // 设置按钮的高度
            .backgroundColor('#CC0000') // 设置按钮的背景颜色
            .onClick(() => { // 设置按钮点击事件

              // 调用Webview中的JavaScript函数获取选中的图像数据
              this.controller1.runJavaScript(`getSelectedImageData()`)
                .then(data => {

                  if (data === '') { // 如果没有选中任何图像
                    // 显示一个提示对话框，告知用户未选择图像
                    AlertDialog.show({
                      message: '还没有选择图像',
                      alignment: DialogAlignment.Center,
                      primaryButton: {
                        value: '关闭',
                        action: () => {
                          // 对话框关闭时不执行任何操作
                        }
                      }
                    })
                  } else {

                    // 将返回的JSON字符串解析为数组
                    let parsedArray: [string, number];
                    try {
                      parsedArray = JSON.parse(data);
                      // 提取图像列表名称和索引
                      let imageListName: string = parsedArray[0];
                      let imageListIndex: number = parsedArray[1];

                      // 如果imageSelected回调函数存在，则调用该回调函数
                      if (this.imageSelected) {