#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析6：如何将SVG插入到画布中原创

蒙娜丽宁

发布于 2024-7-31 15:10

浏览

0收藏

本文会详细介绍如何将矢量图（SVG）插入画布，矢量图需要被编码为base64，然后直接保存到js代码中。如显示动物列表的js代码如下图所示：
#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析6：如何将SVG插入到画布中-鸿蒙开发者社区
每一个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) {
                        this.imageSelected(imageListName, imageListIndex);
                      }
                    } catch (e) {
                      console.error("Error parsing JSON string:", e); // 捕捉解析错误并输出日志
                    }
                  }
                });
            })

            // 创建一个关闭图像列表的图标，点击时触发关闭事件
            Image($r('app.media.close')).width(20).height(20)
              .margin({ left: 5, top: 0 }) // 设置图标的左边距
              .onClick(() => {
                if (this.imageListClosed) { // 如果imageListClosed回调函数存在，则调用该回调函数
                  this.imageListClosed();
                }
              })
          }
          .width('100%') // 设置行宽度为100%
          .height(30) // 设置行高度为30
          .margin({ bottom: 15, top: 10 }) // 设置行的上下边距
          .justifyContent(FlexAlign.Center) // 设置内容居中对齐

          // 在Row下创建一个Text组件，用于显示分隔线
          Text() {
          } 
          .width('100%') // 设置分隔线的宽度为100%
          .height(2) // 设置分隔线的高度
          .backgroundColor('#CCCCCC') // 设置分隔线的背景颜色
          .margin({ bottom: 15 }) // 设置分隔线的下边距
          
          // 以下是创建多个按钮的代码，每个按钮对应一个图像类别，点击时更新Webview中的图像列表
          
          // 创建一个“动物”按钮
          Button({ type: ButtonType.Normal }) {
            Text('动物')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("animals",5)`);
          })

          // 创建一个“人物”按钮
          Button({ type: ButtonType.Normal }) {
            Text('人物')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("persons",5)`);
          })

          // 创建一个“美食”按钮
          Button({ type: ButtonType.Normal }) {
            Text('美食')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("finefoods",5)`);
          })

          // 创建一个“水果”按钮
          Button({ type: ButtonType.Normal }) {
            Text('水果')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("fruits",5)`);
          })

          // 创建一个“建筑”按钮
          Button({ type: ButtonType.Normal }) {
            Text('建筑')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("buildings",5)`);
          })

          // 创建一个“交通工具”按钮
          Button({ type: ButtonType.Normal }) {
            Text('交通工具')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("vehicles",5)`);
          })

          // 创建一个“星辰大海”按钮
          Button({ type: ButtonType.Normal }) {
            Text('星辰大海')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("stars",5)`);
          })

          // 创建一个“植物”按钮
          Button({ type: ButtonType

.Normal }) {
            Text('植物')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("plants",5)`);
          })

          // 创建一个“基础图形”按钮
          Button({ type: ButtonType.Normal }) {
            Text('基础图形')
              .fontSize(16)
              .fontColor('#FFFFFF')
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .borderRadius(5)
          .width('100%')
          .height(30)
          .margin({ bottom: 10 })
          .onClick(() => {
            this.controller1.runJavaScript(`updateImageList("basics",5)`);
          })
        }
        .backgroundColor(PANEL_BACKGROUND_COLOR) // 设置内嵌Column的背景颜色
        .border({ width: 0, color: '#000000' }) // 设置边框宽度和颜色
        .height('100%') // 设置高度为100%
        .padding({ left: 10, right: 10 }) // 设置左右内边距
        .width(100) // 设置宽度为100
        
        // 创建另一个Column组件用于放置Webview
        Column() {
          // 创建一个Webview组件，用于展示图像列表
          Web({ src: $rawfile('photo_studio/system_image_list.html'), controller: this.controller1 })
            .size({ width: '100%', height: '100%' }) // 设置Webview的大小为100%
        }
        .width('100%') // 设置宽度为100%
        .height('100%') // 设置高度为100%
      }
      .width('100%') // 设置外部Row的宽度为100%
      .height('100%') // 设置外部Row的高度为100%
    }
    .width('100%') // 设置最外层Column的宽度为100%
    .height('100%') // 设置最外层Column的高度为100%
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.

