HarmonyOS：统一拖拽

一、概述

   拖拽操作是一种直观且高效的数据传输方式，它答应用户通过标准手势（包括用手指、鼠标或触控笔按住并移动）在应用步伐之间及内部进行数据传输。

拖拽功能不仅操作便捷，还能与多种系统本领深度融合，拓展出更为广泛的应用场景。例如，跨设备拖拽让用户能在差别设备间无缝传输数据，跨窗口拖拽提拔了多任务处理的机动性。此外，基于拖拽操作还可以开发出更多创新性的应用场景，如AI智能识别、水印添加等，这些创新性的功能接入统称为“统一拖拽”。
    下面将介绍几种典型拖拽场景及其具体实现方案，帮助开发者更好地明确和应用拖拽技术。

通过设置组件的拖拽相应，可以自定义拖出数据、拖入数据和拖拽背板图，实现如下场景：
  

• 拖拽图像增加水印：为拖拽的图像添加水印，水印内容为图像的拖拽时间。开发者可以在应用时根据需求自定义水印内容，
  如标志拖拽图片的来源信息，为图像管理与溯源提供便利。
  
• 自定义拖拽背板图：将拖拽中的背板图设置为自定义数据内容。开发者可根据个性化需求打造独特的拖拽视觉结果。
  
• AI识别拖拽内容：通过在吸收拖拽内容时增加AI识别功能，使得只能表现文字的组件可以吸收图片拖拽并表现图片中的文字信息。开发者可以将此本领应用于拖拽识图搜索。
  

    将拖拽框架与系统的分屏本领、键鼠穿越本领、小艺及中转站联合，可以实现如下场景：
   

• 分屏拖拽：演示了分屏拖拽的功能，可以在分屏中打开两个差别的应用，实现跨应用拖拽。
  
• 跨设备拖拽：演示了基于键鼠穿越本领的跨设备拖拽，可以在平板和PC/2in1设备中使用此功能以直观便捷地交换数据。
  
• 拖入小艺和中转站：演示了小艺和中转站与拖拽框架联合的本领，可以利用中转站暂存拖拽内容或进行跨设备拖拽，也可以利用小艺的AI对话式分析本领处理拖拽内容。
  

  二、实现原理

   拖拽流程可以分为三部分：发起拖拽、拖拽中和释放拖拽。此中，拖出方通过 draggable() 和 onDragStart() 等接口处理拖出数据，拖入方通过allowDrop()和onDrop()等接口处理拖入数据，拖拽数据使用UDMF统一数据对象UnifiedData 进行封装。下面，将按照这三个部分依次介绍拖拽的基础实现。
    拖拽流程展示图如下：

1. 发起拖拽

2. 拖拽中

3. 释放拖拽

  拖拽图片示例代码

