HarmonyOS使用RenderNode怎样实现裁剪成任意形状并且有阴影

HarmonyOS使用RenderNode怎样实现裁剪成任意形状并且有阴影

HarmonyOS
2024-08-09 11:11:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

可以使用arkUI控件的clip和shadow属性实现剪裁和阴影,再用BuildNode封装成FrameNode。

具体可以参考下面代码:

import { NodeController, BuilderNode, FrameNode, UIContext } from "@kit.ArkUI" 
class Params { 
  text: string = "" 
  constructor(text: string) { 
    this.text = text; 
  } 
} 
@Builder 
function buildText(params: Params) { 
  Text(params.text) 
    .fontSize(20) 
    .fontWeight(FontWeight.Bold) 
    .width(200) 
    .height(80) 
    .backgroundColor(Color.Orange) 
    .padding({ bottom: 10 }) 
    .shadow({ 
      radius: 30, 
      // offsetX: 60, 
      // offsetY: 60, 
      color: 0XFF00FF00 
    }) 
    .clip(new Path({ commands: "M60 0 A60 60 60 0 0 0 60 L0 150 A60 60 60 0 0 60 210 L270 210 L300 240 L330 210 L540 210 A60 60 60 0 0 600 150 L600 60 A60 60 60 0 0 540 0 Z" })) 
} 
class TextNodeController extends NodeController { 
  private textNode: BuilderNode<[Params]> | null = null; 
  private message: string = "DEFAULT"; 
  constructor(message: string) { 
    super(); 
    this.message = message; 
  } 
  makeNode(context: UIContext): FrameNode | null { 
    this.textNode = new BuilderNode(context); 
    this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message)) 
    return this.textNode.getFrameNode(); 
  } 
} 
@Entry 
@Component 
struct Index { 
  @State message: string = "hello" 
  build() { 
    Row() { 
      Column() { 
        NodeContainer(new TextNodeController('BuilderNode实现')) 
          .width('100%') 
          .height(100) 
          .backgroundColor('#FFF0F0F0') 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-08-09 17:31:10
相关问题
HarmonyOS 如何实现阴影边框效果?
697浏览 • 1回复 待解决
如何实现组件的阴影效果
939浏览 • 1回复 待解决
如何实现图片裁剪、旋转
472浏览 • 1回复 待解决
HarmonyOS tabs阴影效果
712浏览 • 1回复 待解决
HarmonyOS RenderNode的单位换算
25浏览 • 1回复 待解决
如何去除Checkbox的阴影效果
1969浏览 • 1回复 待解决
HarmonyOS renderNode的frame设置问题
569浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪控件?
72浏览 • 1回复 待解决
想要实现一个图片裁剪的功能
407浏览 • 1回复 待解决
HarmonyOS 怎样实现开屏动画或图片?
377浏览 • 1回复 待解决
HarmonyOS 图像裁剪的demo
310浏览 • 1回复 待解决