代码的原理和实现过程

这个组件的主要功能是提供一个界面，让用户可以从多个预定义的图像类别中选择图像，并且通过与Webview的交互来展示不同类别的图像列表。

组件的结构：
- 使用ArkTS的UI组件（如Column、Row、Button等）来构建界面，包含一系列按钮和一个Webview。
- 每个按钮对应不同的图像类别，点击按钮时，通过WebviewController来执行JavaScript代码，以更新Webview中的图像列表。
事件处理：
- 使用onClick事件处理按钮点击，当用户点击某个类别按钮时，WebviewController会运行对应的JavaScript函数，更新Webview中的内容。
- 通过imageSelected和imageListClosed这两个可选的回调函数，组件可以在外部处理图像选择和列表关闭的逻辑。
Webview交互：
- WebviewController的runJavaScript方法用于在Webview中执行JavaScript代码，组件通过这种方式与Webview进行通信。
UI设计：
- 界面布局通过多个Column和Row组件实现，按钮的样式和布局使用了ArkTS的样式属性（如borderRadius、backgroundColor、margin等）。
- Webview组件显示图像列表的HTML页面，页面路径通过src属性指定。

这段代码展示了如何在ArkTS中构建一个复杂的UI组件，并结合Webview进行灵活的内容展示与交互。
在选择svg时，会调用imageSelected事件函数，该函数的代码如下：

