Question

I'm new Angular and Fabric js so any pointers much appreciated. I'm trying to build a UI where users can drag and drop objects onto a canvas and then connect them with lines.

In essence I'm hoping to get the Angular4 drag and drop example from the first link to play well with the farbricjs canvas found at the second link.

拖放示例有效，但fabricjs画布在Chrome中呈现为方框，仅此而已。任何想法都非常感激。

我采取的步骤：

在tsconfig.json中，我设置了＆＃34; allowJs＆＃34;：true

我的dnd.component.html看起来像：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>

<style>
  canvas {
    border: 1px solid #ccc;
  }
</style>

<div class="container">
    <div>
        <simple-dnd></simple-dnd>
        <canvas id="c" width="600" height="600"></canvas>

    </div>
</div>

而canvas.js看起来像这样：

setTimeout(function() {
  $(document).ready(function () {
     var canvas = new fabric.Canvas('c', {selection: false});
     var grid = 50;

     // create grid
     for (var i = 0; i < (600 / grid); i++) {
         canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], {stroke: '#ccc', selectable: false}));
         canvas.add(new fabric.Line([0, i * grid, 600, i * grid], {stroke: '#ccc', selectable: false}))
     }

     // add objects
     var rect = new fabric.Rect({
         left: 100,
         top: 100,
         width: 247,
         height: 309,
         fill: '#9f9',
         originX: 'left',
         originY: 'top',
         centeredRotation: true
     });
     canvas.add(rect);

     var rect2 = new fabric.Rect({
          left: 100,
          top: 100,
          width: 223,
          height: 167,
          fill: '#faa',
          originX: 'left',
          originY: 'top',
          centeredRotation: true
     });
     canvas.add(rect2);

     var rect3 = new fabric.Rect({
         left: 196,
         top: 334,
         width: 150,
         height: 75,
         fill: 'blue',
         originX: 'left',
         originY: 'top',
         centeredRotation: true
     });
     canvas.add(rect3);
     canvas.renderAll();
  });

}, 0);

Answer 1

我做了类似的事情。不完全使用您提供的链接。我使用fabric js以及canvas和angular4来将png文件拖放到画布上。成分：

import { Component, OnInit} from '@angular/core';
import 'fabric';
declare const fabric: any;

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

  image: any;
  file:File = null;
  canvas:any;

  constructor() { }

  ngOnInit() {
    //this.context = this.canvasRef.nativeElement.getContext('2d');
      this.canvas = new fabric.Canvas('canvas', { selection: false });
  }

  handleDrop(e) {
    this.file = e.dataTransfer.files[0];
    const reader = new FileReader();

     reader.onload = (imgFile) => {
       console.log(imgFile)
       const data = imgFile.target["result"];                    
       fabric.Image.fromURL(data, (img) => {
         let oImg = img.set({
           left: 0,
           top: 0,
           angle: 0
         }).scale(1);
         this.canvas.add(oImg).renderAll();
         var a = this.canvas.setActiveObject(oImg);
         var dataURL = this.canvas.toDataURL({format: 'png', quality: 0.8});
       });
     };
     reader.readAsDataURL(this.file);

     return false;
   }

HTML模板：

<div
  (dragover)="false"
  (dragend)="false"
  (drop)="handleDrop($event)">
  <canvas id="canvas" class="canvas" width="500" height="500">
    </canvas>
</div>

如果您没有发现这有用，请告诉我，我可以删除答案。

Answer 2

fabric.js + Angular 7.x

对我来说，它在这种情况下有效：

将fabric.js复制到某个文件夹，例如复制到“ / assets”，然后将其包含在index.html中

<script src="./assets/fabric.js"></script>

导入后，将织物声明为任何

declare const fabric: any;

在角度模板中创建画布div

<canvas id="canvas" width="300" height="300"></canvas>

在组件中添加实现AfterViewInit ，并将结构初始化移至 ngAfterViewInit 事件处理程序

ngAfterViewInit() {
       const canvas = new fabric.Canvas('canvas');
       const rect = new fabric.Rect({
          top : 100,
          left : 100,
          width : 60,
          height : 70,
          fill : 'red'
       });
       canvas.add(rect);
}

Answer 3

在Angular 7上对我有用的东西（2Toad的解决方案：https://stackoverflow.com/a/49481766/9753985）：

首先安装结构：

npm i fabric
npm i @types/fabric

在HTML中添加canvas元素：

<canvas id="canvas" width="500" height="500"></canvas>

然后在TS导入结构中并创建您的结构对象：

import { Component, OnInit } from '@angular/core';
import { fabric } from 'fabric';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  canvas: any;

  ngOnInit() {
    this.canvas = new fabric.Canvas('canvas');
    this.canvas.add(new fabric.IText('Hello World !'));
  }
}

Answer 4

angular-editor-fabric-js是基于Fabricjs for Angular v5的＆＃34;拖放式编辑器，具有多个选项＆＃34;

您可以将其用作富裕。

Using fabric js with Angular 4

4 个答案: