Как отключить холст p5 при нажатии кнопки - PullRequest
Новая
       41

Как отключить холст p5 при нажатии кнопки

1 голос
/ 07 февраля 2020

Я использую p5.js для рисования. Я использовал код ниже, и он отлично работает для рисования. 

sketch(p: any) {
    p.setup = function () {
      var canvas = p.createCanvas(700, 400);
      canvas.parent('sketchdiv');
      p.strokeWeight(5);
      p.stroke(0);
      p.windowWidth = 700;
      p.windowHeight = 400;
    };
    p.draw = () => {
      if (p.mouseIsPressed) {
        if (p.mouseButton === p.LEFT) {
          p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);
        } else if (p.mouseButton === p.CENTER) {
          p.background(255);
        }
      }
    };

    p.mouseReleased = () => {
      // modulo math forces the color to swap through the array provided
      // this.strokeColor = (this.strokeColor + 1) % this.c.length;
      // p.stroke(this.c[this.strokeColor]);
      // console.log(`color is now ${this.c[this.strokeColor]}`);
      console.log("mouseReleased");
    };
}

Но у меня есть другой холст (который использует нажатие мыши, вращение и т. Д. c.) В режиме bootstrap. Когда я выполняю вращение мыши на bootstrap модальном холсте, он также выводит aws на фоновом холсте. Я не хочу ничего рисовать на холсте основного экрана, когда я вращаюсь на холсте bootstrap.

Как это сделать? Пожалуйста, Помощь / Руководство.

1 Ответ

1 голос
/ 07 февраля 2020

Не уверен, правильно ли я понял, но вы можете ограничить область событий мыши указанным c холстом, назначив ему соответствующие события: 

const sketchA = p => {
  p.setup = () => {
    p.createCanvas(60, 60)
    p.background(100)
  }
  
  p.mousePressed = () => {
    p.background(p.random(255), p.random(255),p.random(255))
  }
}

const sketchB = p => {
  p.setup = () => {
    const canvas= p.createCanvas(60, 60)
    p.background(100)
    
    canvas.mousePressed(
      () => {
        p.background(p.random(255), p.random(255),p.random(255))
      }
    )
  }
}

new p5(sketchA, document.getElementById("sk-a"))
new p5(sketchB, document.getElementById("sk-b"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

<div>
  <label> Capture clicks in all the viewport </label>
  <div id="sk-a"></div>
<div>
<div>
  <label> Capture clicks in the canvas only </label>
  <div id="sk-b"></div>
</div>
...