鸿蒙NEXT版实战开发：Svg开发指南（绘制图形）

那只斑马不睡觉

于 2024-09-26 17:11:57 发布

阅读量84

点赞数 3

分类专栏： ArkUI OpenHarmony 鸿蒙5.0 文章标签： harmonyos 华为华为od 驱动开发华为云 ArkUI 嵌入式硬件

本文链接：https://blog.csdn.net/qq_39652397/article/details/142566439

版权

ArkUI 同时被 3 个专栏收录

65 篇文章 0 订阅

订阅专栏

鸿蒙5.0

65 篇文章 0 订阅

订阅专栏

OpenHarmony

31 篇文章 0 订阅

订阅专栏

往期鸿蒙全套实战精彩文章必看内容：

绘制图形

Svg组件可以用来绘制常见图形和线段，如矩形（<rect>）、圆形（<circle>）、线条(<line>）等。

在本场景中，绘制各种图形拼接组成一个小房子。

<!-- xxx.hml -->
<div class="container">
  <svg width="1000" height="1000">
    <polygon points="100,400 300,200 500,400" fill="red"></polygon>     //屋顶
    <polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon>   //烟囱
    <rect width="300" height="300" x="150" y="400" fill="orange">      //房子
    </rect>
    <rect width="100" height="100" x="180" y="450" fill="white">    //窗户
    </rect>
    <line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line>     //窗框
    <line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line>     //窗框
    <polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon>     //门
    <circle cx="380" cy="625" r="20" fill="black"></circle>      //门把手
  </svg>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}