javascript - p5.j​​s 相对于 Canvas 的输入位置

Question

这是我所拥有的:

function setup() {
  var cnv = createCanvas(960,540);
  cnv.parent("sketchHolder");
  background('white');

  var input = createInput();
  input.position(10,10);
  input.parent("sketchHolder");
}

我有一个名为“sketchHolder”的 div，以 css 为中心。我试图使输入位置相对于 Canvas ，但它位于 Canvas 外部的整个网页上。有什么建议吗？

Answer 1

function setup() {
  var cnv = createCanvas(960, 540);
  cnv.parent("sketchHolder");
  background("blue");

  var input = createInput();
  input.position(10, 10);
  input.parent("sketchHolder");
}

#sketchHolder {
  width: 960px;
  height: 540px;
  margin: 0 auto;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>

<div id="sketchHolder"></div>

Codepen link