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>

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

1 个答案: