试图使用mousePressed按下按钮，它不起作用吗？

Question

我遇到了一些错误。我希望用户通过单击按钮（左眼或右眼）选择一个视线播放器，然后仅将选定的输入绘制到画布上。我正在使用眼动仪在画布上绘制一些png文件。如果用户单击左按钮，我希望它们仅绘制左眼。对于冗长的代码，我感到抱歉，我对代码非常陌生，不知道如何有效地进行操作。我一直在使用的主要变量是“ left”，这是我在setup（）和draw（）中创建的按钮，我经过了一个点数组（clm眼动仪），然后保存了左眼和右眼位置，然后调用鼠标左键的功能。

    // NETWORKED + EYE VARIABLES

let socket = io(); // new socket on client side
let ctracker; // eye tracker obj
let clients = {}; // client object
let data = {}; // data object
let w = 1200; // matrix width
let h = 600; // matrix height
let leftEye, rightEye; // main eye image 
let SleftEye, SrightEye; // shadow eye image 
let leftEyeX, leftEyeY, rightEyeX, rightEyeY; // current user eye data point vars
let cnvPosX, cnvPosY; // postion of main canvas 
let playerLeft = {};
let playerRight = {};
let left,right;

/// SOUND VARIABLES //
let bell, bell1, bell2, bell3; // contains sound source
let bPat, b1Pat, b2Pat; // an array of nums that we can use to make a sequence of beats // 1 = on, 0= off
let bPhrase, b1Phrase, b2Phrase; // defines how the beat pattern is interpreted
let part; // attach all the above (sound,array,phrase) into a machine (part) i.e on/off,looper
let beatLength; // how big is sequence before it starts looping
let cellSize; // each sqauare size contains beat
let row1 = []; // array of sounds in row 1

// DOM variables
let play; // play button
let bg, largeText, smallText; // image variables for game instructions and background
let cnv; // main canvas
let matrixCnv; // canvas that draws the matrix ( music user interface )
let instructCnv; // instruction canvas at the topmost part
let bpmCTRL; // beat per minute slider

// let previousCo = {
//   left: {row: null, column: null},
//   right: {row: null, column:null}
// };



function preload() {
  // background
  bg = loadImage(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2Fdaw-bg.png?v=1589319965142"
  );
  //main game instruction
  largeText = loadImage(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2FAsset%2015.png?v=1589381930278"
  );
  // small game description
  smallText = loadImage(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2FAsset%203.png?v=1589381926354"
  );

  // game main player left eye
  leftEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fleft-eye.png?v=1589284305903"
  );

  // game main player right eye
  rightEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fright-eye.png?v=1589284306011"
  );

  // game shadow player left eye
  SleftEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fother-left-eye.png?v=1589284306106"
  );

  // game shadow player left eye
  SrightEye = loadImage(
    "https://cdn.glitch.com/7e3760d0-fed0-482e-a757-d1ca0280067e%2Fother-right-eye.png?v=1589284332165"
  );

  //sound files
  bell = loadSound(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203490__tesabob2001__g-5.mp3?v=1589326854551",
    () => {}
  );
  bell1 = loadSound(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203485__tesabob2001__c5.mp3?v=1589326924689",
    () => {}
  );
  bell2 = loadSound(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203489__tesabob2001__f5.mp3?v=1589326917439",
    () => {}
  );
  bell3 = loadSound(
    "https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203491__tesabob2001__g-4.mp3?v=1589326867294",
    () => {}
  );
}

function setup() {
  cnvPosX = 120;
  cnvPosY = 50;

  // setup camera capture
  var videoInput = createCapture(VIDEO);
  videoInput.size(w, h);
  videoInput.position(cnvPosX, cnvPosY);
  videoInput.hide();


  // setup tracker 
  ctracker = new clm.tracker();
  ctracker.init(pModel); // feed it model pca 20
  ctracker.start(videoInput.elt); // feed it video data 

 // open socket io for connections
  socket.on("getUpdate", function(data) {
    clients[data.name] = data;
  });


  instructCnv = createGraphics(w, h);
  instructCnv.background(0);


  matrixCnv = createGraphics(w, h); // matrix canvas of daw
  cnv = createCanvas(w, h); // main canvas that the eys are being drawn on
  cnv.position(cnvPosX, cnvPosY); // main. canvas position

  matrixCnv.mousePressed(canvasPressed); //drawMatrix() function on matrix function
  cnv.mousePressed(canvasPressed); // drawMatrix() function on main function

  beatLength = 6; // number of beats it loops thru && columns of matrix
  cellSize = 200; // size of square
  numOfRows = 3; // rows of matrix

  play = createButton('Play/Pause');
  play.position(1300, 10);
  play.size(80,30);
  play.mousePressed(playAudio);



  // basic structure of a Digital Audio Workstation

  // time is a sceduled delay in note play time
  bPat =  [0, 1, 0, 0, 0, 0];
  b1Pat = [0, 0, 1, 0, 1, 1];
  b2Pat = [1, 0, 0, 1, 0, 0];

  // random selection of sound(bell3 or bell) in row 1
  function selectSong() {
    row1 = [bell3, bell];
    selected = row1[floor(random(2))];
    selected.setVolume(0.1);
    selected.play();
  }

  // name, callback, array
  bPhrase = new p5.Phrase(
    "bell",
    time => {
      selectSong();
    },
    bPat
  );
  b1Phrase = new p5.Phrase(
    "bell1",
    time => {
      // make a variable to go there insiead of bell -> use random function to give a value to the variable
      bell1.setVolume(0.1);
      bell1.play(time);
    },
    b1Pat
  );
  b2Phrase = new p5.Phrase(
    "bell2",
    time => {
      bell2.setVolume(0.1);
      bell2.play(time);
    },
    b2Pat
  );

// creating a new part that contains all the above
  part = new p5.Part();
  part.addPhrase(bPhrase); 
  part.addPhrase(b1Phrase);
  part.addPhrase(b2Phrase);

  bpmCTRL = createSlider(30, 200, 60, 1); // smallest val, highest val, starting val, incremental val
  bpmCTRL.position(10, 10); // x, y
  bpmCTRL.input(() => {
    part.setBPM(bpmCTRL.value());
  });
  part.setBPM("60");

  //button left
  left = createButton('Left');
  left.position(300,15);

  // drawing the grid
  drawMatrix();
}



