Question

我有一个带椭圆的画布。然后，我可以将鼠标X和鼠标Y与椭圆X和椭圆Y进行比较，以进行虚假但有效的鼠标“悬停”测试。当我将鼠标悬停在形状上时，画布将缩放到之前的两倍大小，并且形状看起来更大。 但是，比例始终保持在坐标0,0，即左上角。有没有办法更改画布缩放的坐标？这样，我就可以改变程序，这样当悬停在形状上时，新画布会缩放，使左上角是我的鼠标位置（我可以移动比例的位置）。我写了一个小例子来证明我现在的位置。

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

1 个答案: