gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 21:06:53 25 4
gpt4 key购买 nike

我正在使用 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 大师,请帮我重新编码。呵呵呵呵非常感谢你们。

最佳答案

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

我刚刚转换了 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);
}
}

关于javascript - 普通 Javascript 在 Angular CLI 组件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46519404/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com