imageSelected(imageListName: string, imageListIndex: number)
{  
     this.controller1.runJavaScript(`addSVGImage("${imageListName}",${imageListIndex});`).then(data => {
     
    });
   
    this.toggleInsertImagesPanel();
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

在上面的代码中，调用了用js实现的addSVGImage函数，这个函数是根据svg图像的索引将svg图像插入到画布中，代码如下：

function addSVGImage(imageList, index) {
    try {
        // 使用fabric.loadSVGFromString来加载SVG代码
        fabric.loadSVGFromString(window[imageList][index], function (objects, options) {
            var svg = fabric.util.groupSVGElements(objects, options);

            // 计算尺寸缩放比例以适应预定尺寸
            const scale = Math.min(
                150 / svg.width,
                150 / svg.height
            );
            svg.scale(scale).set({
                left: 20,
                top: 20
            });

            // 将SVG图像添加到canvas
            canvas.add(svg);
            canvas.renderAll();
        });

    } catch(e) {

    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

上面的代码使用了loadSVGFromString函数装载SVG图像，下面是对这个函数的详细解释。

`fabric.loadSVGFromString` 函数的原型和用法详解

fabric.loadSVGFromString 是 Fabric.js 库中用于从 SVG 字符串加载 SVG 图像的函数。Fabric.js 是一个强大的 JavaScript 库，用于在 HTML5 Canvas 上轻松绘制复杂的矢量图形和图片。

原型

fabric.loadSVGFromString(
  svgString: string,
  callback: (objects: fabric.Object[], options: object) => void,
  reviver?: (element: SVGElement, object: fabric.Object) => void
): void
1.
2.
3.
4.
5.

参数解释

svgString: string

描述: SVG 图像的字符串形式。这个字符串包含了完整的 SVG 定义，例如 <svg> 标签及其内容。
类型: string

示例:

const svgString = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>`;
1.
2.
3.
4.

callback: (objects: fabric.Object[], options: object) => void
- 描述: 一个回调函数，在 SVG 解析完成后调用。这个回调函数接收两个参数：
  - objects: Fabric.js 对象数组，每个对象代表解析后的 SVG 元素（例如，fabric.Circle，fabric.Rect 等）。
  - options: 包含一些额外的选项，如 SVG 的 width 和 height。
- 类型: function
- 示例:
```
function callback(objects, options) {
  const svgGroup = new fabric.Group(objects);
  canvas.add(svgGroup);
  canvas.renderAll();
}
1.
2.
3.
4.
5.
```
reviver: (element: SVGElement, object: fabric.Object) => void (可选)
- 描述: 一个可选的“复活器”函数，它在每个 SVG 元素被解析成 fabric.Object 对象之前调用。通过这个函数，你可以自定义每个对象的属性或行为。
- 类型: function
- 示例:
```
function reviver(element, object) {
  if (object.type === 'circle') {
    object.set({ fill: 'blue' });
  }
}
1.
2.
3.
4.
5.
```

返回值

返回值类型: void
描述: 该函数没有返回值，而是通过回调函数来处理解析后的对象和选项。

用法示例

以下是一个完整的例子，演示如何使用 fabric.loadSVGFromString 加载 SVG 字符串，并将其添加到 Fabric.js 的画布中。

// 创建一个 Fabric.js 画布
const canvas = new fabric.Canvas('canvas');

// SVG 字符串
const svgString = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>`;

// 加载 SVG 字符串
fabric.loadSVGFromString(svgString, function(objects, options) {
  // 创建一个组（Group），将解析出的对象添加到组中
  const svgGroup = new fabric.Group(objects);
  
  // 添加组到画布上
  canvas.add(svgGroup);
  
  // 渲染画布
  canvas.renderAll();
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

详细说明

SVG 解析: fabric.loadSVGFromString 函数内部使用浏览器的原生 SVG 解析能力，解析传入的 SVG 字符串，并将其转化为 Fabric.js 可以理解的对象模型。
异步操作: 这个函数是异步的，它不会立即返回解析结果，而是在完成解析后调用提供的回调函数。这意味着在解析过程中，主线程不会被阻塞，确保应用程序的响应性。
对象创建: 解析后的 SVG 元素被转化为 Fabric.js 的对象，如 fabric.Circle，fabric.Rect，fabric.Path 等。这些对象可以像其他 Fabric.js 对象一样进行操作和管理。
组管理: 解析出的对象通常会被分组（使用 fabric.Group），这样可以作为一个整体来管理。通过对组进行操作，可以轻松移动、缩放、旋转整个 SVG 图像。

使用场景

动态加载 SVG: 你可以从服务器或用户输入动态加载 SVG 内容，并将其显示在 Fabric.js 的画布上。
编辑 SVG: 解析后的 Fabric.js 对象可以直接编辑，允许你在应用程序中提供 SVG 图像的编辑功能。
导入外部图形: 将外部的矢量图形导入到你的 Fabric.js 画布中，以便进行进一步的操作或展示。

通过 fabric.loadSVGFromString，你可以轻松地将 SVG 数据集成到 Fabric.js 的绘图环境中，为创建复杂、可交互的矢量图形应用提供了便利。

分类

HarmonyOS

ArkUI / eTS

标签

harmonyos

已于2024-7-31 15:15:20修改

51CTO

51CTO博客

51CTO学堂

#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析6：如何将SVG插入到画布中原创

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

代码解释

详细代码注释

代码的原理和实现过程

`fabric.loadSVGFromString` 函数的原型和用法详解

原型

参数解释

返回值

用法示例

详细说明

使用场景

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析6：如何将SVG插入到画布中 原创

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

代码解释

详细代码注释

代码的原理和实现过程

fabric.loadSVGFromString 函数的原型和用法详解

原型

参数解释

返回值

用法示例

详细说明

使用场景

目录

订阅鸿蒙技术特刊，精选内容抢先看

#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析6：如何将SVG插入到画布中原创

`fabric.loadSVGFromString` 函数的原型和用法详解