Angular拖拽图标至Canvas求助：拖拽时需移动对象副本

Got it, let's figure out how to make that copy-on-drag work for your Angular Canvas setup! I’ve tackled similar scenarios before using Angular CDK DragDrop—it’s the most reliable tool for drag-and-drop in Angular, and here’s a step-by-step solution tailored to your needs:

First, make sure you’ve got the Angular CDK DragDrop module installed and imported into your app module:

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // ... other imports
    DragDropModule
  ]
})
export class AppModule { }

Next, here’s the component code (template + class + styles) to implement dragging icon copies onto your Canvas:

Component Template

<!-- Icon palette to drag from -->
<div class="icon-palette" cdkDropList>
  <div *ngFor="let icon of availableIcons" 
       class="icon-item" 
       cdkDrag
       (cdkDragStarted)="startDrag($event, icon)"
       (cdkDragEnded)="endDrag()">
    <img [src]="icon.src" [style.width.px]="icon.size" [style.height.px]="icon.size">
  </div>
</div>

<!-- Canvas to drop onto -->
<canvas #targetCanvas class="canvas-area"
        (dragover)="handleDragOver($event)"
        (drop)="handleDrop($event)">
</canvas>

Component Class

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { CdkDragStart } from '@angular/cdk/drag-drop';

// Define your icon type
interface CanvasIcon {
  src: string;
  size: number;
}

@Component({
  selector: 'app-icon-canvas',
  templateUrl: './icon-canvas.component.html',
  styleUrls: ['./icon-canvas.component.css']
})
export class IconCanvasComponent implements OnInit {
  @ViewChild('targetCanvas') targetCanvas!: ElementRef<HTMLCanvasElement>;
  private canvasCtx!: CanvasRenderingContext2D;
  private currentDraggedIcon: CanvasIcon | null = null;
  private dragPreview: HTMLImageElement | null = null;

  // Your list of icons to drag
  availableIcons: CanvasIcon[] = [
    { src: 'assets/settings-icon.png', size: 48 },
    { src: 'assets/user-icon.png', size: 48 },
    { src: 'assets/trash-icon.png', size: 48 }
  ];

  ngOnInit(): void {
    // Initialize canvas context once the component is ready
    this.canvasCtx = this.targetCanvas.nativeElement.getContext('2d')!;
    this.targetCanvas.nativeElement.width = 800;
    this.targetCanvas.nativeElement.height = 600;
  }

  startDrag(event: CdkDragStart, icon: CanvasIcon) {
    // Clone the icon to ensure we're working with a copy, not the original
    this.currentDraggedIcon = { ...icon };

    // Create a temporary preview image to show during drag
    this.dragPreview = new Image();
    this.dragPreview.src = icon.src;
    // Style the preview to feel like a floating copy
    this.dragPreview.style.position = 'fixed';
    this.dragPreview.style.pointerEvents = 'none';
    this.dragPreview.style.opacity = '0.8';
    this.dragPreview.style.width = `${icon.size}px`;
    this.dragPreview.style.height = `${icon.size}px`;
    this.dragPreview.style.zIndex = '9999';
    document.body.appendChild(this.dragPreview);
  }

  handleDragOver(event: DragEvent) {
    event.preventDefault(); // Required to allow drop
    if (!this.dragPreview || !this.currentDraggedIcon) return;

    // Convert page mouse coordinates to canvas-relative positions
    const canvasBounds = this.targetCanvas.nativeElement.getBoundingClientRect();
    const previewX = event.pageX - canvasBounds.left - (this.currentDraggedIcon.size / 2);
    const previewY = event.pageY - canvasBounds.top - (this.currentDraggedIcon.size / 2);

    // Update the preview's position to follow the mouse
    this.dragPreview.style.left = `${previewX + canvasBounds.left}px`;
    this.dragPreview.style.top = `${previewY + canvasBounds.top}px`;
  }

  endDrag() {
    // Clean up the temporary preview after drag ends
    if (this.dragPreview) {
      document.body.removeChild(this.dragPreview);
      this.dragPreview = null;
    }
    this.currentDraggedIcon = null;
  }

  handleDrop(event: DragEvent) {
    event.preventDefault();
    if (!this.currentDraggedIcon) return;

    // Calculate final drop position relative to the canvas
    const canvasBounds = this.targetCanvas.nativeElement.getBoundingClientRect();
    const dropX = event.pageX - canvasBounds.left - (this.currentDraggedIcon.size / 2);
    const dropY = event.pageY - canvasBounds.top - (this.currentDraggedIcon.size / 2);

    // Draw the copied icon onto the canvas
    const iconImage = new Image();
    // Add crossOrigin if your icons are from a different domain
    // iconImage.crossOrigin = 'anonymous';
    iconImage.src = this.currentDraggedIcon.src;
    iconImage.onload = () => {
      this.canvasCtx.drawImage(
        iconImage,
        dropX,
        dropY,
        this.currentDraggedIcon!.size,
        this.currentDraggedIcon!.size
      );
    };
  }
}

Component Styles

.icon-palette {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.icon-item {
  cursor: grab;
  transition: transform 0.2s;
}

.icon-item:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.canvas-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #fff;
}

Key Details to Note: #

• Copy-on-Drag Logic: We clone the icon object ({ ...icon }) when the drag starts, so we never modify or move the original icon from the palette.
• Temporary Preview: The floating preview image gives users visual feedback that they’re dragging a copy, not the original. We set pointerEvents: none so it doesn’t interfere with drag events.
• Coordinate Conversion: Converting page mouse coordinates to canvas-relative positions ensures the icon drops exactly where the user expects it to.
• Canvas Drawing: We wait for the image to load (onload event) before drawing it to avoid rendering issues with unloaded assets.

Quick Optimizations You Can Add: #

• Add a "ghost" effect to the original icon while dragging (e.g., reduce opacity).
• Support resizing the copied icon on the canvas if needed.
• Store all dropped icons in an array so you can save/load the canvas state later.

内容的提问来源于stack exchange，提问作者Ananthakrishna