0

我正在使用 p5.js 库和 ml5 的poseNet 制作草图。我有一个变量noseX——它表示鼻子在画布上的 x 坐标位置——和一个预加载的 60 个图像的数组。我想将画布垂直分成 60 个部分。对于每一个cnvSection noseX都打开，我希望在画布上绘制与该图像img[i]相对应的图像。cnvSection[i]

所以基本上 ifnoseX是 on cnvSection[5]，在画布上绘制img[5]等。

这是我的功能，目前我只能绘制指示画布部分的垂直线。

let cnvWidth = 1440;
let cnvHeight = 900;

function nosePosition() {

  let sectionWidth = cnvWidth / 60;
  let cnvSection = [];

  for (let i = 0; i < cnvWidth; i = i + sectionWidth) {
    line(i, 0, i, cnvHeight);
  }
}

非常感谢！

4

1 回答 1

0

尝试以下操作：

noseX = 50;

function setup() {
  createCanvas(700, 400);
}

function draw() {
  background(220);
  nosePosition();
  fill('red');
  ellipse(noseX, height / 2, 6);
}

function nosePosition() {
  let sectionWidth = width / 60;
  for (let i = 0; i < width; i += sectionWidth) {
    line(i, 0, i, height);
  }
  const noseSection = floor(noseX / sectionWidth);
  rect(noseSection * sectionWidth, 0, sectionWidth, height);
}

为了简化，我使用硬编码的 x 值作为鼻子。在您的情况下，这将来自 ml5posenet。您不需要数组中的部分。您可以简单地计算鼻子当前位于哪个部分，然后相应地绘制图像。我正在绘制一个矩形 - 再次简化示例。

也许将其复制并粘贴到 p5 网络编辑器中，然后使用该noseX值，看看它是否适合您。

于 2021-03-23T19:34:57.313 回答