1. import { SubHeader, TextModifier } from '@kit.ArkUI';
2. import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';
4. @Component
5. struct TestDragImage {
6.   @State uri: string = '';
7.   @State a_blockArr: string[] = [];
8.   @State targetImage: string = '';
9.   @State a_visible: Visibility = Visibility.Visible;
10.   @State dragSuccess: Boolean = false;
11.   @State primaryModifier: TextModifier =
12.     new TextModifier().fontColor(Color.Gray).fontSize(18).fontWeight(FontWeight.Medium);
14.   build() {
15.     Column() {
16.       SubHeader({
17.         // 子标题，用于列表项顶部，将该组列表划分为一个区块
18.         primaryTitle: '拖拽图片',
19.         primaryTitleModifier: this.primaryModifier
20.       })
21.       Image($r('app.media.mount'))
22.         .width('342vp')//图片的显示尺寸是否跟随图源尺寸。
23.           // 默认值：false
24.           // 说明：
25.           // 当不设置fitOriginalSize或者设置fitOriginalSize为false时，组件显示大小不跟随图源大小。
26.           // 当设置fitOriginalSize为true时，组件显示大小跟随图源大小。
27.         .fitOriginalSize(true)
28.         .borderRadius(8)
29.         .visibility(this.a_visible)
30.         .draggable(true)
31.         .onDragStart((event: DragEvent) => { // 拖拽中
32.           console.log("开始拖拽图片了 onDragStart");
33.         })
34.         .onDragEnd((event: DragEvent) => {
35.           console.log("开始拖拽图片了 onDragEnd");
36.           let ret = event.getResult();
37.           if (ret === 0) {
38.             console.log("拖拽图片 enter ret === 0");
39.           } else {
40.             console.log("拖拽图片 enter ret != 0");
41.             this.a_visible = Visibility.Visible;
42.           }
43.         })
44.       SubHeader({
45.         // 子标题，用于列表项顶部，将该组列表划分为一个区块
46.         primaryTitle: '允许图片释放区',
47.         primaryTitleModifier: this.primaryModifier
48.       })
49.       Column() {
50.         Image(this.targetImage)
51.           .height('193vp')
52.           .fitOriginalSize(true)
53.           .constraintSize({ maxWidth: '100%' })
54.           .borderRadius(8)
55.       }
56.       .height('193vp')
57.       .width('342vp')
58.       .constraintSize({ maxWidth: '100%' })
59.       .backgroundColor(Color.Gray)
60.       .borderRadius(8)
61.       .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
62.       .onDrop((event?: DragEvent) => {
63.         let dragData: UnifiedData = (event as DragEvent).getData() as UnifiedData;
64.         if (dragData !== undefined) {
65.           let arr: Array<unifiedDataChannel.UnifiedRecord> = dragData.getRecords();
66.           if (arr.length > 0) {
67.             console.log("拖拽图片 dragData 不为空");
68.             this.targetImage = (arr[0] as unifiedDataChannel.Image).imageUri
69.           } else {
70.             console.log("拖拽图片 dragData arr is null ");
71.           }
72.         } else {
73.           console.log("拖拽图片 dragData  is undefined");
74.         }
75.         this.dragSuccess = true;
76.       })
78.     }
79.   }
80. }
83. @Entry
84. @Component
85. struct TestDrag {
86.   @State message: string = '统一拖拽';
88.   build() {
89.     Scroll() {
90.       Column({ space: 10 }) {
91.         Text(this.message)
92.           .id('TestDragHelloWorld')
93.           .fontSize(20)
94.           .fontWeight(FontWeight.Medium)
95.         TestDragImage()
96.       }
97.     }
98.     .height('100%')
99.     .width('100%')
100.   }
101. }

复制代码

三、拖拽图像增加水印

   在拖拽过程中，可以自定义拖出相应，为拖拽图像增加水印，以标识图像的相关信息。下面以在图像中增加拖拽时间水印为例，介绍实现原理。
  3.1 实现原理

   在拖出对象的onDragStart()接口中获取图像信息，调用系统绘制本领drawing在图像上绘制水印，通过DragEvent的setData()接口将水印图像设置为拖拽数据。
  3.2 开发步调

   

• 将Image的draggable()属性设置为true。
  
• 在拖出对象的onDragStart()接口中，获取图像信息并将其转换成PixelMap。
  
• 将图片绘制到Canvas画布上，并获取拖拽时间作为水印绘制到画布上的指定位置，得到添加水印的图像。
  
• 将图像打包生存在文件中，调用DragEvent的setData()接口将水印图像设置为拖拽数据。
  

  3.3 结果图

   拖拽中

释放拖拽

  拖拽图像增加水印示例代码

