Javascript 在构造函数中定义悬停效果
我想我有一个非常简单的问题。使用Pixijs,我使用相同的构造函数创建多个对象。对于每个对象,我定义了相同的鼠标悬停效果。这怎么能简化呢 建造商:Javascript 在构造函数中定义悬停效果,javascript,pixi.js,Javascript,Pixi.js,我想我有一个非常简单的问题。使用Pixijs,我使用相同的构造函数创建多个对象。对于每个对象,我定义了相同的鼠标悬停效果。这怎么能简化呢 建造商: function thinarrow(divid,rotation,rendwidth,rendheight,spritewidth,spriteheight){ var that = this; //renderer & stage this.rendererstage = new rendererstage(""
function thinarrow(divid,rotation,rendwidth,rendheight,spritewidth,spriteheight){
var that = this;
//renderer & stage
this.rendererstage = new rendererstage("",divid,rendwidth,rendheight)
//Creating Elements
this.arrowblurFilter = new blurfilter(0,0);
this.arrow = new DisplayObjectContainer(spriteheight,spritewidth,true)
this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);
this.rendererstage.stage.addChild(this.arrow);
this.arrow.addChild(this.arrowblur);
this.arrow.addChild(this.arrowimg);
//Animate
this.animate = function(){
that.rendererstage.renderer.render(that.rendererstage.stage);
requestAnimationFrame(that.animate);
}
}
在body load上调用init.js
peoplearrowleft = new thinarrow("peoplearrowleft",Math.PI/2,116,250,125,58);
peoplearrowright = new thinarrow("peoplearrowright",-Math.PI/2,116,250,125,58);
requestAnimationFrame(peoplearrowleft.animate);
requestAnimationFrame(peoplearrowright.animate);
peoplearrowright.arrow.mouseover = function(mouseData){
peoplearrowright.arrowblur.filters = [peoplearrowright.arrowblurFilter.blurfilter];
TweenMax.to(peoplearrowright.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
}
peoplearrowright.arrow.mouseout = function(mouseData){
TweenMax.to(peoplearrowright.arrowblurFilter.blurfilter, 0.8, {blurX:0, blurY:0, onComplete:function(){
peoplearrowright.arrowblur.filters = null;
}});
}
peoplearrowleft.arrow.mouseover = function(mouseData){
peoplearrowleft.arrowblur.filters = [peoplearrowleft.arrowblurFilter.blurfilter];
TweenMax.to(peoplearrowleft.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
}
peoplearrowleft.arrow.mouseout = function(mouseData){
TweenMax.to(peoplearrowleft.arrowblurFilter.blurfilter, 0.8, {blurX:0, blurY:0, onComplete:function(){
peoplearrowleft.arrowblur.filters = null;
}});
}
我想你可以看到这段代码不是很细,但我只是不知道如何减少它。我不熟悉面向对象的javascript。如果您想以面向对象的方式实现这一点,可以扩展DisplayObjectContainer来创建新的Arrow对象。大概是这样的:
function Arrow(spriteheight, spritewidth) {
PIXI.DisplayObjectContainer.call(this, spriteheight, spritewidth, true);
this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);
this.addChild(this.arrowblur);
this.addChild(this.arrowimg);
this.arrowblurFilter = new BlurFilter(0,0);
this.mouseover = this.onMouseOver;
}
Arrow.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
Arrow.prototype.constructor = Arrow;
// define additional functions after Object.create:
Arrow.prototype.someCustomFunction = function() {
// this.doSomething();
};
Arrow.prototype.onMouseOver = function() {
this.arrowblur.filters = [this.arrowblurFilter];
TweenMax.to(this.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
};
this.arrow = new Arrow(spriteheight,spritewidth);
this.rendererstage.stage.addChild(this.arrow);
然后像这样使用它:
function Arrow(spriteheight, spritewidth) {
PIXI.DisplayObjectContainer.call(this, spriteheight, spritewidth, true);
this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);
this.addChild(this.arrowblur);
this.addChild(this.arrowimg);
this.arrowblurFilter = new BlurFilter(0,0);
this.mouseover = this.onMouseOver;
}
Arrow.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
Arrow.prototype.constructor = Arrow;
// define additional functions after Object.create:
Arrow.prototype.someCustomFunction = function() {
// this.doSomething();
};
Arrow.prototype.onMouseOver = function() {
this.arrowblur.filters = [this.arrowblurFilter];
TweenMax.to(this.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
};
this.arrow = new Arrow(spriteheight,spritewidth);
this.rendererstage.stage.addChild(this.arrow);