使用面料js与Angular 4

Question

我是新角度和面料js所以任何指针非常赞赏。我试图构建一个用户界面，用户可以将对象拖放到画布上，然后用线条将它们连接起来。

实质上，我希望从第一个链接中获得Angular4拖放示例，以便与第二个链接中找到的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

我做同样的事情。不是完全使用你提供的链接。我使用fabric和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> 

如果你没有发现这是很有帮助，请让我知道，我可以删除答案。