Definisci l'effetto panoramico nel costruttore

Question

Penso di avere una domanda molto semplice.Con Pixijs creo più oggetti con lo stesso costruttore.Per ogni oggetto che definisco lo stesso effetto del mouseover.Come può essere semplificato?

Costruttore:

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 (chiamato body-load)

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

.

Penso che tu possa vedere che questo codice non è molto sottile, ma semplicemente non so come ridurlo.Sono nuovo per l'orientamento dell'oggetto JavaScript.

Answer 1

Se si desidera eseguire questa operazione in un modo OOP, è possibile estendere DisplayObjectContainer per creare un nuovo oggetto freccia.Qualcosa del genere:

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

.

Quindi usalo come questo:

this.arrow = new Arrow(spriteheight,spritewidth);
this.rendererstage.stage.addChild(this.arrow);

.