0

现在，我正在我的 Web 应用程序项目中执行从图像目录到画布的图像拖放操作。到目前为止，该代码作为在 PC 上运行的 Web 应用程序运行。但是，我发现当我通过包括 I-Phone 6S 和三星 Android 在内的移动设备运行程序时，我的拖放代码不起作用。

在PC上工作的源代码如下所示：

拖动部分：image-directory.component.html 和 image-directory.component.ts image-directory.component.html 部分：

<ng-container *ngFor="let imageDirectory of imageDirectories">
  <ng-container *ngIf="imageDirectory.type === selectType">
    <div class="image-flexbox">
      <img
        *ngFor="let image of imageDirectory.images; let i = index"
        [id]="imageDirectory.type + i"
        [src]="image.src"
        draggable="true"
        (dragstart)="onDragStart($event, image)"
        (dragend)="onDragEnd($event, image)"
      />
    </div>
  </ng-container>
</ng-container>

我已将 cdkDrag 设置为任一或 <img .../> 但它未能拖动选定的单个图像。它宁愿将整个内容移动到 div 中。尝试将 cdkDrag 设置为正常工作需要我设置导出类，其中包含单个图像的固定列表，以便在 image-directory.component.ts 部分中拖动，这不容易完成。

image-directory.component.ts 部分：

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { take } from 'rxjs/operators';
import { TemplatesService } from 'src/app/core/services/templates.service';

import { ImageDirectory, ImageDirectoryType, ImageItem } from '../../../core/interfaces/sketch.interface';
import { CATEGORY } from './../../../core/constants/category';

@Component({
  selector: 'app-image-directory',
  templateUrl: './image-directory.component.html',
  styleUrls: ['./image-directory.component.scss']
})
export class ImageDirectoryComponent implements OnInit {

  // WARN: loading multiple images by reading the directory could cause security issues! (client shouldn't be able to read the directory)

  @Input() selectType: ImageDirectoryType = 'default';

  @Output() imagesDragStart: EventEmitter<{e: DragEvent, imageItem: ImageItem}> = new EventEmitter();
  @Output() imagesDragEnd: EventEmitter<{e: DragEvent, imageItem: ImageItem}> = new EventEmitter();
  imageDirectories: ImageDirectory[];
  // imageDirectories: ImageDirectory

  constructor(
    private templatesService: TemplatesService,
  ) { }

  ngOnInit(): void {
    this.templatesService.getList().pipe(take(1)).subscribe(templates => {
      console.log(templates);

      const imageDir: ImageDirectory[] = CATEGORY.map(category => {
        return {
          type: category,
          images: templates.filter(t => t.category === category).map((t, i) => {
            return {
              title: `${category}_${i}`,
              src: this.templatesService.get(t.fileId),
              remarks: t.remarks,
              subCategory: t.sub_category,
              category: t.category
            };
          })
        } as ImageDirectory;
      });
      this.imageDirectories = imageDir;
    });
  }

  onDragStart(e: DragEvent, imageItem: ImageItem): void {
    // e.preventDefault();
    return this.imagesDragStart.emit({e, imageItem});
  }

  onDragEnd(e: DragEvent, imageItem: ImageItem): void {
    // e.preventDefault();
    return this.imagesDragEnd.emit({e, imageItem});
  }

}

放置部分：sketch.component.html 和 sketch.component.ts

sketch.component.html 部分：

.....
<app-image-directory
  class="gallery"
  id="ImageDirectory"
  style="overflow-y: auto; height:275px"
  (imagesDragEnd)="onImageDragEnd($event)"
  (imagesDragStart)="onImageDragStart($event)"
  [selectType]="selectType"
>
</app-image-directory>

<div>
  <div>
    <div #canvasContainer (click)="onCanvasClick($event)" (dragover)="onCanvasDragOver($event)" (drop)="onCanvasDrop($event)"  id="MyCanvas" width="300" height="400" style="border:1px solid red" >
      <canvas id="FaceCompositionCanvas" width="300" height="400" style="border:1px solid"></canvas>
    </div>
  </div>
</div>

sketch.component.ts 部分：

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { UntilDestroy } from '@ngneat/until-destroy';
import Konva from 'konva';
import { BehaviorSubject, generate } from 'rxjs';
import { ToolNavItem } from 'src/app/core/interfaces/sketch.interface';
import { HumanFace } from 'src/app/core/models/human-face';
import { FaceTools, ToolMode } from 'src/app/core/models/tools';
import { v4 as uuidv4 } from 'uuid';

import {
  BrushSizeItem,
  ColorItem,
  ImageDirectoryType,
  ImageItem,
  MenuItem,
  SideNavItem,
  ToolItem,
} from '../../core/interfaces/sketch.interface';

@UntilDestroy()
@Component({
  selector: 'app-sketch',
  templateUrl: './sketch.component.html',
  styleUrls: ['./sketch.component.scss']
})
export class SketchComponent implements OnInit, OnDestroy {

  
  // current select item
  selectedItem: BehaviorSubject<ImageItem[]> = new BehaviorSubject([]);

  // last dragged item
  lastImageDrag: {e: DragEvent, imageItem: ImageItem} = null;

  // current image list in canvas (will show on right side as images pannel)
  imagesItems: BehaviorSubject<ImageItem[]> = new BehaviorSubject([]);

  // current type selected (will show on ImageDirectory element)
  selectType: ImageDirectoryType = 'default';

....
  onCanvasDrop(e) {
    e.preventDefault();
    // need proper way to deal with issue
    // Set left and top of Last Image Drag

    this.addImage(this.lastImageDrag); // this is function to add image into the layer of canvas
  }

  onCanvasDragOver(e) {
    e.preventDefault(); // needed to make drop event work properly
  }

 .....

问题是图像目录部分不能有一个固定的数字来根据 Angular CDK 文档创建图像对象数组。

我该如何处理这些问题，以便我可以使用 Angular CDK 的拖放函数和变量在我的 Web 应用程序中使用。任何可行的替代方案将不胜感激。

顺便说一句，我虽然使用角度版本 10。

4

0 回答 0