Raphaeljs / Javascript - о получении переменной объекта "this" / в функцию наведения мыши - PullRequest
Новая
       10

Raphaeljs / Javascript - о получении переменной объекта "this" / в функцию наведения мыши

1 голос
/ 13 февраля 2012

Я довольно новичок в различных конструкциях и структурах ООП.то, что я пытаюсь сделать, это создать функцию, которая будет генерировать значок меню, который анимируется при наведении мыши / мышью.Поэтому я просто вызову функцию и введу (x, y, width, height и т. Д.) И позволю ей сгенерировать значок меню с несколькими функциями анимации.Я пытаюсь использовать ключевое слово "this", чтобы иметь обобщенную модель, чтобы упростить создание нескольких меню.но я не могу применить ключевое слово "this" в функцию.Пожалуйста, дайте мне несколько советов о том, что я должен делать.Заранее спасибо.

function button(x, y, width, height, text1, text2) {
paperWidth = width +10;
paperHeight = height + 10;
this.paper = Raphael(x, y, paperWidth, paperHeight); // sets the paper dimension with x and y coordinates
// menu box variables
this.rectFrontX = x+20; this.rectFrontY = y+20; this.rectFrontWidth = 70; this.rectFrontHeight = 45;
this.rectBackX = x+10; this.rectBackY = y+10; this.rectBackWidth = 95; this.rectBackHeight = 67;
// text variables
this.textLine1X = x+45+10; this.textLine1Y = y+25+10; 
this.textLine2X = x+45+10, this.textLine2Y = y+35+15;

// menu box variables
rectFrontX = x+20; rectFrontY = y+20; rectFrontWidth = 70; rectFrontHeight = 45;
rectBackX = x+10; rectBackY = y+10; rectBackWidth = 95; rectBackHeight = 67;
// text variables
textLine1X = x+45+10; textLine1Y = y+25+10; 
textLine2X = x+45+10, textLine2Y = y+35+15;

//testing variables only, not using
currentX = x;
currentY= y;
this.x = x; this.y = y;

// initialize menu variables
var backBox = this.paper.rect(this.rectBackX, this.rectBackY, this.rectBackWidth, this.rectBackHeight).attr({fill: "white", "cursor": "pointer"});
var midBox = this.paper.rect(this.rectFrontX, this.rectFrontY, this.rectFrontWidth, this.rectFrontHeight).attr({fill: "#CCC", opacity: 0.0, "cursor": "pointer"});
var frontBox = this.paper.rect(this.rectFrontX, this.rectFrontY, this.rectFrontWidth, this.rectFrontHeight).attr({fill: "gray", opacity: 1.0, "cursor": "pointer"}); //dark grey menu box
var backLineTop = this.paper.text(this.textLine1X, this.textLine1Y, text1).attr({"font-size":14, "fill": "#fff", "cursor": "pointer"});
var backLineBottom = this.paper.text(this.textLine2X, this.textLine2Y, text2).attr({"font-size":14, "fill": "#fff", "cursor": "pointer"});
var frontLineTop = this.paper.text(this.textLine1X, this.textLine1Y, text1).attr({"font-size":14, "fill": "#fff", "opacity": 0.0,  "cursor": "pointer"});
var frontLineBottom = this.paper.text(this.textLine2X, this.textLine2Y, text2).attr({"font-size":14, "fill": "#fff", "opacity": 0.0,  "cursor": "pointer"});
var menuOverlay = this.paper.rect(this.rectBackX, this.rectBackY, this.rectBackWidth, this.rectBackHeight).attr({"fill": "red", "cursor": "pointer", "opacity": 0.3}); // overlays menu box for 




menuOverlay.mouseover(function() {
// set initial property values before animation
    frontBox.attr({"x": rectFrontX, "y": rectFrontY});
    midBox.attr({"x": x, "y": y});
    frontLineTop.attr({"x": textLine1X-20, "y": textLine1Y-20, "font-size": 6, opacity: 1.0});
    frontLineBottom.attr({"x": textLine2X-20, "y": textLine2Y-20, "font-size": 6, opacity: 1.0});
    backLineTop.attr({"x": textLine1X, "y": textLine1Y-20, "font-size": 6, opacity: 1.0});
    backLineBottom.attr({"x": textLine2X, "y": textLine2Y-20, "font-size": 6, opacity: 1.0});

    // animation values
    frontBox.animate({"x": currentX+40, "y": currentY+30,  "width": rectFrontWidth, "height": rectFrontHeight,"opacity": 0.0}, 1000, "linear"); // frontbox fading away from screen
    midBox.animate({"x": currentX+20, "y": currentY+20, "width": rectFrontWidth, "height": rectFrontHeight, "opacity": 1.0, "fill": "#CCC"}, 1500, "bounce"); // midbox drops in from the top left
    frontLineTop.animate({"font-size": 14, "x": textLine1X, "y": textLine1Y, "opacity": 1.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    frontLineBottom.animate({"font-size": 14, "x": textLine2X, "y": textLine2Y,  "opacity": 1.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
    backLineTop.animate({"font-size": 6, "x": textLine1X+35, "y": textLine1Y+65,  "opacity": 0.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    backLineBottom.animate({"font-size": 6, "x": textLine1X+35, "y": textLine1Y+35,  "opacity": 0.0, "fill": "black"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
});
menuOverlay.mouseout(function() {
// set initial property values before animation
    frontBox.attr({"x": rectFrontX, "y": rectFrontY-20, "opacity": 1.0 });
    midBox.attr({"x": rectFrontX+0, "y": rectFrontY+0});
    backLineTop.attr({"x": textLine1X, "y": textLine1Y-20, "font-size": 6, opacity: 1.0, "fill": "white"});
    backLineBottom.attr({"x": textLine2X, "y": textLine2Y-20, "font-size": 6, opacity: 1.0, "fill": "white"});

    // animation values
    midBox.animate({"x": rectFrontX+40, "y": rectFrontY+20, "width": rectFrontWidth, "height": rectFrontHeight, "opacity": 0.0 }, 1500, "bounce");
    frontBox.animate({"x": rectFrontX, "y": rectFrontY,  "width": rectFrontWidth, "height": rectFrontHeight,"opacity": 1.0, "fill": "gray"}, 1500, "bounce"); // frontbox fading away from screen
    backLineTop.animate({"font-size": 14, "x": textLine1X, "y": textLine1Y, "opacity": 1.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    backLineBottom.animate({"font-size": 14, "x": textLine2X, "y": textLine2Y,  "opacity": 1.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
    frontLineTop.animate({"font-size": 14, "x": textLine1X+20, "y": textLine1Y+15, "opacity": 0.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and  10 to X
    frontLineBottom.animate({"font-size": 14, "x": textLine2X+20, "y": textLine2Y+15, "opacity": 0.0, "fill": "white"}, 500, "linear"); // animate text on mouse over adding 20 to Y and 10 X
});
}

// I will then call the function to create the menu icon
var testMenuIcon = new button(10, 10, 120,  120, "menu text line 1", "menu text line 2");

Теперь проблема в том, что когда я пытаюсь использовать ключевое слово "this" в функции наведения мыши, он не может получить туда переменную "this", поэтому, если я создаю несколько значков менюЗначения x, y среди 2 или более значков меню смешиваются, поскольку одни и те же значения используются для разных значков меню.Посоветуйте, пожалуйста, как лучше всего это сделать.

1 Ответ

0 голосов
/ 13 февраля 2012

Вы не можете получить доступ к this экземпляра меню внутри mouseover, потому что теперь это означает другую область. чтобы исправить это 

function button(x, y, width, height, text1, text2) {
  //Your code

  //based on your logic use
  var self = this; 
  //or 
  var self = menuOverlay; 

  menuOverlay.mouseover(function() {
     //You can use self to access the menu now (self.whatever)
  }  
}
...