更改刻度位置 p5 javascript

Question

我有一个 canvas 里面有一个椭圆。然后我可以将鼠标 X 和鼠标 Y 与椭圆 X 和椭圆 Y 进行比较，以进行伪造但有效的鼠标 'hover' 测试。当我将鼠标悬停在形状上时，canvas 被缩放为之前的两倍大小，并且形状看起来更大。 但是，缩放始终保持在坐标 0,0，即左上角。 有什么方法可以更改 canvas 缩放的坐标吗？这样，我就可以更改程序，以便在将鼠标悬停在形状上时，新的 canvas 会缩放，以便左上角是我的鼠标位置（我可以移动比例尺的位置）。我已经写了一个小例子来展示我目前的位置。

function setup(scaleValue) {
// create canvas and scale to value
  var canvas = createCanvas(300,200);
  scale(scaleValue);
  background(51);
  
// create ellipse
  fill(255,255,255,100);
  stroke(255,255,255);
  ellipse(30,30,40,40);
}
function draw() {
// get mouse X and Y and create an X and Y value for the ellipse
  var x = mouseX;
  var y = mouseY;
  this.position = createVector(30,30);
  
// check for mouse hover by comparing mouse X and Y to ellipse X and Y
  if (Math.abs(mouseX - this.position.x) < 30 && Math.abs(mouseY - this.position.y) < 30) {
    setup(2);
  }
  if (Math.abs(mouseX - this.position.x) > 30 && Math.abs(mouseY - this.position.y) > 30) {
    setup(1);
  }
}

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

Answer 1

您可以使用translate()函数来移动原点。例如，如果您执行 translate(100, 100)，原点现在将位于 100,100，您在 0,0 处绘制的任何内容现在都将绘制在 100,100。

可以在 the reference 中找到更多信息。

此外，为什么不使用距离公式，或者更好的 dist() 函数来检查鼠标是否在圆圈内？

同样，可以在 the reference 中找到更多信息。

更改刻度位置 p5 javascript

Change scale position p5 javascript

javascript

p5.js