图片边框borderImage介绍

ArkTS组件通用属性 boderImage(BorderImageOption) 用于在元素的边框上绘制图像。

HarmonyOS

单花红丝线

2024-05-26 17:28:58

1195浏览

回答 1

按赞同

按时间

计算机编程小强

使用的核心API

BorderImageOption 对象说明

source 图片边框的资源。类型：string | Resouce | linerGradient。注意：仅适用于容器组件。
slice 将图片边框划分为多个区域，设置每个区域的大小。类型：Length | EdgeWidths，默认值：0。注意：设置负值无效果。

区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。

区域 5-8 为边区域（edge region）。在最终的边框图像中重复 repeat、缩放或修改它们 width 以匹配元素的大小。

区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了 fill 为 true，则会将其用作元素的背景图像。

width 设置图片边框的宽度。类型：Length | EdgeWidths，默认值：0。角区域会等比放大或缩小。注意：设置负值无效果。
outset 设置图片边框相对于边框向外的偏移量。类型：Length | EdgeWidths，默认值：0。注意：设置负值无效果，超出最大尺寸则会被限制为100%。图片边框超出元素的部分会被截断
repeat 设置图片边框边区域的重复方式。类型：RepeatMode，默认值：RepeatMode.Stretch

RepeatMode枚举说明

名称	描述
RepeatMode.Repeat	边区域图像重复平铺在图片边框上，超出的部分会被裁剪
RepeatMode.Stretch	边区域图像拉伸平铺
RepeatMode.Round	边区域图像重复平铺在图片边框上。当不能整数次平铺时，根据情况放大或缩小图像。
RepeatMode.Space	边区域图像重复平铺在图片边框上。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

fill 设置边框图片中心区域是否填充元素背景。类型：boolean，默认值：false。

核心代码解释

// ... 
@State message: string = 'Hello World!' 
@State borderImageWidth: number = 30; 
@State borderImageSlice: number = 30; 
@State borderImageOutset: number = 0; 
@State borderImageRepeat: RepeatMode = RepeatMode.Stretch; 
@State borderImageFill: boolean = false; 
// ... 
Text(this.message) 
  .margin(15) 
  .padding(15) 
  .fontSize(30) 
  .borderImage({ 
    // 当前使用的是 90*90 .png 边框图片，位于resources/base/media文件夹下 
    source: $r("app.media.borderDiamonds"), 
    width: `${this.borderImageWidth}px`, 
    slice: `${this.borderImageSlice}px`, 
    outset: `${this.borderImageOutset}px`, 
    repeat: this.borderImageRepeat, 
  }) 
// ...1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

实现效果

2024-05-27 22:09:06

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

图片边框borderImage介绍

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