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

HarmonyOS

Heiang

2024-08-09 11:11:28

浏览

回答 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%') 
  } 
}