6_5-互动学堂场景-文档

• 1 Feature Overview
• 2 Usage Demo
• 3 Implementation Details
  • 3.1 IPLVHCDocumentLayout
  • 3.2 PLVHCMarkToolControllerLayout

1 Feature Overview

The document (PPT & Whiteboard) module includes features such as whiteboard, PPT display, and pen annotation. The entire interface of the document module is encapsulated in PLVHCDocumentLayout.

2 Usage Demo

To use the document module, simply add the PLVHCDocumentLayout layout to the Activity's layout and call its initialization method.

// PLVHCLiveHiClassActivity.java
private void initView() {
    // 文档布局
    plvhcDocumentLy = findViewById(R.id.plvhc_document_ly);
    // 初始化文档布局，传入初始化所需的参数
    plvhcDocumentLy.init(liveRoomDataManager);
}

Additionally, you can set up layout callback listeners to enable communication between different module layouts.

// IPLVHCDocumentLayout 设置监听器方法定义
/**
  * 设置view交互事件监听器
  *
  * @param listener 监听器
  */
void setOnViewActionListener(OnViewActionListener listener);

/**
  * view交互事件监听器
  */
interface OnViewActionListener {

    /**
      * 回调标注工具按钮状态变更
      *
      * @param showUndoButton   是否显示撤销按钮
      * @param showDeleteButton 是否显示删除按钮
      */
    void onChangeMarkToolOperationButtonState(boolean showUndoButton,
                                              boolean showDeleteButton);
}

3 Implementation Details

3.1 IPLVHCDocumentLayout

The document layout is a ViewGroup primarily composed of a WebView for displaying the whiteboard/PPT - IPLVDocumentContainerView, and a control bar overlaid on the WebView for managing annotation tools, pens, etc. - PLVHCMarkToolControllerLayout.

@Override
public void init(IPLVLiveRoomDataManager liveRoomDataManager) {
    // 初始化 MVP - View     
    initMvpView();
    // 初始化文档Webview
    initContainerView(liveRoomDataManager);
}

3.2 PLVHCMarkToolControllerLayout

The control bar is a skin layout that includes functions such as annotation tools, pens, text, eraser, and whiteboard movement. It does not directly manipulate the whiteboard/PPT WebView; instead, it calls the relevant methods provided by PLVHCDocumentLayout, and PLVHCDocumentLayout modifies the document WebView's state accordingly. The following code demonstrates how clicking the arrow annotation tool informs the WebView to switch to arrow annotation mode.

// PLVHCMarkToolControllerLayout.java
//初始化标注集合
markToolViewMap = mapOf(	
        // 箭头标注的view及其对应的枚举
        pair(PLVHCMarkToolEnums.MarkTool.ARROW, plvhcToolbarMarkToolArrowIv),
        // 此处省略其他代码
);
//设置标注的点击事件
foreach(markToolViewMap.entrySet(), new PLVSugarUtil.Consumer<Map.Entry<PLVHCMarkToolEnums.MarkTool, PLVRoundImageView>>() {
    @Override
    public void accept(Map.Entry<PLVHCMarkToolEnums.MarkTool, PLVRoundImageView> entry) {
        final PLVHCMarkToolEnums.MarkTool markTool = entry.getKey();
        final PLVRoundImageView view = entry.getValue();
        view.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!PLVHCMarkToolEnums.MarkTool.CLEAR.equals(markTool)) {
                    updateCurrentSelectedMarkTool(markTool);
                }
                if (onChangeMarkToolStateListener != null) {
                    // 标注工具类型变更回调触发
                    onChangeMarkToolStateListener.onChangeMarkTool(markTool);
                }
                hide();
            }
        });
    }
});


// PLVLSDocumentLayout.java
if (markTool != PLVHCMarkToolEnums.MarkTool.CLEAR) {
    lastSelectMarkTool = markTool;
    // 其他标注工具的处理逻辑
    containerView.sendEvent(new PLVChangeApplianceEvent(markTool.getAppliances()));
} else {
    // 清屏时的处理
}