- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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 {
}
我得到的错误是这样的:
如果我将代码内联到 Index.html 文件,一切正常,但我不想把它放在那里,我想在我的组件中应用它。
请帮我找到一种在我的 component.ts 中实现这个纯 Javascript 的方法。或者,如果这里有任何 Typescript 大师,请帮我重新编码。呵呵呵呵非常感谢你们。
最佳答案
您不必使用 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);
}
}
关于javascript - 普通 Javascript 在 Angular CLI 组件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46519404/
我在全局范围内安装了最新的 angular-cli,并且我的项目正在成功构建。 在阅读另一个问题的建议解决方案时,(https://github.com/angular/angular-cli/iss
根据official docs关于 .angular-cli.json 配置文件,仅支持 main、test、polyfills 作为 webpack 入口文件。 如何通过定义 .angular-cl
我想在s3存储桶中搜索文件名abc.zip,并且有将近60个存储桶,每个存储桶都有2到3个级别的子目录或文件夹。我尝试使用AWS CLI命令执行搜索,以下是我尝试过的命令,但即使文件存在于存储桶中,也
我正在尝试在 C++/CLI 中查找赋值运算符和复制构造函数的示例。我在 Google 上花了很多时间,但令人惊讶的是我找不到一个看起来很常见的例子。 最佳答案 .NET 语义没有复制构造函数或赋值运
我需要获取另一个窗口的句柄。 这是它的代码: private: System::Void btn_find_Click(System::Object^ sender, System::EventAr
有点好奇实际上有多少人使用 C++/CLI?那么有多少人在使用它呢?人们是否只在托管环境下寻找程序员的特定工作?围绕 c++/cli 的社区有多大?从我目前看到的情况来看,有不少语法变化,作为 C++
我正在阅读一些 C++/CLI Material ,并且遇到了文字字段的概念: literal int inchesPerFoot = 12; 这是否比 const 更可取,因为 const FIEL
通过 npm install -g angular-cli@latest 安装 Angular CLI (angular-cli@1.0.0-beta.16) 失败,出现以下错误 npm-debug.
我正在尝试在我的 Ember CLI 应用程序中配置适配器以根据环境使用不同的主机。在开发中,我希望它是默认的当前主机(让我通过 --proxy 选项自定义它,但在生产中我知道它将是 http://s
我最近开始使用 Angular/CLI 工具,我在执行文件时遇到了一个问题,那就是我运行时 ng serve 那么这个命令可以帮助我们在源文件中进行任何更改时自动重新加载站点,但在我的系统中它没有发生
是否有推荐的方法通过 c++ cli 包装 native c++ 库? 最佳答案 不确定是否一种尺寸适合所有人,但是,是的,这很大程度上是一个机械过程。您的 ref 类包装器应该声明一个私有(priv
我有一个关于为要在 C# 中使用的 native C++ 类创建 C++ CLI 包装器的问题。 这是一个示例代码: #include "stdafx.h" #pragma once using na
下面的代码打印 0 和 3。这是代码生成错误吗?我在 .NET 4.0 下使用 Visual Studio 2012 Update 3 RC 运行它 #include "stdafx.h" using
它是如何工作的?它是否有不同的部分 - 有些方法是托管的,有些是非托管的,它是否将每个方法都转换为托管的,试图保持所有东西都处于托管状态并在必须时进行互操作调用? 最佳答案 三种不同的compiler
如果我没记错的话,函数必须是 CLR 世界中类的成员,而全局函数在 C++/CLI 中是可能的。这是否意味着这些全局函数是某种隐藏的“全局”类的一部分?如果是这样,出于反射目的,人们将如何获取其类型?
如何在 Angular 中重建我的项目。我首先使用 ng build 构建它,但无法再次执行该命令,因为它不会让我更改文件夹。 我收到此错误消息: EPERM:不允许操作,lstat 是否有另一个命令
我遇到了两个相互引用的类的问题。我曾尝试使用接口(interface)来解决问题,但遇到了其他问题,例如类重新定义。我只是不确定如何正确执行此操作。 这是我正在做的事情的一个例子。注意:我已经去掉了所
我是 React.js 的新手,我正在尝试从 tutorialspoint 上的教程中学习但我遇到了错误。这是我执行 npm start 命令时控制台上的错误: C:\Users\HP\Desktop
我正在尝试将我的 angular cli 和 angular core 从 12 升级到 13,但看起来存在对等依赖性问题。有人遇到过这个问题吗? npx @angular/cli@13 update
我正在我的 ubuntu 上安装 influxdb_2.0.9,我按照这里的说明操作: https://docs.influxdata.com/influxdb/v2.0/install/?t=Lin
我是一名优秀的程序员,十分优秀!