通过鼠标悬停操作从图像数组中选择特定图像

Question

如何从下面的 img 数组中 select 有鼠标光标的 img？我的意思是我希望能够对图像进行更改，例如隐藏或与其进行一些交互。

var images = [];

function preload() {
  for (var i = 0; i< 18; i++) {
    images[i] = loadImage("img/img" + i + ".jpg");
  }
}

function setup() {
  createCanvas(900, 900); 
  background(0);
  preload();
}

function draw() {
  var i = 0;
  for ( var y= 0; y < height; y=y+150) {
    for ( var x =0; x < width; x=x+150) {
      image(images[i % images.length], x, y );
      i++
    }
  }
}

Answer 1

尝试获取 mouseX 和 mouseY 的位置，然后计算横跨的图像数量、图像的数量以及向下的图像数量，然后通过将跨位置与向下位置时间相加来找到该图像的索引行中的图像。示例：

var images = [];
var selected;

function preload() {
  for (var i = 0; i< 18; i++) {
    images[i] = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Google_Chrome_for_Android_Icon_2016.svg/150px-Google_Chrome_for_Android_Icon_2016.svg.png");
  }
}

function setup() {
  createCanvas(900, 900); 
  background(0);
  preload();
}

function draw() {
  var i = 0;
  if (mouseX < width & mouseY < height) {
      selected = Math.floor(mouseX / 150) + Math.floor(mouseY / 150) * Math.floor(height / 150);
  } else {
      selected = -1;
      // not found as out side of canvas
  }
  console.log("selected image: ", selected);
  for ( var y= 0; y < height; y=y+150) {
    for ( var x =0; x < width; x=x+150) {
      image(images[i % images.length], x, y );
      i++
    }
  }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

检查控制台，它将打印所选图像，然后您可以使用它来更改该图像。

通过鼠标悬停操作从图像数组中选择特定图像

Selecting a particular image from image array by mouse over action

javascript

processing

p5.js