javascript - 普通 Javascript 在 Angular CLI 组件中不起作用

Question

我正在使用 Angular CLI 开发网络。我正在尝试应用类似的东西:

https://codepen.io/chrisdoble/pen/WQLLVp

有没有办法在 component.ts 中编写纯 javascript。

这是我的 JS:

    var image = document.getElementById('hero-bg');
    var imageCanvas = document.createElement('canvas');
    var imageCanvasContext = imageCanvas.getContext('2d');
    var lineCanvas = document.createElement('canvas');
    var lineCanvasContext = lineCanvas.getContext('2d');
    var pointLifetime = 1000;
    var points = [];
    var newImage = document.getElementById('hero')

    if (image.complete) {
        start();
    } else {
        image.onload = start;
    }

    function start() {
        document.addEventListener('mousemove', onMouseMove);
        window.addEventListener('resize', resizeCanvases);
        newImage.appendChild(imageCanvas);
        resizeCanvases();
        tick();
    }

    function onMouseMove(event) {
        points.push({
            time: Date.now(),
            x: event.clientX,
            y: event.clientY
        });
    }

    function resizeCanvases() {
        imageCanvas.width = lineCanvas.width = window.innerWidth;
        imageCanvas.height = lineCanvas.height = window.innerHeight;
    }

    function tick() {
        // Remove old points
        points = points.filter(function(point) {
            var age = Date.now() - point.time;
            return age < pointLifetime;
        });

        drawLineCanvas();
        drawImageCanvas();
        requestAnimationFrame(tick);
    }
    function drawLineCanvas() {
        var minimumLineWidth = 25;
        var maximumLineWidth = 100;
        var lineWidthRange = maximumLineWidth - minimumLineWidth;
        var maximumSpeed = 50;

        lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
        lineCanvasContext.lineCap = 'round';
        lineCanvasContext.shadowBlur = 30;
        lineCanvasContext.shadowColor = '#000';

        for (var i = 1; i < points.length; i++) {
            var point = points[i];
            var previousPoint = points[i - 1];

            // Change line width based on speed
            var distance = getDistanceBetween(point, previousPoint);
            var speed = Math.max(0, Math.min(maximumSpeed, distance));
            var percentageLineWidth = (maximumSpeed - speed) / maximumSpeed;
            lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange;

            // Fade points as they age
            var age = Date.now() - point.time;
            var opacity = (pointLifetime - age) / pointLifetime;
            lineCanvasContext.strokeStyle = 'rgba(0, 0, 0, ' + opacity + ')';

            lineCanvasContext.beginPath();
            lineCanvasContext.moveTo(previousPoint.x, previousPoint.y);
            lineCanvasContext.lineTo(point.x, point.y);
            lineCanvasContext.stroke();
        }
    }

    function getDistanceBetween(a, b) {
        return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
    }

    function drawImageCanvas() {
        // Emulate background-size: cover
        var width = imageCanvas.width;
        var height = imageCanvas.width / image.naturalWidth * image.naturalHeight;

        if (height < imageCanvas.height) {
            width = imageCanvas.height / image.naturalHeight * image.naturalWidth;
            height = imageCanvas.height;
        }

        imageCanvasContext.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
        imageCanvasContext.globalCompositeOperation = 'source-over';
        imageCanvasContext.drawImage(image, 0, 0, width, height);
        imageCanvasContext.globalCompositeOperation = 'destination-in';
        imageCanvasContext.drawImage(lineCanvas, 0, 0);
    }

这是我的组件

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.scss']
})
export class HeroComponent {


}

我得到的错误是这样的:

• 消息:“属性‘complete’在类型‘HTMLElement’上不存在。”
• 消息:“类型‘HTMLElement’上不存在属性‘naturalWidth’。”
• 消息:“类型‘HTMLElement’上不存在属性‘naturalHeight’。”
• 消息:“‘HTMLElement’类型的参数不可分配给‘HTMLCanvasElement’类型的参数 | HTML图像元素 | HTML视频元素 |图像位图'。类型“HTMLElement”不可分配给类型“ImageBitmap”。“HTMLElement”类型中缺少属性“width”。

如果我将代码内联到 Index.html 文件，一切正常，但我不想把它放在那里，我想在我的组件中应用它。

