水印组件

IMKit 提供设置页面水印组件的能力。

设置水印组件

IMKit 支持设置水印组件配置，SDK 根据设置的配置决定哪些页面展示水印。

目前水印组件仅支持 CombinePage 合并转发页面生效。

接口介绍

TypeScript

/**
 * 设置水印组件的自定义配置
 *
 * # 重要
 *```
 * 一. WatermarkComponentConfig 参数说明
 *  1. 组件标识 `identifier: ComponentIdentifier`
 *     支持的类型参照 `ComponentIdentifier`。
 *  2. 组件UI `component: WrappedBuilder<[WatermarkComponentData]> | null`，
 *     WatermarkComponentData代表透传给自定义组件的数据，使用说明见其注释。
 *  3.水印生效的页面 `page: WatermarkPageIdentifier[]`
 *     支持的类型参照 `WatermarkPageIdentifier`，如果为空则设置失败。
 *```
 *
 * # 示例
 *```
 * // 设置接口
 * let WatermarkComponent: WatermarkComponentConfig = {
 *   page: [WatermarkPageIdentifier.CombinePage],
 *   identifier: ComponentIdentifier.WatermarkComponent,
 *   component:wrapBuilder(buildCustomWatermarkComponent)
 * }
 * RongIM.getInstance().conversationService().setWatermarkComponentConfig(WatermarkComponent)
 *
 * // 组件
 * @Builder
 * export function buildCustomWatermarkComponent(data: WatermarkComponentData) {
 *   CustomWatermarkComponent({ context: data.context, convId: data.convId})
 * }
 *
 * @Component
 * export struct CustomWatermarkComponent {
 *  @Prop context: Context;
 *  @Prop convId: ConversationIdentifier | undefined;
 *  @State textArray: Array<number> = new Array(50).fill(0).map((_: number, index) => index + 1);
 *
 *   build() {
 *     Flex({ wrap: FlexWrap.Wrap }) {
 *       ForEach(this.textArray, (item: number, index: number) => {
 *         Text("默认水印文本")
 *           .fontSize(14)
 *           .fontColor("#999999")
 *           .opacity(0.15)
 *           .rotate({ angle: -15 })
 *           .margin({
 *             top: 40,
 *             bottom: 40,
 *             left: 20 + (index % 4 === 0 ? 0 : 40),
 *             right: 20
 *           })
 *       }, (item: number) => item.toString())
 *     }.size({ width: '100%', height: '100%' }).backgroundColor(Color.Transparent)
 *   }
 * }
 *```
 *
 * @param componentConfig 组件配置，参照 `WatermarkComponentConfig`.如果 `page` 为空则设置失败。
 * @since 1.7.0
 */
setWatermarkComponentConfig(componentConfig: WatermarkComponentConfig): void;


/**
 * 水印组件配置
 * @since 1.7.0
 */
export interface WatermarkComponentConfig extends BaseComponentConfig<[WatermarkComponentData]> {
  /**
   * 设置水印生效的页面，水印支持的页面参照 `WatermarkPageIdentifier`。
   */
  page: WatermarkPageIdentifier[],
}

/**
 * 水印自定义组件数据，封装必要的参数透传给自定义组件
 * @since 1.7.0
 */
export class WatermarkComponentData {
  /**
   * 上下文
   */
  context: Context | undefined;
  /**
   * 会话标识，可能为undefined
   */
  convId: ConversationIdentifier | undefined;
}


/**
 * 水印页面标识，定义了支持展示水印的页面。
 * @since 1.7.0
 */
export enum WatermarkPageIdentifier {
  /**
   * 合并转发页面
   */
  CombinePage = 1,
}

示例代码

TypeScript

import {
  WatermarkPageIdentifier,
  RongIM,
  WatermarkComponentConfig,
  WatermarkComponentData
} from '@rongcloud/imkit';


@Builder
export function buildCustomWatermarkComponent(data: WatermarkComponentData) {
  CustomWatermarkComponent({ context: data.context, convId: data.convId})
}

@Component
export struct CustomWatermarkComponent {
  @Prop context: Context;
  @Prop convId: ConversationIdentifier | undefined;
  @State textArray: Array<number> = new Array(50).fill(0).map((_: number, index) => index + 1);

  build() {
    Flex({ wrap: FlexWrap.Wrap }) {
      ForEach(this.textArray, (_item: number, index: number) => {
        Text("默认水印文本")
          .fontSize(14)
          .fontColor("#999999")
          .opacity(0.15)
          .rotate({ angle: -15 })
          .margin({ 
            top: 40,
            bottom: 40,
            left: 20 + (index % 4 === 0 ? 0 : 40),
            right: 20
          })
      }, (item: number) => item.toString())
    }.size({ width: '100%', height: '100%' }).backgroundColor(Color.Transparent)
  }
}

let WatermarkComponent: WatermarkComponentConfig = {
  identifier: ComponentIdentifier.WatermarkComponent,
  component:wrapBuilder(buildCustomWatermarkComponent),
  page: [WatermarkPageIdentifier.CombinePage]
}
RongIM.getInstance().conversationService().setWatermarkComponentConfig(WatermarkComponent)