我是新的Angular和Fabric js所以任何指针都非常赞赏。我正在尝试构建一个用户界面,用户可以将对象拖放到画布上,然后用线条连接它们。
从本质上讲,我希望从第一个链接获得Angular 4拖放示例,以便在第二个链接中找到fabricjs画布。
拖放示例有效,但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);
我做了类似的事情。不完全使用您提供的链接。我使用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>
如果您没有发现这有用,请告诉我,我可以删除答案。
fabric.js + Angular 7.x
对我来说,它适用于这种情况:
<script src="./assets/fabric.js"></script>
declare const fabric: any;
<canvas id="canvas" width="300" height="300"></canvas>
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);
}
angular-editor-fabric-js是一个“基于Fabricjs for Angular v5的拖放式编辑器,具有多个选项”
你可以用它作为灵感。
在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 !'));
}
}