1. import { display, promptAction, SubHeader, TextModifier } from '@kit.ArkUI';
2. import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'
3. import { image } from '@kit.ImageKit'
4. import { drawing } from '@kit.ArkGraphics2D'
5. import { fileIo as fs, fileUri } from '@kit.CoreFileKit'
6. import { resourceManager } from '@kit.LocalizationKit';
7. import { hilog } from '@kit.PerformanceAnalysisKit';
8. import { BusinessError, systemDateTime } from '@kit.BasicServicesKit';
10. const TAG = '[统一拖拽]';
11. @Component
13. struct TestDragImageWatermarkDrag {
14.   @State targetImage: string = '';
15.   @State primaryModifier: TextModifier =
16.     new TextModifier().fontColor(Color.Gray).fontSize(18).fontWeight(FontWeight.Medium);
17.   context: Context = getContext(this);
18.   time: string = '0';
20.   getTimeWatermark(str: number): string {
21.     let time: string = '';
22.     let date = new Date(str);
23.     try {
24.       let year = date.getFullYear();
25.       let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
26.       let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
27.       let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
28.       let min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
29.       let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
30.       time = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second;
31.       hilog.info(0x0000, TAG, `${date}transform===>${time}`);
32.     } catch (error) {
33.       hilog.error(0x0000, TAG,
34.         `Failed to get currentTime, code = ${(error as BusinessError).code}, message = ${(error as BusinessError).message}`);
35.     }
36.     return time;
37.   }
39.   getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) {
40.     try {
41.       let data: UnifiedData = event.getData();
42.       if (!data) {
43.         return false;
44.       }
45.       let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords();
46.       if (!records || records.length <= 0) {
47.         return false;
48.       }
49.       callback(event);
50.       return true;
51.     } catch (error) {
52.       hilog.error(0x0000, TAG,
53.         `getData failed, code = ${(error as BusinessError).code}, message = ${(error as BusinessError).message}`);
54.       return false;
55.     }
56.   }
58.   getDataFromUdmf(event: DragEvent, callback: (data: DragEvent) => void) {
59.     if (this.getDataFromUdmfRetry(event, callback)) {
60.       return;
61.     }
62.     setTimeout(() => {
63.       this.getDataFromUdmfRetry(event, callback);
64.     }, 1500);
65.   }
67.   addWaterMark(watermark: string, pixelMap: image.PixelMap) {
68.     if (canIUse('SystemCapability.Graphics.Drawing')) {
69.       watermark = this.context.resourceManager.getStringSync($r('app.string.drag_time')) + watermark;
70.       let imageWidth = pixelMap.getImageInfoSync().size.width;
71.       let imageHeight = pixelMap.getImageInfoSync().size.height;
72.       let imageScale = imageWidth / display.getDefaultDisplaySync().width;
73.       const canvas = new drawing.Canvas(pixelMap);
74.       const pen = new drawing.Pen();
75.       const brush = new drawing.Brush();
76.       pen.setColor({
77.         alpha: 102,
78.         red: 255,
79.         green: 255,
80.         blue: 255
81.       })
82.       brush.setColor({
83.         alpha: 102,
84.         red: 255,
85.         green: 255,
86.         blue: 255
87.       })
89.       const font = new drawing.Font();
90.       font.setSize(48 * imageScale);
91.       let textWidth = font.measureText(watermark, drawing.TextEncoding.TEXT_ENCODING_UTF8);
92.       const textBlob = drawing.TextBlob.makeFromString(watermark, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
93.       canvas.attachBrush(brush);
94.       canvas.attachPen(pen);
95.       canvas.drawTextBlob(textBlob, imageWidth - 24 * imageScale - textWidth, imageHeight - 32 * imageScale);
96.       canvas.detachBrush();
97.       canvas.detachPen();
98.     } else {
99.       hilog.info(0x0000, TAG, 'watermark is not supported');
100.     }
102.     return pixelMap;
103.   }
105.   build() {
106.     Column({ space: 10 }) {
107.       SubHeader({
108.         primaryTitle: '拖拽图像增加水印',
109.         primaryTitleModifier: this.primaryModifier
110.       })
111.       Image($rawfile('river.png'))
112.         .width('342vp')
113.         .fitOriginalSize(true)
114.         .borderRadius(8)
115.         .draggable(true)
116.         .onDragStart((event: DragEvent) => {
117.           const resourceMgr: resourceManager.ResourceManager = this.context.resourceManager;
118.           let rawFileDescriptor = resourceMgr.getRawFdSync('river.png');
119.           const imageSourceApi: image.ImageSource = image.createImageSource(rawFileDescriptor);
121.           let pixelMap = imageSourceApi.createPixelMapSync();
122.           this.time = this.getTimeWatermark(systemDateTime.getTime(false));
123.           let markPixelMap = this.addWaterMark(this.time, pixelMap);
125.           let packOpts: image.PackingOption = { format: 'image/png', quality: 20 };
126.           let file =
127.             fs.openSync(`${this.context.filesDir}/watermark.png`, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
128.           const imagePackerApi: image.ImagePacker = image.createImagePacker();
129.           imagePackerApi.packToFile(markPixelMap, file.fd, packOpts);
130.           let img: unifiedDataChannel.Image = new unifiedDataChannel.Image();
131.           img.imageUri = fileUri.getUriFromPath(`${this.context.filesDir}/watermark.png`);
132.           let data: unifiedDataChannel.UnifiedData = new unifiedDataChannel.UnifiedData(img);
133.           (event as DragEvent).setData(data);
134.           fs.closeSync(file.fd);
135.         })
136.         .onDragEnd((event) => {
137.           if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
138.             promptAction.showToast({
139.               duration: 100,
140.               bottom: '80vp',
141.               message: $r('app.string.drag_successfully')
142.             });
143.           } else if (event.getResult() === DragResult.DRAG_FAILED) {
144.             promptAction.showToast({ duration: 100, bottom: '80vp', message: $r('app.string.drag_failed') });
145.           }
146.         })
148.       SubHeader({
149.         primaryTitle: $r('app.string.area_can_drag'),
150.         primaryTitleModifier: this.primaryModifier
151.       })
152.       Column() {
153.         Image(this.targetImage)
154.           .width('342vp')
155.           .fitOriginalSize(true)
156.           .borderRadius(8)
157.           .draggable(true)
158.       }
159.       .alignItems(HorizontalAlign.Center)
160.       .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
161.       .onDrop((dragEvent?: DragEvent) => {
162.         this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => {
163.           let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords();
164.           this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri;
165.           event.useCustomDropAnimation = false;
166.           event.setResult(DragResult.DRAG_SUCCESSFUL);
167.         })
168.       })
169.       .backgroundColor(Color.Gray)
170.       .width('342vp')
171.       .constraintSize({ maxWidth: '100%' })
172.       .height('193vp')
173.       .borderRadius(8)
174.       .margin({
175.         left: '16vp',
176.         right: '16vp'
177.       })
178.     }
179.     .height('100%')
180.   }
181. }
184. @Entry
185. @Component
186. struct TestDrag {
187.   @State message: string = '统一拖拽';
189.   build() {
190.     Scroll() {
191.       Column({ space: 10 }) {
192.         Text(this.message)
193.           .id('TestDragHelloWorld')
194.           .fontSize(20)
195.           .fontWeight(FontWeight.Medium)
196.           // 拖拽图片
197.        // TestDragImage()
198.        //拖拽图片添加水印
199.         TestDragImageWatermarkDrag()
200.       }
201.     }
202.     .height('100%')
203.     .width('100%')
204.   }
205. }

