图片边框borderImage介绍

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

HarmonyOS
2024-05-26 17:28:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xdpan

使用的核心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, 
  }) 
// ...

实现效果

分享
微博
QQ
微信
回复
2024-05-27 22:09:06
相关问题
ArkUI(ets)怎么实现右边框
2284浏览 • 1回复 待解决
NAPI介绍(九) - gdb调试
189浏览 • 1回复 待解决
类似边框颜色线性渐变
267浏览 • 1回复 待解决
应用文件分享功能介绍
510浏览 • 0回复 待解决
如何实现渐变的圆角边框
905浏览 • 1回复 待解决
怎么给组件设置下边框
5448浏览 • 1回复 待解决
ArkTS层实例化与单例介绍
643浏览 • 1回复 待解决
HarmonyOS是否.9 图片
542浏览 • 1回复 待解决
RichEditor添加、删除、重载图片
409浏览 • 1回复 待解决
如何设置窗口启动图片
885浏览 • 1回复 待解决
如何实现图片点击跳转?
4102浏览 • 1回复 待解决