图片边框borderImage介绍

使用的核心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枚举说明

•  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, 
  }) 
// ...

实现效果