复制代码

四、自定义拖拽背板图

   在拖拽过程中，可以自定义拖拽背板图，展示拖拽数据的相关信息。
  4.1 实现原理

   在拖出对象的onDragStart()接口中，回调自定义的PixelMap作为拖拽中的背板图。
  4.2 开发步调

   

• 创建自定义组件。
  
• 将自定义组件转换成PixelMap，作为拖拽过程中表现的图片。
  说明
  由于CustomBuilder需要离线渲染之后才能使用，存在肯定的性能开销和时延，因此保举开发者优先使用DragItemInfo中的PixelMap方式返回背板图。
  
• 在拖出对象的onDragStart()接口中，将回调的PixelMap作为拖拽中的背板图。
  

  4.3 结果图

   拖拽中

释放拖拽，拖拽成功

  自定义拖拽背板图示例代码

1. import { display, promptAction, SubHeader, TextModifier } from '@kit.ArkUI';
2. import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'
3. import { image } from '@kit.ImageKit'
4. import { drawing } from '@kit.ArkGraphics2D'
5. import { fileIo as fs, fileUri } from '@kit.CoreFileKit'
6. import { resourceManager } from '@kit.LocalizationKit';
7. import { hilog } from '@kit.PerformanceAnalysisKit';
8. import { BusinessError, systemDateTime } from '@kit.BasicServicesKit';
10. const TAG = '[统一拖拽]';
12. @Component
13. struct TestBackgroundDrag {
14.   @State targetImage: string = '';
15.   @State primaryModifier: TextModifier =
16.     new TextModifier().fontColor(Color.Gray).fontSize(18).fontWeight(FontWeight.Medium);
17.   @State pixelMap: image.PixelMap | undefined = undefined;
19.   @Builder
20.   pixelMapBuilder() {
21.     Column() {
22.       Text($r('app.string.background_content'))
23.         .fontSize('16fp')
24.         .fontColor(Color.Black)
25.         .margin({
26.           left: '16vp',
27.           right: '16vp',
28.           top: '8vp',
29.           bottom: '8vp'
30.         })
31.     }
32.     .backgroundColor(Color.White)
33.     .borderRadius(18)
34.   }
36.   private getComponentSnapshot(): void {
37.     this.getUIContext().getComponentSnapshot().createFromBuilder(() => {
38.       this.pixelMapBuilder()
39.     },
40.       (error: Error, pixmap: image.PixelMap) => {
41.         if (error) {
42.           hilog.error(0x0000, TAG, JSON.stringify(error));
43.           return;
44.         }
45.         this.pixelMap = pixmap;
46.       })
47.   }
49.   private PreDragChange(preDragStatus: PreDragStatus): void {
50.     if (preDragStatus == PreDragStatus.ACTION_DETECTING_STATUS) {
51.       this.getComponentSnapshot();
52.     }
53.   }
55.   build() {
56.     Column({ space: 10 }) {
57.       SubHeader({
58.         primaryTitle: '自定义拖拽背板图',
59.         primaryTitleModifier: this.primaryModifier
60.       })
62.       Image($r('app.media.mount'))
63.         .width('342vp')
64.         .fitOriginalSize(true)
65.         .borderRadius(8)
66.         .draggable(true)
67.         .onPreDrag((status: PreDragStatus) => {
68.           this.PreDragChange(status);
69.         })
70.         .onDragStart(() => {
71.           let dragItemInfo: DragItemInfo = {
72.             pixelMap: this.pixelMap,
73.             builder: () => {
74.               this.pixelMapBuilder()
75.             },
76.             extraInfo: "this is extraInfo"
77.           };
78.           return dragItemInfo;
79.         })
80.         .onDragEnd((event) => {
81.           if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
82.             promptAction.showToast({
83.               duration: 100,
84.               bottom: '80vp',
85.               message: $r('app.string.drag_successfully')
86.             });
87.           } else if (event.getResult() === DragResult.DRAG_FAILED) {
88.             promptAction.showToast({ duration: 100, bottom: '80vp', message: $r('app.string.drag_failed') });
89.           }
90.         })
92.       SubHeader({
93.         primaryTitle: $r('app.string.area_can_drag'),
94.         primaryTitleModifier: this.primaryModifier
95.       })
96.       Column() {
97.         Image(this.targetImage)
98.           .height('193vp')
99.           .fitOriginalSize(true)
100.           .constraintSize({ maxWidth: '100%' })
101.           .borderRadius(8)
102.       }
103.       .backgroundColor(Color.Grey)
104.       .height('193vp')
105.       .width('342vp')
106.       .constraintSize({ maxWidth: '100%' })
107.       .borderRadius(8)
108.       .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
109.       .onDrop((event?: DragEvent) => {
110.         let dragData: UnifiedData = (event as DragEvent).getData() as UnifiedData;
111.         if (dragData !== undefined) {
112.           let arr: Array<unifiedDataChannel.UnifiedRecord> = dragData.getRecords();
113.           if (arr.length > 0) {
114.             this.targetImage = (arr[0] as unifiedDataChannel.Image).imageUri;
115.           } else {
116.             hilog.info(0x0000, TAG, 'dragData arr is null');
117.           }
118.         } else {
119.           hilog.info(0x0000, TAG, 'dragData is undefined');
120.         }
121.         event?.setResult(DragResult.DRAG_SUCCESSFUL);
122.       })
123.       .margin({
124.         left: '16vp',
125.         right: '16vp'
126.       })
127.     }
128.     .height('100%')
129.   }
130. }
132. @Entry
133. @Component
134. struct TestDrag {
135.   @State message: string = '统一拖拽';
137.   build() {
138.     Scroll() {
139.       Column({ space: 10 }) {
140.         Text(this.message)
141.           .id('TestDragHelloWorld')
142.           .fontSize(20)
143.           .fontWeight(FontWeight.Medium)
144.         //拖拽图片
145.         // TestDragImage()
146.         // 拖拽图片添加水印
147.         // TestDragImageWatermarkDrag()
148.         // 自定义拖拽背板图
149.         TestBackgroundDrag()
150.       }
151.     }
152.     .height('100%')
153.     .width('100%')
154.   }
155. }

