javascript - 如何使用 p5.js 垂直旋转文本？

Question

我正在使用 p5.js 绘制一个瓶子形状(圆柱体)并在该圆柱体上放一根绳子。到现在为止，我只能水平放置字符串，我正在尝试垂直放置我的字符串(就好像你必须转动你的头才能阅读)

我进行了很多搜索，并尝试使用 p5.js 文档中的 rotate() 和 translate() 函数。

let angle = 0;

function setup() { 
  createCanvas(600, 400, WEBGL);
  graphics = createGraphics(200, 200);
  graphics.background(255);
  test = createGraphics(300, 100);
  test.background(144, 214, 199);
  test.fill(255);
  test.textAlign(CENTER);
  test.textSize(32);
  test.text('QWERTY', 150, 50);
  rotate(90);
} 

function draw() { 
  background(255);

  graphics.fill(255, 0, 255);
  graphics.ellipse(mouseX, mouseY, 20);
  ambientLight(100);
  directionalLight(255, 255, 255, 0, 0, 1);
  noStroke();
  rotateY(angle * 0.1);
  texture(test);
  cylinder(50, 230);
  angle += 0.07;
}

您可以在下面的链接中找到代码笔: https://codepen.io/smickael/pen/bPMEOP

Answer 1

你太亲密了!

您只需将绘制文本的 PGraphics 缓冲区(而不是草图本身)旋转 90 度(使用弧度 (HALF_PI))。

此外，根据您想要对齐文本的方式，它会有助于翻译

let angle = 0;

function setup() { 
  createCanvas(600, 400, WEBGL);
  graphics = createGraphics(200, 200);
  graphics.background(255);
  test = createGraphics(300, 100);
  test.background(144, 214, 199);
  // rotate the buffer by 90 degrees (remember rotate() works with radians)
  test.rotate(radians(90));
  // similar to passing 75,0 to text, but keeping transformations grouped for easy tweaking
  test.translate(75,0);
  test.fill(255);
  test.textAlign(CENTER);
  test.textSize(32);
  test.text('QWERTY', 0, 0);
} 

function draw() { 
  background(255);

  graphics.fill(255, 0, 255);
  graphics.ellipse(mouseX, mouseY, 20);
  ambientLight(100);
  directionalLight(255, 255, 255, 0, 0, 1);
  noStroke();
  rotateY(angle * 0.25);
  texture(test);
  cylinder(50, 230);
  angle += 0.07;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>