如何创建响应调整大小的Angular 2基于画布的组件？

发布时间：2020-12-17 10:24:14 所属栏目：安全来源：网络整理

导读：我想创建一个视图只是一个canvas元素的组件.我希望这个组件：使用画布填充放置的任何元素在初始化过程中确定其宽度和高度了解何时调整大小,确定其新的高度和宽度,并做出适当的响应. 我想我可以通过将组件模板中画布的宽度和高度指定为100％来实现第一部分

我想创建一个视图只是一个canvas元素的组件.我希望这个组件：

>使用画布填充放置的任何元素
>在初始化过程中确定其宽度和高度
>了解何时调整大小,确定其新的高度和宽度,并做出适当的响应.

我想我可以通过将组件模板中画布的宽度和高度指定为100％来实现第一部分,如下所示：

@Component({
selector: 'canvas-component',template:'<canvas style="width:100%; height:100%"></canvas>'
})

但我不知道如何进行第二或第三部分.

最终目标是能够在画布中绘制占据画布相同大小的形状,无论其大小如何.举个例子,我想绘制一个直径为画布宽度3/4的圆圈 – 所以如果画布增大或缩小,圆圈也应该重新绘制,增长或缩小.

我不知道这是否重要,但我正在使用Typescript制作网络应用程序.

有谁知道实现这个目标的好方法？我正在寻找最可能的“Angular方式”,因为这是我用来学习Angular 2的个人项目.

提前致谢！

这远非一个“答案”,但应该让你去：

零件

import { Component,ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myCanvas') canvas;

  onResize() {
    // Not a good thing to do but will get you going.
    // I need to look into the Renderer service instead.
    const canvasElement = this.canvas.nativeElement;

    // These don't change (canvas intrinsic dimensions)
    const canvasWidth = canvasElement.width;
    const canvasHeight = canvasElement.height;

    // These will change (scaling applied by the style)
    const computedStyles = getComputedStyle(canvasElement);
    const computedWidth = computedStyles.width;
    const computedHeight = computedStyles.height;
  }
}

模板

<div (window:resize)="onResize()"></div>
<canvas #myCanvas style="width:100%; height:100%" width="150" height="150"></canvas>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!