新增svg图片demo示例

Signed-off-by: liuhaikang <893370936@qq.com>

entry/src/main/ets/pages/svgTestCasePage.ets

@@ -18,7 +18,8 @@ import {SVGParseImpl} from '@ohos/imageknife'
 @Component
 struct svgTestCasePage {
 
-  @State pixels:PixelMap = undefined
+  @State svgSamplePixelMap:PixelMap = undefined
+  @State svgIconPixelMap:PixelMap = undefined
 
   build() {
     Scroll() {
@@ -32,7 +33,7 @@ struct svgTestCasePage {
                   console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
                   let svgImpl = new SVGParseImpl();
                   svgImpl.parseSvg(data.buffer).then((pixelmap)=>{
-                    this.pixels = pixelmap;
+                    this.svgSamplePixelMap = pixelmap;
                   })
                 })
                 .catch(err => {
@@ -46,7 +47,36 @@ struct svgTestCasePage {
 
         Text("下面为展示图片区域").margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
-          Image(this.pixels)
+          Image(this.svgSamplePixelMap)
+            .width(400)
+            .height(400)
+            .backgroundColor(Color.Pink)
+        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
+
+        Flex({direction:FlexDirection.Row}){
+          Button("加载SVG图片")
+            .onClick(()=>{
+
+              globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.iconsvg').id)
+                .then(data => {
+                  console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
+                  let svgImpl = new SVGParseImpl();
+                  svgImpl.parseSvg(data.buffer).then((pixelmap)=>{
+                    this.svgIconPixelMap = pixelmap;
+                  })
+                })
+                .catch(err => {
+                  console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
+                })
+
+            }).margin({left:5}).backgroundColor(Color.Blue)
+
+        }
+        .margin({top:15})
+
+        Text("下面为展示图片区域").margin({top:5})
+        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
+          Image(this.svgIconPixelMap)
             .width(400)
             .height(400)
             .backgroundColor(Color.Pink)

entry/src/main/resources/base/media/iconsvg.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="120"
+     height="120"
+     viewBox="0 0 120 120">
+    <g
+        fill="none"
+        fill-rule="evenodd">
+        <rect
+            width="120"
+            height="120"
+            fill="#EBF6FF"
+            rx="36"/>
+        <path
+            fill="#0D94FF"
+            d="M34.8570007,90 C31.2718452,90 31,87.5384766 31,83.6433 C31,81.6273 32.69806,79.43805 32.8349478,79.26165 C35.7356645,75.5793 40.6212536,70.94565 47.4819375,68.013 L49.5691137,67.1195667 C52.6549729,65.76915 53.7309722,64.968525 52.1067881,62.56665 L50.9957093,60.943811 C50.0636406,59.5637235 49.0105175,57.87756 48.0979324,55.66815 C46.7942395,52.54335 45.7643221,48.36015 45.7643221,42.47595 C45.7643221,31.5801808 53.0821878,27.2247062 59.7857289,27.0085121 L60.313535,27 L60.6275532,27 C67.4686817,27 74.9018586,31.29345 74.9018586,42.47595 C74.9018586,48.36015 73.8719412,52.54335 72.5682483,55.66815 C71.2645554,58.82445 69.67405,60.9129 68.5593926,62.56665 C66.6103717,65.4489 68.5496149,66.02535 73.1842432,68.013 C80.0449271,70.94565 84.9305162,75.5793 87.8312329,79.26165 L88.1022219,79.6308199 C88.6178886,80.3683446 89.6666667,82.0593 89.6666667,83.6433 C89.6666667,87.11775 89.7147418,90 86.1295863,90 L34.8570007,90 Z"/>
+    </g>
+</svg>