diff --git a/src/app/layout/passport/particle.ts b/src/app/layout/passport/particle.ts index 120a0420..8f8b513b 100644 --- a/src/app/layout/passport/particle.ts +++ b/src/app/layout/passport/particle.ts @@ -17,7 +17,7 @@ export default class Particle { var ParticleNetworkAnimation: any, PNA: any; ParticleNetworkAnimation = PNA = function () {}; - PNA.init = function (element: any) { + PNA.prototype.init = function (element: any) { console.log(this); this.$el = document.getElementsByClassName(element); @@ -33,7 +33,7 @@ export default class Particle { return this; }; - PNA.bindUiActions = function () { + PNA.prototype.bindUiActions = function () { (window as any).on('resize', () => { // this.sizeContainer(); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); @@ -42,62 +42,44 @@ export default class Particle { }); }; - PNA.sizeCanvas = function () { + PNA.prototype.sizeCanvas = function () { this.canvas.width = this.container.offsetWidth; this.canvas.height = this.container.offsetHeight; }; - // PNA = { - // init: function (element: any) { - // console.log(element); - - // this.$el = document.getElementsByClassName(element); - - // this.container = element; - // this.canvas = document.createElement('canvas'); - // this.sizeCanvas(); - // this.container.appendChild(this.canvas); - // this.ctx = this.canvas.getContext('2d'); - // // this.particleNetwork = new ParticleNetwork(this); - - // this.bindUiActions(); - - // return this; - // }, - // bindUiActions: function () { - // (window as any).on('resize', () => { - // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - // // this.sizeContainer(); - // this.sizeCanvas(); - // this.particleNetwork.createParticles(); - // }); - // }, - // sizeCanvas: function () { - // this.canvas.width = this.container.offsetWidth; - // this.canvas.height = this.container.offsetHeight; - // } - // }; console.log(PNA); - var Particle: any = (parent: any, x: any, y: any) => { - const network = parent; - const canvas = parent.canvas; + const Particle: any = function (parent: any, x?: any, y?: any) { + // this.network = parent; + // this.canvas = parent.canvas; + // this.ctx = parent.ctx; + // this.particleColor = ; + // this.radius = ; + // this.opacity = 0; + // this.x = x || Math.random() * this.canvas.width; + // this.y = y || Math.random() * this.canvas.height; + // this.velocity = { + // x: (Math.random() - 0.5) * parent.options.velocity, + // y: (Math.random() - 0.5) * parent.options.velocity + // }; return { + network: parent, + canvas: parent.canvas, ctx: parent.ctx, - particleColor: this.returnRandomArrayitem(network.options.particleColors), - radius: this.getLimitedRandom(1.5, 2.5), + // particleColor: this.returnRandomArrayitem(parent.options.particleColors), + // radius: this.getLimitedRandom(1.5, 2.5), opacity: 0, - x: x || Math.random() * canvas.width, - y: y || Math.random() * canvas.height, + x: x || Math.random() * parent.canvas.width, + y: y || Math.random() * parent.canvas.height, velocity: { x: (Math.random() - 0.5) * parent.options.velocity, y: (Math.random() - 0.5) * parent.options.velocity } }; }; - // console.log(Particle); + console.log(new Particle(this)); - Particle.update = function () { + Particle.prototype.update = function () { if (this.opacity < 1) { this.opacity += 0.01; } else { @@ -116,7 +98,7 @@ export default class Particle { this.y += this.velocity.y; }; - Particle.draw = function () { + Particle.prototype.draw = function () { // Draw particle this.ctx.beginPath(); this.ctx.fillStyle = this.particleColor; @@ -125,19 +107,21 @@ export default class Particle { this.ctx.fill(); }; - var ParticleNetwork: any = (parent: { canvas: any; ctx: any }) => ({ - options: { + var ParticleNetwork: any = function (this: any, parent: { canvas: any; ctx: any }) { + this.options = { velocity: 1, // the higher the faster density: 15000, // the lower the denser netLineDistance: 200, netLineColor: '#929292', particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ] - }, - canvas: parent.canvas, - ctx: parent.ctx - }); + }; + this.canvas = parent.canvas; + this.ctx = parent.ctx; - ParticleNetwork.init = function () { + this.init(); + }; + + ParticleNetwork.prototype.init = function () { // Create particle objects this.createParticles(true); @@ -147,7 +131,7 @@ export default class Particle { this.bindUiActions(); }; - ParticleNetwork.createParticles = function (isInitial: any) { + ParticleNetwork.prototype.createParticles = function (isInitial: any) { // Initialise / reset particles var me = this; this.particles = []; @@ -173,7 +157,7 @@ export default class Particle { } }; - ParticleNetwork.createInteractionParticle = function () { + ParticleNetwork.prototype.createInteractionParticle = function () { // Add interaction particle this.interactionParticle = new Particle(this); this.interactionParticle.velocity = { @@ -184,7 +168,7 @@ export default class Particle { return this.interactionParticle; }; - ParticleNetwork.removeInteractionParticle = function () { + ParticleNetwork.prototype.removeInteractionParticle = function () { // Find it var index = this.particles.indexOf(this.interactionParticle); if (index > -1) { @@ -194,7 +178,7 @@ export default class Particle { } }; - ParticleNetwork.update = function () { + ParticleNetwork.prototype.update = function () { if (this.canvas) { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.globalAlpha = 1; @@ -242,7 +226,7 @@ export default class Particle { } }; - ParticleNetwork.bindUiActions = function () { + ParticleNetwork.prototype.bindUiActions = function () { // Mouse / touch event handling this.spawnQuantity = 3; this.mouseIsDown = false; @@ -321,7 +305,7 @@ export default class Particle { // this.canvas.addEventListener('touchend', this.onTouchEnd); }; - ParticleNetwork.unbindUiActions = function () { + ParticleNetwork.prototype.unbindUiActions = function () { if (this.canvas) { // this.canvas.removeEventListener('mousemove', this.onMouseMove); // this.canvas.removeEventListener('touchmove', this.onTouchMove); diff --git a/src/app/routes/passport/components/login/login.component.html b/src/app/routes/passport/components/login/login.component.html index 88def649..89242324 100644 --- a/src/app/routes/passport/components/login/login.component.html +++ b/src/app/routes/passport/components/login/login.component.html @@ -36,8 +36,8 @@ (ngModelChange)="i.setValue($event)" placeholder="密码" (keyup.enter)="submit()" /> - + @@ -67,19 +67,25 @@ +

+ 忘记密码？重置 +

-