ファブリックjsを角度4で使用する

Question

私は新しいAngularとFabric jsなので、どんなポインタであれ大いに感謝します。私は、ユーザーがキャンバスにオブジェクトをドラッグアンドドロップして、それらをラインに接続できるUIを構築しようとしています。

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

• Drag and Drop
• Canvas Example

ドラッグと動作しますが、fabricjsキャンバスは、正方形のボックスとより多くの何もないとして、Chromeでレンダリングする例をドロップします。どんな考えでも大歓迎です。

をtsconfig.jsonで、私は "allowJs" を設定しました：：真

私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> 

、キャンバス。私が撮影した

手順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

私はこれに似ています。あなたが提供したリンクを正確に使用していません。私はキャンバスとangle4と一緒にファブリック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> 

、私が知っていると私は答えを削除することができますしてください。