Question

我正在尝试使用mouseX和mouseY移动旋转的图像并与键盘命令进行交互：当按下向左或向右箭头键时，图像应彼此交替；向上箭头会提高旋转速度，而向下箭头应降低旋转速度。

根据响应应用了一些编辑，但是运行代码时什么也没显示。

下面列出了修改的代码：

import org.testng.annotations.Test;
import org.testng.annotations.BeforeTest;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.AfterTest;

public class verifyLogin {
    WebDriver driver = null;
    
    By frameLocator = By.className("demo-frame");
    
    @BeforeTest
      public void beforeTest() {
        driver = utils.HelperFunctions.createAppropriateDriver("Chrome");
        driver.manage().timeouts().implicitlyWait(15,TimeUnit.SECONDS);
      }
    
    
  @Test
  public void f() {
      String url = "http://www.demo.guru99.com/V4/";
      driver.get(url);
      WebDriverWait wait = new WebDriverWait(driver,25);
      String userID = "mngr277353";
      String Password = "EmAhAsy";
      String expecTitle = " Guru99 Bank Manager HomePage ";
      
      String closebtn = "//*[@id=\"closeBtn\"]";
      wait.until(ExpectedConditions.presenceOfAllElementsLocatedBy(By.xpath(closebtn)));
      
      driver.findElement(By.id("message23")).sendKeys(userID);
     
      driver.findElement(By.id("message18")).sendKeys(Password);
      
      driver.findElement(By.xpath("/html/body/form/table/tbody/tr[3]/td[2]/input[1]")).click();
      
      String ActTitle = driver.getTitle();
      if (ActTitle.contains(expecTitle))
          System.out.println("Login Successfull !!");
      else
          System.out.println("Something went wrong. Cannot login");
  }
 

  @AfterTest
  public void afterTest() {
      driver.quit();
  }

}

Answer 1

我看到了一些问题。首先与转速控制有关。您要添加一个变量来控制角度变量的增量。
创建一个变量，比方说angleSpeed。 var angle = 0.0; var angleSpeed = 0.0; ... 在绘图功能中，更改线角度+ = 0.1; 至角度+ = angleSpeed;

这允许您控制keyPressed（）中的旋转；

如果键码向上 angleSpeed + = 1.0; 如果键码关闭 angleSpeed-= 1.0;

切换图像会有些复杂。我会考虑创建一系列图像， var images = [];

然后通过向右或向左按键来循环遍历阵列。 var image = [] var ImageSwitcher = 0 然后在预紧 images [0] = loadImage（image1）; images [1] = loadImage（image2）; images [2] = loadImage（image3）;

In draw 
    image(images[imageSwitcher % 3], x,y,...);

对于键代码向右箭头 ImageSwitcher ++; 对于键码左箭头 ImageSwitcher-

Answer 2

var angle = 0.0;
var angleSpeed = 0.0;
var images = [];
var imageSwitcher = 0;

function preload() {
  images[0] = loadImage("ToyStoryLogo.png");
  images[1] = loadImage("CarsLogo.png");
  images[2] = loadImage("Incredibles.png");
}

function setup() {
  createCanvas(900, 500);
  background(204);
}

function draw() {
  background(204);
  translate(mouseX, mouseY);
  rotate(angle);
  image(images[abs(imageSwitcher) % 3], -15, -15, 30, 30);
  angle += angleSpeed;
}

function keyPressed() {
  if (keyCode == LEFT_ARROW) {
    imageSwitcher--;
  } else if (keyCode == RIGHT_ARROW) {
    imageSwitcher++;
  } else if (keyCode == UP_ARROW) {
    angleSpeed += 0.1;
  } else if (keyCode == DOWN_ARROW) {
    angleSpeed -= 0.1;
  }
}

如何在p5.js中交替显示旋转图像？

2 个答案: