如何围绕椭圆旋转文本？

html5 • • 问答

我想围绕椭圆旋转文本。每个字符都会发生一些轻微的变形，但是椭圆变得越极端（即越不完美的圆形）。理想情况下，此方法可以在任何高度和宽度比例的椭圆形上很好地呈现文本，甚至可以在其他形状（例如圆角矩形）上呈现文本。

到目前为止，我的方法是：

  1. 找到椭圆的边缘
  2. 使用三角函数围绕扭曲的椭圆旋转一个点
  3. text()在这个位置画
  4. text()根据它的位置旋转它
  5. 在for循环中执行此操作，遍历提供的字符串中的每个字符。

字符获得奇怪的间距（即使使用textWidth）和奇怪的旋转（即使动态计算）。您可以在下面的代码片段中看到这一点，特别是在 'spinning' 的 'nn' 和 'piece' 的 'ie' 上。

let canvasWidth = 400;
let canvasHeight = 400;
let spinSpeed = 0.25;
let ellipseWidth = 280;
let ellipseHeight = 200;
let angle = 0;
let sourceText = "A beautiful piece of spinning text. ";
let sourceCharacters = sourceText.toUpperCase().split("");

function setup() {
  createCanvas(canvasWidth, canvasHeight);
  angleMode(DEGREES);
  textSize(18);
  textAlign(LEFT, BASELINE);
}

function draw() {
  background(0);

  // Draw an ellipse
  stroke("rgba(255, 255, 255, 0.15)");
  noFill();
  ellipse(canvasWidth / 2, canvasHeight / 2, ellipseWidth, ellipseHeight);

  // Prepare for operations around circle
  translate(canvasWidth / 2, canvasHeight / 2);

  // Create a revolving angle
  if (angle < 360) {
    angle += spinSpeed;
  } else {
    angle = 0;
  }

  // Set variables for trigonometry
  let widthR = ellipseWidth / 2;
  let heightR = ellipseHeight / 2;
  let dx = widthR * cos(angle);
  let dy = heightR * sin(angle);

  // Set variable for offsetting each character
  let currentOffset = 0;

  // Loop through each chracter and place on oval edge
  for (let i = 0; i < sourceCharacters.length; i++) {
    push();
    dx = widthR * cos(angle + currentOffset);
    dy = heightR * sin(angle + currentOffset);

    translate(dx, dy);
    rotate(angle + currentOffset + 90);

    stroke("rgba(255, 255, 255, 0.25)");
    rect(0, 0, textWidth(sourceCharacters[i]), 10);
    fill("white");
    text(sourceCharacters[i], 0, 0);

    currentOffset += textWidth(sourceCharacters[i]);
    pop();
  }
}
html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
以上是如何围绕椭圆旋转文本？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容