HarmonyOS Next开发学习手册——绘制几何图形 (Shape)

绘制组件用于在页面绘制图形,Shape组件是绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。

创建绘制组件

绘制组件可以由以下两种形式创建:

  • 绘制组件使用Shape作为父组件,实现类似SVG的效果。接口调用为以下形式:
Shape(value?: PixelMap)

该接口用于创建带有父组件的绘制组件,其中value用于设置绘制目标,可将图形绘制在指定的PixelMap对象中,若未设置,则在当前绘制目标中进行绘制。

Shape() {
  Rect().width(300).height(50)
}
  • 绘制组件单独使用,用于在页面上绘制指定的图形。有7种绘制类型,分别为 Circle 、 Ellipse (椭圆形)、 Line (直线)、 Polyline (折线)、 Polygon (多边形)、 Path (路径)、 Rect (矩形)。以Circle的接口调用为例:
Circle(options?: {width?: string | number, height?: string | number}

该接口用于在页面绘制圆形,其中width用于设置圆形的宽度,height用于设置圆形的高度,圆形直径由宽高最小值确定。

Circle({ width: 150, height: 150 })

形状视口viewport

viewPort{ x?: number | string, y?: number | string, width?: number | string, height?: number | string }

形状视口viewport指定用户空间中的一个矩形,该矩形映射到为关联的SVG元素建立的视区边界。viewport属性的值包含x、y、width和height四个可选参数,x和y表示视区的左上角坐标,width和height表示其尺寸。

以下3个示例讲解viewport具体用法:

  • 通过形状视口对图形进行放大与缩小。
class tmp{
  x:number = 0
  y:number = 0
  width:number = 75
  height:number = 75
}
let viep:tmp = new tmp()
class tmp1{
  x:number = 0
  y:number = 0
  width:number = 300
  height:number = 300
}
let viep1:tmp1 = new tmp1()
// 画一个宽高都为75的圆
Text('原始尺寸Circle组件')
Circle({width: 75, height: 75}).fill('#E87361')

Row({space:10}) {
  Column() {
    // 创建一个宽高都为150的shape组件,背景色为黄色,一个宽高都为75的viewport。用一个蓝色的矩形来填充viewport,在viewport中绘制一个直径为75的圆。
    // 绘制结束,viewport会根据组件宽高放大两倍
    Text('shape内放大的Circle组件')
    Shape() {
      Rect().width('100%').height('100%').fill('#0097D4')
      Circle({width: 75, height: 75}).fill('#E87361')
    }
    .viewPort(viep)
    .width(150)
    .height(150)
    .backgroundColor('#F5DC62')
  }
  Column() {
    // 创建一个宽高都为150的shape组件,背景色为黄色,一个宽高都为300的viewport。用一个绿色的矩形来填充viewport,在viewport中绘制一个直径为75的圆。
    // 绘制结束,viewport会根据组件宽高缩小两倍。
    Text('Shape内缩小的Circle组件')
    Shape() {
      Rect().width('100%').height('100%').fill('#BDDB69')
      Circle({width: 75, height: 75}).fill('#E87361')
    }
    .viewPort(viep1)
    .width(150)
    .height(150)
    .background
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值