在我当前开发的应用程序中,我使用canvg库在页面中进行一些画布渲染,直到现在我都使用canvg 2.0库以以下方式实现此目的:
import Canvg from 'canvg/dist/browser/canvg.min.js';
// convert SVG into a XML string
xml = new XMLSerializer().serializeToString(obj);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
// draw the SVG onto a canvas
Canvg(canvas, xml);
几天前,发布了Canvg版本3,该版本将所有内容更改为Typescript,而canvg.min.js不再存在,我找不到在Angular 8项目中集成npm安装的canvg库的方法,因此可以使用它和以前一样,没有为“ Canvg”功能导入任何模块的建议,文档也对如何将其与Angular集成没有帮助。
有人遇到此问题,并且知道如何解决吗?
如果他们已经迁移到TypeScript,实际上会更容易。他们在[here。
中提供了一些文档。这里是一个入门的例子:
import { Component, ViewChild, AfterViewInit, OnDestroy } from "@angular/core";
import Canvg from "canvg";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild("canvas", { static: false }) canvas;
context: CanvasRenderingContext2D;
renderedCanvas;
async ngAfterViewInit() {
this.context = this.canvas.nativeElement.getContext("2d");
this.renderedCanvas = await Canvg.from(
this.context,
'<svg width="600" height="600"><text x="50" y="50">Hello World!</text></svg>'
);
this.renderedCanvas.start();
}
ngOnDestroy() {
this.renderedCanvas && this.renderedCanvas.stop();
}
}
这是模板:
<canvas #canvas></canvas>
这是您的参考资料Sample Code Example。>