复制代码

五、AI识别拖拽内容

   在拖拽过程中，可以自定义拖入相应，以识别拖拽内容并将其输出在释放区内。下面以通过AI识别拖拽图像中的文字为例，介绍实现原理。
  5.1 实现原理

   在拖入对象的onDrop()接口中，通过DragEvent的getData()接口获取拖拽数据后，调用系统文字识别本领textRecognition得到图像中的文字信息。
  5.2 开发步调

   

• 在拖拽释放地区的allowDrop()接口中设置答应拖入的数据类型为uniformTypeDescriptor.UniformDataType.IMAGE。
  
• 在拖入对象的onDrop()接口中，调用DragEvent的getData()接口获取拖拽数据。
  
• 将拖拽数据转换成颜色数据格式为RGBA_8888的PixelMap类型的视觉信息。
  
• 调用系统文字识别本领textRecognition获取拖拽数据中的文字信息。
  

  5.3 结果图

   拖拽中

释放拖拽，识别成功

  AI识别拖拽内容示例代码

1. import { display, promptAction, SubHeader, TextModifier } from '@kit.ArkUI';
2. import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'
3. import { image } from '@kit.ImageKit'
4. import { drawing } from '@kit.ArkGraphics2D'
5. import { fileIo as fs, fileUri } from '@kit.CoreFileKit'
6. import { resourceManager } from '@kit.LocalizationKit';
7. import { hilog } from '@kit.PerformanceAnalysisKit';
8. import { BusinessError, systemDateTime } from '@kit.BasicServicesKit';
9. import { textRecognition } from '@kit.CoreVisionKit';
11. const TAG = '[统一拖拽]';
13. @Component
14. struct TestAIRecognitionDrag {
15.   @State textContent: string = '';
16.   @State primaryModifier: TextModifier =
17.     new TextModifier().fontColor(Color.Gray).fontSize(18).fontWeight(FontWeight.Medium);
18.   context: Context = getContext(this);
20.   build() {
21.     Column({ space: 10 }) {
22.       SubHeader({
23.         primaryTitle: 'AI识别拖拽内容',
24.         primaryTitleModifier: this.primaryModifier
25.       })
27.       Image($r('app.media.architecture'))
28.         .width('355vp')
29.         .fitOriginalSize(true)
30.         .borderRadius(8)
31.         .draggable(true)
32.         .onDragEnd((event) => {
33.           if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
34.             promptAction.showToast({
35.               duration: 100,
36.               bottom: '80vp',
37.               message: $r('app.string.drag_successfully')
38.             });
39.           } else if (event.getResult() === DragResult.DRAG_FAILED) {
40.             promptAction.showToast({ duration: 100, bottom: '80vp', message: $r('app.string.drag_failed') });
41.           }
42.         })
44.       SubHeader({
45.         primaryTitle: $r('app.string.area_can_drag'),
46.         primaryTitleModifier: this.primaryModifier
47.       })
49.       Column() {
50.         Text(this.textContent)
51.           .width('100%')
52.           .height('175vp')
53.           .lineHeight(22)
54.           .borderRadius(8)
55.           .align(Alignment.TopStart)
56.       }
57.       .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
58.       .onDrop(async (event?: DragEvent) => {
59.         let dragData: UnifiedData = (event as DragEvent).getData() as UnifiedData;
60.         if (dragData === undefined) {
61.           hilog.info(0x0000, TAG, 'ondrop undefined data');
62.           return;
63.         }
64.         let record: Array<unifiedDataChannel.UnifiedRecord> = dragData.getRecords();
65.         if (record.length <= 0) {
66.           hilog.info(0x0000, TAG, 'dragData arr is null');
67.           return;
68.         }
69.         let imageSource = record[0] as unifiedDataChannel.Image;
70.         const resourceReg = new RegExp('resource');
71.         if (resourceReg.test(imageSource.uri)) {
72.           const numberReg = new RegExp('[0-9]+');
73.           let idArray = imageSource.uri.match(numberReg);
74.           if (idArray !== null) {
75.             let id = idArray[0];
76.             let drawableDescriptor = this.context.resourceManager.getDrawableDescriptor(Number(id), 0, 1);
77.             let pixelMapInit = drawableDescriptor.getPixelMap() as image.PixelMap;
78.             let imageHeight = pixelMapInit.getImageInfoSync().size.height;
79.             let imageWidth = pixelMapInit.getImageInfoSync().size.width;
80.             const readBuffer: ArrayBuffer = new ArrayBuffer(imageHeight * imageWidth * 4);
81.             pixelMapInit.readPixelsToBufferSync(readBuffer);
82.             let opts: image.InitializationOptions = {
83.               editable: true,
84.               size: { height: imageHeight, width: imageWidth },
85.               srcPixelFormat: pixelMapInit.getImageInfoSync().pixelFormat,
86.               pixelFormat: 3,
87.               alphaType: pixelMapInit.getImageInfoSync().alphaType,
88.               scaleMode: 0
89.             };
90.             let pixelMap: image.PixelMap = image.createPixelMapSync(readBuffer, opts);
91.             let visionInfo: textRecognition.VisionInfo = {
92.               pixelMap: pixelMap
93.             };
94.             let data = await textRecognition.recognizeText(visionInfo);
95.             let recognitionString = data.value;
96.             this.textContent = recognitionString;
97.           }
98.         }
99.       })
100.       .backgroundColor(Color.Grey)
101.       .borderRadius(8)
102.       .padding({
103.         left: '16vp',
104.         right: '16vp',
105.         top: '8vp',
106.         bottom: '8vp'
107.       })
108.       .margin({
109.         left: '16vp',
110.         right: '16vp'
111.       })
112.     }
113.     .height('100%')
114.   }
115. }
117. @Entry
118. @Component
119. struct TestDrag {
120.   @State message: string = '统一拖拽';
122.   build() {
123.     Scroll() {
124.       Column({ space: 10 }) {
125.         Text(this.message)
126.           .id('TestDragHelloWorld')
127.           .fontSize(20)
128.           .fontWeight(FontWeight.Medium)
129.         //拖拽图片
130.         // TestDragImage()
131.         // 拖拽图片添加水印
132.         // TestDragImageWatermarkDrag()
133.         // 自定义拖拽背板图
134.         // TestBackgroundDrag()
135.         //AI识别拖拽内容
136.         TestAIRecognitionDrag()
137.       }
138.     }
139.     .height('100%')
140.     .width('100%')
141.   }
142. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。