使用 Fabric 拖放在 Angular 中不起作用

Posted 2023-03-25

【中文标题】使用 Fabric 拖放在 Angular 中不起作用

【英文标题】：Drag & drop not working in Angular using Fabric

【发布时间】：2021-06-06 16:11:01

【问题描述】：

我正在尝试将 Fabric.js 用于我的图像编辑器。

将图像从加载区域拖放到画布上。

这是我的 html 代码

    <div class="panel panel-default panel-upload">
  <div class="panel-heading">Upload Picture</div>
  <div class="panel-body text-center">
    <img id="testImage" draggable="true"  class="images-item-upload" *ngFor='let url of urls' [src]="url?.url"  (click)="addImageOnCanvas(url.url);"/>
    <label class="btn btn-default btn-block file-container">
      <i class="fa fa-fw fa-upload"></i> Choose a file
      <input type='file' [disabled]="urls.length >= 16"  multiple (change)="readUrl($event);">
    </label>
  </div>
</div>

这是我的 ts 代码

    addImageOnCanvas(urls): void 
    if (urls) 
        fabric.Image.fromURL(urls, (image) => 
            image.set(
                left: 10,
                top: 10,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint: true,
                title: this.urlName
            );
            image.scaleToWidth(Math.round(this.size.width / 2));
            this.extend(image, this.randomId());
            this.canvas.add(image);
            this.selectItemAfterAdded(image);
        );

        this.updateLayers();
    

当我尝试拖放时出现错误

Cannot read property 'src' of undefined
at EditorComponent.push.xD4D.EditorComponent.handleDropOnCanvas (editor.component.ts:1036)

接下来我可以尝试什么？

【问题讨论】：

你能发布一个小提琴或一个工作的sn-p来显示这个问题吗？

@melchiar 我在 stackblitz 上传代码时遇到问题

【参考方案1】：

为什么不检查传递给回调的第二个参数？

Second argument is a boolean indicating if an error occurred or not.

http://fabricjs.com/docs/fabric.Image.html#.fromURL

我会从那里开始。