如何在Angular2中使用/ include fabricjs [英] How to use / include fabricjs in Angular2
问题描述
我想在我的项目中使用fabricjs。我使用bower安装了fabricjs并在index.html中进行了链接。但它不起作用。请参阅以下代码。
I want use fabricjs in my project. I installed fabricjs using bower and linked in index.html. but it is not working. Please see the below code.
index.html
index.html
<html>
<head>
<script>document.write('<base href="' + document.location + '" />'); </script>
<title>Image Editor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="libs/core-js/client/shim.min.js"></script>
<script src="libs/zone.js/dist/zone.js"></script>
<script src="libs/reflect-metadata/Reflect.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="css/jquery/dist/jquery.min.js"></script>
<script src="css/bootstrap/dist/js/bootstrap.min.js"></script>
// incuding fabricjs here
<script src="../../bower_components/fabric.js/dist/fabric.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
这是组件文件stage.component.ts
This is component file "stage.component.ts"
import {Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router} from '@angular/router';
import { fabric } from 'fabric';
import { ImageService } from '../services/image.service';
declare var fabric:any;
@Component({
selector:'my-stage',
styleUrls: ['./app/stage/stage.component.css'],
templateUrl: './app/stage/stage.component.html',
})
export class StageComponent implements OnInit {
title:string = 'Image Editor';
imgpath: string = '';
canvas:any = null;
// fabric:any = null;
constructor(
private route: ActivatedRoute,
) {
// this.fabric = new fabric();
}
ngOnInit() {
this.canvas = new fabric.Canvas('fstage', {
isDrawingMode: true,
selection: true
});
}
}
我搜索了很多参考文献但是找不到我有什么问题。请指教，谢谢。
I have search many reference but couldn't find out what is wrong with my. Please advice, thank you.
推荐答案
我可以使用不带行的fabric.js
I can use fabric.js without the line
从'fabric'导入{fabric};
import { fabric } from 'fabric';
在索引上加载脚本。 html并在ts文件上声明库：
loading the script on index.html and declaring the library on the ts file:
import { Component } from '@angular/core';
declare var fabric: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
printValue() {
console.log(fabric.version);
};
}
在浏览器控制台上输出：
Out on browser console:
1.6.7 app.component.ts:13
这篇关于如何在Angular2中使用/ include fabricjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