function draw() {

  image(matrixCnv, 0, 0);
  // background(bg);


  let positions = ctracker.getCurrentPosition();

  for (let i = 0; i < positions.length; i++) {

    // find in array each position point


    playerLeft = {
    x : positions[27][0],
    y : positions[27][1]


    playerRight = {
    x : positions[32][0],
    y : positions[32][1]
  }



    left.mousePressed(drawLeft(playerLeft.x, playerLeft.y));



    // formatting each point into a dict entry to send over socket io


    data[(27).toString() + "." + "0"] = playerLeft.x;
    data[(27).toString() + "." + "1"] = playerLeft.y;

    data[(32).toString() + "." + "0"] = playerRight.x;
    data[(32).toString() + "." + "1"] = playerRight.y;


    // update client details
    data["name"] = socket.id;
    data["updated"] = new Date().getTime();
    socket.emit("update", data);

    //recieving data by other client and drawing
    var x, y;
    for (var c in clients) {
      if (c == socket.id) {
        // if client is not the the current user
        continue;
      }
      var points = clients[c];

      // console.log(points)

      var leftEyePoint = {
        x: points['27.0'],
        y: points['27.1']
      };

      var rightEyePoint = {
        x: points['32.0'],
        y: points['32.1']
      };

      image(SleftEye, leftEyePoint.x, leftEyePoint.y, 150, 100)
      image(SrightEye, rightEyePoint.x, rightEyePoint.y, 150, 100)

     // canvasEyed(leftEyePoint, rightEyePoint)

    }
  }
  drawMatrix();
}

function drawLeft(x,y) {

    push();
    translate(x, y);
    image(leftEye, 0, 0, 150, 100);
    pop();
}

function drawRight() {
    push();
    translate(playerRight.x, playerRight.y);
    image(rightEye, 0, 0, 150, 100);
    pop();
}
/////// conditional to check if all files are loaded

function playAudio() {
    if (bell.isLoaded() && bell1.isLoaded() && bell2.isLoaded()) {
      if (!part.isPlaying) {
        part.loop();
      } else {
        part.stop();
      }
    } else {
      console.log("relax and wait for sound to load");
    }

}



/// user interact
function canvasPressed() {
  // console.log("mousepressed")
  let rowClicked = floor(numOfRows * (mouseY / height));
  let columnClicked = floor(beatLength * (mouseX / width));

  if (rowClicked === 0) {
    console.log("first row");
    bPat[columnClicked] = +!bPat[columnClicked];
  } else if (rowClicked === 1) {
    console.log("second row");
    b1Pat[columnClicked] = +!b1Pat[columnClicked];
  } else if (rowClicked === 2) {
    console.log("third row");
    b2Pat[columnClicked] = +!b2Pat[columnClicked];
  }
}

/// drawing the grid
function drawMatrix() {
  matrixCnv.background(bg);

  //line
  matrixCnv.stroke(25, 40, 100);
  matrixCnv.strokeWeight(2);
  for (let i = 0; i < beatLength + 1; i++) {
    matrixCnv.line(i * cellSize, 0, i * cellSize, height);
  }
  for (let i = 0; i < numOfRows + 1; i++) {
    matrixCnv.line(
      0,
      (i * height) / numOfRows,
      width,
      (i * height) / numOfRows
    );
  }

  //circle
  matrixCnv.noStroke();
  matrixCnv.fill(25, 40, 100);
  for (let i = 0; i < beatLength; i++) {
    if (bPat[i] === 1) {
      matrixCnv.ellipse(i * cellSize + 0.5 * cellSize, 100, 50);
    }
    if (b1Pat[i] === 1) {
      matrixCnv.ellipse(i * cellSize + 0.5 * cellSize, 300, 40);
    }
    if (b2Pat[i] === 1) {
      matrixCnv.ellipse(i * cellSize + 0.5 * cellSize, 500, 30);
    }
  }
}

Answer 1

丹O是对的，这不是在回调函数中将变量作为参数传递的正确方法。

left.mousePressed(drawLeft(playerLeft.x, playerLeft.y));

应为：

left.mousePressed( function()=>{

  drawLeft( playerLeft.x, playerLeft.y );

} );

通过这种方式，您可以创建一个新功能，这是之间的一个额外步骤。该函数调用drawLeft（）。然后将该新函数作为回调函数传递。与此相同：

let afterMousePressed = function(){

  drawLeft( playerLeft.x, playerLeft.y );

};

left.mousePressed( afterMousePressed );