web-dev-qa-db-ja.com

Angular 4でFabric.jsを使用する

私は新人ですAngularおよびFabric.js。ユーザーがキャンバスにオブジェクトをドラッグアンドドロップして、線で接続できるUIを構築しようとしています。

本質的に、最初のリンクからAngular4のドラッグアンドドロップの例を取得して、2番目のリンクにあるFabric.jsキャンバスでうまく機能することを期待しています。

<ul>
    <li><a href="https://www.npmjs.com/package/ng2-drag-drop">Drag and Drop</a></li>
    <li><a href="https://codepen.io/janih/pen/Pqwbpe">Canvas Example</a></li>
</ul>

ドラッグアンドドロップの例は機能しますが、Fabric.jsキャンバスは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);
angularfabricjs
7
mba12

私は似たようなことをします。ただし、提供したリンクを正確に使用していない。私はcanvasとangular4とともにファブリックjsを使用して、このように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>
6
Jonas Johansson

私のために働いたもの（2Toadの解決策： https://stackoverflow.com/a/49481766/9753985 ）Angular 7：

最初のインストールファブリック：

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

fabric.js + Angular 7.x

私にとっては、このシナリオで機能します：

  1. "./assets"などのフォルダーにfabric.jsをコピーし、それをindex.htmlに含めます。
<script src="./assets/fabric.js"></script>
  1. インポート後、ファブリックを任意に宣言します
declare const fabric: any;
  1. angularテンプレートでキャンバスdivを作成します
<canvas id="canvas" width="300" height="300"></canvas>
  1. コンポーネントにimplements 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);
}
6
Stefan Varga

angular-editor-fabric-js は、「Angular複数のオプションを備えたv5用のFabricjsに基づくドラッグアンドドロップエディター」です

気分転換にもお使いいただけます。

3
Alex Pandrea