在 bt 上开始轮换。单击并用鼠标位置控制它

Question

我想在点击按钮时开始旋转，然后能够控制鼠标位置的旋转角度。

现在我的代码运行旋转，但我不知道如何通过单击按钮启动它，然后在鼠标位置控制它。

我是 javascript 和 p5js 的新手。任何提示将不胜感激。

Answer 1

html 按钮不应该是 "type" 提交，因为您不在表单范围内。（提交按钮启动表单操作。）

以下代码恕我直言是正确的：

<html> 
  <input 
     id="BgCategory1-btn1" onclick="a()" 
     class="btn´btn-primary" type="button">
    Background1
  </input>
</html>

在 a() 中，您设置了一个标志 `show_grid' 来激活旋转。正如你所说，这行得通。但是旋转是从以毫秒为单位的实际时间得出的。你只需要用鼠标坐标推导出角度就可以了。

鼠标坐标可以通过变量mouseX和mouseY获得。

因此，如果您希望在向左或向右移动鼠标时网格旋转，请使用：

const turns = 5;
let angle = radians( mouseX / width * 2.0 * Math.PI * turns  );

并且，如果您希望在向上或向下移动鼠标时旋转网格，请使用：

const turns = 5;
let angle = radians( mouseY / height  * 2.0 * Math.PI * turns );

hight 和 with 包含您的 canvas（绘图区域）的高度和宽度，应内置可用于 draw() 的变量方法（如变量 mouseX 和 mouseY）。

如果你想在鼠标位于屏幕中间时进行零度旋转。您必须从鼠标坐标中减去半个屏幕大小。

举个例子，上下同样适用：

const turns = 5;
let angle = radians( ( mouseX - width / 2 ) / width * 2.0 * Math.PI * turns  );

编辑：

我现在看到你想通过点击图片网格开始旋转：

您可以编写一个名为mouseClicked() 的函数并向其添加代码以设置允许旋转的标志。先在方法上面初始化一个flag变量draw()。 let rotAllowed = false;

function mouseClicked() 
{
  rotAllowed = true;
}

在 draw() 方法中检查此标志：

push();
let angle = 0;

if ( rotAllowed) 
{
  const turns = 5;
  angle = radians( mouseY / height  * 2.0 * Math.PI * turns );
}

translate( width / 2, height / 2 );
rotate( angle );
translate( -width / 2, -height / 2 );
imageMode( CENTER );
rectMode( CENTER );
layerOne.grid.display();
pop();

编辑2：

如果您需要一个附加按钮，请按照与第一个按钮相同的方式进行操作。

<html> 
  <input 
     id="BgCategory1-btn1" onclick="a()" 
     class="btn´btn-primary" type="button">
    Background1
  </input>
  <input 
     id="BgCategory1-btn2" onclick="b()" 
     class="btn´btn-primary" type="button">
    Rotation
  </input>
</html>

让它作为 onclick 处理程序执行函数 b()。

function b()
{
  rotAllowed = true;
}

在 bt 上开始轮换。单击并用鼠标位置控制它

Start rotation on bt. Click and control it with the mouse position

javascript

p5.js