请帮我找到一种在我的 component.ts 中实现这个纯 Javascript 的方法。或者，如果这里有任何 Typescript 大师，请帮我重新编码。呵呵呵呵非常感谢你们。

Answer 1

您不必使用 jQuery。 Angular 具备与 dom 交互的所有功能。
你必须使用 https://angular.io/api/core/Renderer2和 https://angular.io/api/core/HostListener以 angular 可以理解的方式调整代码。

我刚刚转换了 https://codepen.io/chrisdoble/pen/WQLLVp 的代码以 Angular 方式。这是您要查找的示例:

export class NativeBlurComponent implements OnInit {
  img = new Image();
  imageCanvas = document.createElement('canvas');
  imageCanvasContext = this.imageCanvas.getContext('2d');
  lineCanvas = document.createElement('canvas');
  lineCanvasContext = this.lineCanvas.getContext('2d');
  pointLifetime = 1000;
  points = [];

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
    this.img.src = document.querySelector('img').src;
    if (this.img.complete) {
      this.start();
    } else {
      this.img.onload = this.start;
    }
  }

  start() {
    this.renderer.appendChild(document.body, this.imageCanvas);
    this.resizeCanvases();
    this.tick();
  }

  @HostListener('document:mousemove', [ '$event' ])
  onMouseMove(event) {
      this.points.push({
          time: Date.now(),
          x: event.clientX,
          y: event.clientY
      });
  }
  @HostListener('window:resize', [ '$event' ])
  resizeCanvases() {
      this.imageCanvas.width = this.lineCanvas.width = window.innerWidth;
      this.imageCanvas.height = this.lineCanvas.height = window.innerHeight;
  }

  tick() {
      // Remove old points
      this.points = this.points.filter(function(point) {
          const age = Date.now() - point.time;
          return age < this.pointLifetime;
      });

      this.drawLineCanvas();
      this.drawImageCanvas();
      requestAnimationFrame(this.tick);
  }
  drawLineCanvas() {
      const minimumLineWidth = 25;
      const maximumLineWidth = 100;
      const lineWidthRange = maximumLineWidth - minimumLineWidth;
      const maximumSpeed = 50;

      this.lineCanvasContext.clearRect(0, 0, this.lineCanvas.width, this.lineCanvas.height);
      this.lineCanvasContext.lineCap = 'round';
      this.lineCanvasContext.shadowBlur = 30;
      this.lineCanvasContext.shadowColor = '#000';

      for (let i = 1; i < this.points.length; i++) {
          const point = this.points[i];
          const previousPoint = this.points[i - 1];

          // Change line width based on speed
          const distance = this.getDistanceBetween(point, previousPoint);
          const speed = Math.max(0, Math.min(maximumSpeed, distance));
          const percentageLineWidth = (maximumSpeed - speed) / maximumSpeed;
          this.lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange;

          // Fade points as they age
          const age = Date.now() - point.time;
          const opacity = (this.pointLifetime - age) / this.pointLifetime;
          this.lineCanvasContext.strokeStyle = 'rgba(0, 0, 0, ' + opacity + ')';

          this.lineCanvasContext.beginPath();
          this.lineCanvasContext.moveTo(previousPoint.x, previousPoint.y);
          this.lineCanvasContext.lineTo(point.x, point.y);
          this.lineCanvasContext.stroke();
      }
  }

  getDistanceBetween(a, b) {
      return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
  }

  drawImageCanvas() {
      // Emulate background-size: cover
      let width = this.imageCanvas.width;
      let height = this.imageCanvas.width / this.img.naturalWidth * this.img.naturalHeight;

      if (height < this.imageCanvas.height) {
          width = this.imageCanvas.height / this.img.naturalHeight * this.img.naturalWidth;
          height = this.imageCanvas.height;
      }

      this.imageCanvasContext.clearRect(0, 0, this.imageCanvas.width, this.imageCanvas.height);
      this.imageCanvasContext.globalCompositeOperation = 'source-over';
      this.imageCanvasContext.drawImage(this.img, 0, 0, width, height);
      this.imageCanvasContext.globalCompositeOperation = 'destination-in';
      this.imageCanvasContext.drawImage(this.lineCanvas, 0, 0);
  }
}