使用带有Angular 4的面料js

Question

我是新的Angular和Fabric js所以任何指针都非常赞赏。我正在尝试构建一个用户界面，用户可以将对象拖放到画布上，然后用线条连接它们。

从本质上讲，我希望从第一个链接获得Angular 4拖放示例，以便在第二个链接中找到fabricjs画布。

• Drag and Drop
• Canvas Example

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

我采取的步骤：

在tsconfig.json中我设置了“allowJs”：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

对我来说，它适用于这种情况：

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

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

2. 进口后，将面料声明为任何

declare const fabric: any;

3. 在角度模板中创建canvas div

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

4. 在组件中添加实现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-editor-fabric-js是一个“基于Fabricjs for Angular v5的拖放式编辑器，具有多个选项”

你可以用它作为灵感。

Answer 4

在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 !'));
  }
}