时间戳

首页 > 解决方案 > 使用缩放在 p5.js 中翻转图像

javascript - 使用缩放在 p5.js 中翻转图像

问题描述

我正在创建一个程序，根据我是按左箭头还是右箭头，它的动画会向左或向右移动。当我按右箭头时，程序运行良好，因为图像最初是面向右侧的，但是当我尝试使用比例翻转图像以使其朝相反的方向行走时，它们会完全消失。

var Guy;
var Green;
var Robot;
let imgnum = 0;
let time = 0;


function preload() {
  Guy = loadImage("SpelunkyGuy.png")
  Green = loadImage("Green.png")
  Robot = loadImage("Robot.png")
  GuyStand = Guy.get(0,0,80,80)
}
function setup() {
  createCanvas(400, 400);
  x = int(random(0,5));
  y = int(random(0,5));
  x2 = int(random(0,5));
  y2 = int(random(0,5));
  x3 = int(random(0,5));
  y3 = int(random(0,5));
}

function draw() {
  background(220);
  if(keyCode === RIGHT_ARROW){
    image(Guy,x*80,y*80,80,80,imgnum*80,0,80,80);
    image(Green,x2*80,y2*80,80,80,imgnum*80,0,80,80);
    image(Robot,x3*80,y3*80,80,80,imgnum*80,0,80,80);
    if (time > 10){
      imgnum += 1;
      if(imgnum >= 9){
        imgnum = 0;
      }
      time = 0;
    }
    time++;
  }
  
  if(keyCode === LEFT_ARROW){
    scale(-1.0,1.0);
    image(Guy,x*80,y*80,80,80,imgnum*80,0,80,80);
    image(Green,x2*80,y2*80,80,80,imgnum*80,0,80,80);
    image(Robot,x3*80,y3*80,80,80,imgnum*80,0,80,80);
    if (time > 10){
      imgnum += 1;
      if(imgnum >= 9){
        imgnum = 0;
      }
      time = 0;
    }
    time++;
  }
  

}

标签： javascript

解决方案

您遇到此问题是因为 scale() 函数在没有对象限定符的情况下使用时适用于整个画布和所有后续绘图操作。

这意味着在应用 scale(-1,1) 之后，您不仅会反转图像的宽度，还会反转图像的绘制位置。因此，您现在将其绘制在 -1 * (x*80) 处，或向左离开屏幕的方式，这就是您看不到它的原因。

您在这里要做的不是在某个点 (x,y) 绘制图像，而是应用 translate(x,y) 操作，然后应用缩放 (-1,1) 并在 (0, 0)。

PS：Translate() 的工作方式与 scale() 类似，它会影响画布上的所有后续操作。因此，如果您想以不同的方式绘制和缩放元素，您需要在转换之前放置一个 push() 步骤，并在绘制对象之后放置一个 pop() 步骤。所以是这样的：

push();
translate(x*80,y*80);
scale(-1,1);
image(Guy,0,0,80,80,imgnum*80,0,80,80);
pop();

推荐阅读