Question

我想我有一个非常简单的问题。使用Pixijs，我使用相同的构造函数创建多个对象。对于每个对象，我定义相同的鼠标悬停效果。如何简化这个？

构造

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);    
    }
}

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的新手。

Answer 1

如果要以OOP方式执行此操作，可以扩展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);

在构造函数中定义悬停效果

1 个答案: