Переключить состояние кнопки изнутри класса (p5. js) - PullRequest
Новая
       11

Переключить состояние кнопки изнутри класса (p5. js)

1 голос
/ 20 апреля 2020

Мне нужно создать свой собственный переключатель / кнопку, которая имеет либо состояние «включено», либо «выключено», и я хочу, чтобы это было как объект, чтобы я мог сделать много. Но draw () / constant l oop затрудняет установку состояния. Что я делаю не так? 

let s;
    
function setup() {
  createCanvas(400, 400);
  background('gray');
  
  s = new Switch(100,100);  
}

function draw() {
  s.draw();
}


function mousePressed(status) {
    if (status === false) { 
      return true;
    } else if (status === true) {
      return false;
    }  
}

class Switch {
  constructor(x,y) {
    this.status = true;
    this.statusColour = 'black';
    this.pos = createVector(x,y);
    this.size = 100;
  }
  
  intersect() {
    if ((mouseX >= this.pos.x && mouseX <= this.pos.x+this.size) && (mouseY >= this.pos.y && mouseY <= this.pos.y+this.size)) {
      return true;
    }
  }
  
  draw() {
    noStroke();
    fill(this.statusColour);
    rect(this.pos.x,this.pos.y,this.size,this.size);
    
    // Action to make switch
    this.intersect() ? this.status = mousePressed(this.status) : null;
    
    
    this.status === true ? this.statusColour = 'green' : this.statusColour = 'black';
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

1 Ответ

1 голос
/ 20 апреля 2020

Вы делаете это неправильно. mousePressed() является обратным вызовом события. Он вызывается системой. Никогда не звоните прямо. При нажатии мыши вызывается функция обратного вызова события mousPressed().

Добавить метод к классу Switch, который опрокидывает кнопку: 

class Switch {
    // [...]

    switchState() {
        if (this.intersect()) {
            this.status = !this.status;
            this.statusColour = this.status ? 'black' : 'green';
        }
    }

    // [...]
}

Делегировать обратный вызов мыши к этому методу: 

function mousePressed(status) {
    s.switchState();
}

См. пример: 

let s;

function setup() {
    createCanvas(400, 400);
    background('gray');

    s = new Switch(100,100);  
}

function draw() {
    s.draw();
}

function mousePressed(status) {
    s.switchState();
}

class Switch {
    constructor(x,y) {
      this.status = true;
      this.statusColour = 'black';
      this.pos = createVector(x,y);
      this.size = 100;
    }

    intersect() {
        return mouseX >= this.pos.x && mouseX <= this.pos.x+this.size && mouseY >= this.pos.y && mouseY <= this.pos.y+this.size;
    }

    switchState() {
        if (this.intersect()) {
            this.status = !this.status;
            this.statusColour = this.status ? 'black' : 'green';
        }
    }

    draw() {
        noStroke();
        fill(this.statusColour);
        rect(this.pos.x,this.pos.y,this.size,this.size);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
...