- 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/
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 5 年前。
DBMS 供应商使用 SQL 方言特性来区分他们的产品,同时声称支持 SQL 标准。 'Nuff 说。 您编写的任何 SQL 示例是否无法转换为 SQL:2008 标准 SQL? 具体来说,我说的是
多年来,我一直在考虑这个问题,但从未成功实现过。我说的是一个快速、高效的 C 函数,它在输入中接受一个整数值(例如 16 位),并在输出中给出完全不同的相同位大小的数字,但“考虑到”所有数字已经给出了
当标准 iPhone UI 控件变得过于平淡,并且您希望简单的记分应用程序通过颜色、动画、非标准 GUI 字体和背景壁纸等流行时。 ,为这样的事情集成游戏引擎有意义吗? 我对 Unity3D 和 To
这是我的第一个问题,所以如果我没有正确地标记标签,我很抱歉。我尝试过...这是我的问题:我希望有人能告诉我如何为普通的表格 View 创建 2 行节标题。我遇到的问题是:1)我找不到可以模仿默认 1
所以我一直在开发一个仅使用普通 JavaScript 的“非常简单”的计算器。但我不知道为什么它现在起作用了。 这是我的 JavaScript 和 HTML 代码: (function() { "
我正在尝试编写一个函数来满足以下要求: 给定一个对象和一个键,“getElementsThatEqual10AtProperty”返回一个数组,其中包含位于给定键处等于 10 的数组的所有元素。 注释
[最终编辑:我觉得有必要做出回应,因为我从这篇文章中学到了很多东西(主要是通过你们,我花了更多的时间来理解CSS..但最后,我真的不知道如何为了使这项工作有效..除了真正破坏html的基本结构..我不
我希望能够将一个函数附加到一个元素上,该函数只有在该元素上单击指定时间后才会运行。 有几个( 1 、 2 、 3 )与在 javascript 中处理鼠标保持相关的问题;但这些问题要么使用 jQuer
我想将泛型函数保存为变量: (defvar *gf* (make-instance 'standard-generic-function) 但是在添加方法时,我必须自己定义call-next-meth
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
我有一个普通的 tableView——一个部分——当我滚动时,行出现在标题后面。像这样: 有没有简单的方法来防止这种情况?我认为它与 contentInset 有关,但这也会移动标题,这不是我想要的。
你好,我有一个ajax表单,它返回一个控制“发送”动画的脚本。然而,当淡入开始时,它会停止在 0.1 不透明度。我不确定脚本中有什么问题。任何帮助将不胜感激。 quote_form = documen
这是演示我的问题的代码笔:http://codepen.io/PiotrBerebecki/pen/yaWQwZ 目标是当用户点击时有滚动动画 顶部导航链接,以及 Back to Top 按钮在右下角
在我重新发明轮子之前,纯Java中有类似主题的并发队列吗?我有以下要求: 多个读者/消费者 多名作家/制片人 每条消息都必须由每个(活跃的)消费者消费 在每个消费者阅读一条消息后,它应该变成垃圾(即不
这个问题与 Do MySQL tables need an ID? 有一个无意义的auto_incremental ID作为一个表的PRIMARY KEY,那么我创建其他KEY时,我是否应该在KEY中
我有一个普通 UITableView 并且我想隐藏分隔符。为了隐藏它,我尝试使用以下属性: 我也在 viewDidLoad 中设置了它。 self.tableView.separatorStyle =
var vettore = document.getElementById(id_form).elements; for (var i = 0; i '+vettore_nomi_file[i]; 最
我已经构建了一个非常简单的轮播,但有一个问题。在我的轮播中,我有三张幻灯片,一个上一个按钮和一个下一个按钮。我想要的是当我单击下一个按钮并在最后一张幻灯片上转到第一张幻灯片时。此外,当我单击上一个按钮
我是 javascript 的新手,所以我需要一些帮助。 我正在尝试制作一个简单的插件(当然只是为了学习,以便更好地理解事物),但我遇到了一些麻烦,我将不胜感激。 我的插件是基本的,我正在尝试为 sc
我是一名优秀的程序员,十分优秀!