如何在Angular中使用canvas

13 浏览
0 Comments

如何在Angular中使用canvas

在JavaScript中，使用canvas的普遍方式是：\n

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

\n但是在Angular2中，我无法获取到HTMLCanvasElement对象，变量\"canvas\"只能得到HTMLElement对象。所以在Angular2中如何使用canvas呢？\n而且，如何在Angular2中使用TypeScript语言来使用第三方JavaScript库呢？

0

2 答案

0 Comments

在Angular 13中，我使用了以下代码来操作canvas：

('myCanvas')
private myCanvas: ElementRef = {} as ElementRef;

我尝试了realappie的解决方案，但仍然出现错误。

你能指出我的解决方案给你带来了什么错误吗？:D 能指出来让我改进我的回答吗？谢谢！

0
0 Comments

如何在Angular中使用canvas

在Angular中使用canvas可以通过以下方法实现。

在你的类中进行以下操作。

import { Component, ViewChild, ElementRef, AfterViewInit } from '/core';
@Component({
   name: 'my-component',
   // 注意变量名myCanvas
   template: ``
})
export class myComponent implements AfterViewInit {
  // 很重要myCanvas要与模板中的变量名匹配
  @ViewChild('myCanvas')
  canvas: ElementRef;
  context: CanvasRenderingContext2D;
  ngAfterViewInit(): void {
    this.context = this.canvas.nativeElement.getContext('2d');
  }
}

尽量避免使用`document`，因为长期来看可能会遇到问题。使用`ViewChild`可以避免在DOM中查询元素的优势。一旦应用程序编译完成，Angular已经提前知道需要对哪个元素进行修改，而不需要在DOM中查找。

完整示例可以查看这个演示

更新

对于Angular 8，需要像这样使用`ViewChild`。

@ViewChild('myCanvas', {static: false}) 
myCanvas: ElementRef;

有关更多信息，请查看在Angular 8中如何使用ViewChild的新的static选项？

对，谢谢。但是用`var ctx = this.canvas.nativeElement.getContext("2d");`似乎也可以。

我得到了"getContext does not exist on ElementRef"的错误。

有趣的是，采纳的答案中有一个细微的错误，应该是`myCanvas.nativeElement.getContext`。

谢谢。我将类型切换为HTMLCanvasElement，但仍然不起作用。我现在成功渲染了！

欲了解更多类型信息，请查看更新后的答案:)在使用typescript时，没有人喜欢搜索canvas方法！

谢谢。我对Angular还很陌生，在编码时没有真正看到JS/Typescript的桥梁，只有在转译时才能看到。

你使用的是什么编辑器？如果你使用VSCode或带有typescript插件的Sublime Text，你的生活将变得更加轻松！

让我们在聊天中继续讨论。

这个答案对我帮助很大。Angular 8需要一个装饰器的第二个参数。现在应该是这个样子：@ViewChild('myCanvas', {static:false}) myCanvas: ElementRef;

嗨！我遵循了这个建议，但是我一直得到 "Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of undefined"。你们有任何想法吗？

我想你现在可能已经解决了，但这意味着对canvas元素的引用要么不正确，要么在调用`ngAfterViewInit`时canvas元素不存在。如果它被包裹在例如`*ngIf`中，并且此时为false，就可能会出现这种情况。

是的，确实是这样，它被包裹在*ngIf中。我最后找到了解决方法，但非常感谢你的回复。我真的很感激。

0