尝试添加截图标注

anyremote/states/chatChannelStates.js

@@ -47,6 +47,12 @@ export const screenShareMetaData = computed(function () {
     }
 })
 
+export const isScreenShotByCurrentUser = computed(() => {
+    return chatChannelState.value.screenshotInitiatorId === userStates.value.currentUserId;
+})
+
+export const screenshotRecord = computed(() => Object.values(chatChannelState.value.screenshotRecord).map(a=>a.trim()).join(' '))
+
 export const allChattersInCompany = computed(function () {
     return userStates.value.onlineContacts
         .map(a=> {

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div :id="`RemoteVideo${ps.id}`" class="relative mb-4 flex-auto" @mousedown.capture="handleBlinkingStart">
+        <div :id="`RemoteVideo${ps.id}`" data-self="remote-main" ref="firstVideoToBeAttached" class="relative mb-4 flex-auto" @mousedown.capture="handleBlinkingStart">
             <div class="red-ball absolute z-[999]"
                  :style="{
                     top: `${q.yPos * 100}%`,
@@ -44,10 +44,10 @@
                 <global-icon :size="21" icon="swap"></global-icon>
                 <span class="mt-1 color-text-2">{{ isVoiceChatOnly ? '视频模式' : '语音模式' }}</span>
             </div>
-            <!-- <div class="w-[120px] h-[72px] item">
+            <div class="w-[120px] h-[72px] item" @click="startScreenShotDraw">
                 <global-icon icon="screenshot" :size="21"></global-icon>
-                <span class="mt-1 color-text-2">截图</span>
-            </div> -->
+                <span class="mt-1 color-text-2">{{!displayImageEditor ? '截图' : "正在截图"}}</span>
+            </div>
             <div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
                 <global-icon :size="21" icon="shared-screen"></global-icon>
                 <span class="mt-1 color-text-2">
@@ -69,18 +69,90 @@
             </div>
         </div>
     </div>
+    <image-editor
+        :before-cancel="beforeEndMarkHandle"
+        :pass-in-records="screenshotRecord"
+        :record-listener="recordListener"
+        :show-quit="isScreenShotByCurrentUser"
+        :start="displayImageEditor"
+        :target="firstVideoToBeAttached"
+        :url-image="chatChannelState.screenshotURL"
+        @cancel="reallyEndMarkHandle"
+        @first-paint-done="initialPaintDone"
+        @canvas-saved="paintSaved"
+    />
 </template>
 
 <script lang="ts" setup>
 import { useAnyR } from 'AnyR/index'
-import { isCurrentUserMuted, isUserHost, screenShareMetaData } from 'AnyR/states/chatChannelStates'
-import { onMounted, onUpdated, ref } from 'vue'
+import {
+    allOtherChattersIdSet,
+    isCurrentUserMuted,
+    isUserHost,
+    screenShareMetaData
+} from 'AnyR/states/chatChannelStates'
+import { onMounted, onUpdated, ref, h } from 'vue'
 import { userStates } from 'AnyR/states/wsStates'
-import {chatChannelState} from 'AnyR/states/chatChannelStates'
+import {chatChannelState, isScreenShotByCurrentUser, screenshotRecord} from 'AnyR/states/chatChannelStates'
+import ImageEditor from "AnyR/widgets/ImageEditor/imageEditor.vue"
+import { Modal, Button, Message } from '@arco-design/web-vue'
+import { otherTabClose } from 'AnyR/ws/eventTypes'
 
 const ps = defineProps<{
     id: any
-}>()
+}>();
+
+const firstVideoToBeAttached = ref()
+const displayImageEditor = ref(false)
+const recordListener = function(records: any) {
+    AnyR?.agora.continueMark(records);
+}
+function reallyEndMarkHandle() {
+    if (isScreenShotByCurrentUser.value) {
+        AnyR?.agora.endMark()
+    }
+    displayImageEditor.value = false;
+}
+function initialPaintDone(blob: any) {
+    if (!chatChannelState.value.screenshotInitiatorId && displayImageEditor.value) {
+        AnyR?.agora.startMark(blob, 'temp.png');
+        console.log('发送画画png完成')
+    }
+}
+function paintSaved(blob: any) {
+    AnyR?.agora.archiveMark(blob, 'temp.png');
+}
+async function beforeEndMarkHandle() {
+    if (isScreenShotByCurrentUser.value) {
+        return new Promise(function(resolve) {
+            Modal.warning({
+                title: "你是截图发起者，退出后将会要求其他用户一同退出，确认？",
+                content: () => h('div', {
+                    class: 'flex w-full items-center justify-center',
+                }, [
+                    h(Button, {
+                        size: 'small', type: "primary", status: "warning",
+                        onClick: () => resolve(true)
+                    }, '确定'),
+                    h(Button, {
+                        size: 'small', type: "primary",
+                        onClick: () => resolve(false)
+                    }, '取消')
+                ])
+            })
+        })
+    }
+    return true
+}
+
+function startScreenShotDraw() {
+    if (allOtherChattersIdSet.value.length === 0 || !document.querySelector('[data-self="remote-main"] video')) {
+        return Message.error("无截图目标")
+    }
+    if (!displayImageEditor.value && !chatChannelState.value.screenshotInitiatorId) {
+        displayImageEditor.value = true;
+    }
+}
 
 const blinkStart = ref(false)