旋转文本并不改变文本在处理中的位置。

huangapple
go评论90阅读模式
英文:

Rotating text not the position of the text in processing

问题

我正在尝试制作一个时钟，并且希望所有的数字都处于正确的位置，但它们都被旋转了，例如6被倒置，而12是正确的。有没有办法只旋转文本，而不改变文本的位置？

我的代码是：

  1. push();
  2.   textSize(48);
  3.   for (int i = 1; i < 13; i++) {
  4.     int offset = -15;
  5.     if (str(i).length() == 2) {
  6.       offset -= 14.5;
  7.     }
  8.     rotate(radians(30));
  9.     text(i, offset, -350);
  10.     //println(i*30);
  11.   }
  12.   pop();
英文:

i am trying to make a clock and have all the numbers in the correct place but they are all rotated e.g. 6 is upside down whereas 12 is correct. is there anyway to rotate just the text not the position of the text?

my code is

  1. push();
  2.   textSize(48);
  3.   for (int i = 1; i &lt; 13; i++) {
  4.     int offset = -15;
  5.     if (str(i).length() == 2) {
  6.       offset -= 14.5;
  7.     }
  8.     rotate(radians(30));
  9.     text(i, offset, -350);
  10.     //println(i*30);
  11.   }
  12.   pop();

答案1

得分: 8

未看代码，我的直觉是你使用了 rotate() 函数，但可能你没有使用 pushMatrix()/popMatrix(); 来将坐标空间隔离到本地空间，以便可以临时旋转。

我建议阅读 2D 变换教程。

正如教程所提到的，变换的顺序很重要：

  1. size(300, 300);
  2. background(0);
  3. stroke(255);
  4. // 文本居中对齐
  5. textAlign(CENTER);
  6. // 将全局坐标原点移动到画布中心
  7. translate(width / 2, height / 2);
  9. int hours = 12;
  10. // 每个小时的角度部分（360/12 = 30 度），但以弧度表示
  11. float angleIncrement = TWO_PI / hours;
  12. // 距中心的距离
  13. float radius = 100;
  14. for (int i = 0; i < hours; i++) {
  15.   // 计算每个小时的角度，减去一些角度，因为角度 0 指向右侧，而不是顶部（12 点钟）
  16.   // 记住这个偏移量：在绘制时钟指针时可能会有帮助 ;)
  17.   float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
  18.   // 隔离坐标空间
  19.   pushMatrix();
  20.     // 以全局中心为基准，按照每小时的角度旋转
  21.     rotate(angle);
  22.     // 从局部旋转后的中心位置平移，基于半径
  23.     translate(radius, 0);
  24.     // 撤销局部旋转，使文本保持水平
  25.     rotate(-angle);
  26.     // 绘制文本
  27.     text(i+1, 0, 0);
  28.   // 退出局部坐标系统，回到全局坐标
  29.   popMatrix();
  30. }

下面是一个带有帮助函数的示例，用于可视化坐标系统：

  1. void setup() {
  2.   // ...（略去部分代码，与上面的示例相似）
  3. }
  5. void drawCoordinateSystem(String label, float size, float alpha) {
  6.   // ...（略去部分代码，与上面的示例相似）
  7. }

请注意，对于 pushMatrix()/popMatrix()，不需要缩进，这只是一种视觉提示，有助于在阅读代码时记住坐标系统的嵌套。

这部分以下的代码是一些过于复杂的演示，您可能不需要，但希望它能够提供一些有趣的可视化效果。

注：此处省略了一些代码，仅返回翻译内容。

英文:

Without seeing the code my hunch is you use rotate(), but probably you don't use pushMatrix()/popMatrix(); to isolate the coordinate space to local one that can be temporarily rotated.

I recommend reading the 2D Transformations tutorial

旋转文本并不改变文本在处理中的位置。

As the tutorial mentions, the order of transformations matters:

  1. size(300, 300);
  2. background(0);
  3. stroke(255);
  4. // center align text
  5. textAlign(CENTER);
  6. // global translation to center
  7. translate(width / 2, height / 2);
  9. int hours = 12;
  10. // an angle section (360/12 = 30 degrees), but in radians
  11. float angleIncrement = TWO_PI / hours;
  12. // distance from center
  13. float radius = 100;
  14. for(int i = 0 ; i &lt; hours; i++){
  15.   // calculate the angle for each hour, subtracting a bit because angle 0 points to the right, not top (12 o&#39;clock)
  16.   // remember this offset: it may come in handy when drawing clock handles ;)
  17.   float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
  18.   // isolate coordinate space
  19.   pushMatrix();
  20.     // rotate from global center by each hour angle
  21.     rotate(angle);
  22.     // translate from locally rotated center based on radius 
  23.     translate(radius, 0);
  24.     // undo local rotation so text is straight
  25.     rotate(-angle);
  26.     // render text
  27.     text(i+1,0,0);
  28.   // exit local coordinate system, back to global coordinates after this
  29.   popMatrix();
  30. }

Here is the same example with a helper function to help visualise the coordinate systems:

  1. void setup() {
  2.   size(300, 300);
  3.   background(0);
  4.   stroke(255);
  5.   // center align text
  6.   textAlign(CENTER);
  7.   drawCoordinateSystem(&quot;1.original cooordinates&quot;,60, 255);
  8.   // global translation to center
  9.   translate(width / 2, height / 2);
  10.   drawCoordinateSystem(&quot;2.global center&quot;,60, 64);
  11.   
  13.   int hours = 12;
  14.   // an angle section (360/12 = 30 degrees), but in radians
  15.   float angleIncrement = TWO_PI / hours;
  16.   // distance from center
  17.   float radius = 100;
  18.   for (int i = 0; i &lt; hours; i++) {
  19.     // calculate the angle for each hour, subtracting a bit because angle 0 points to the right, not top (12 o&#39;clock)
  20.     // remember this offset: it may come in handy when drawing clock handles ;)
  21.     float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
  22.     // isolate coordinate space
  23.     pushMatrix();
  24.       // rotate from global center by each hour angle
  25.       rotate(angle);
  26.       if(i == 0){
  27.         drawCoordinateSystem(&quot;3.local+rotation&quot;,60, 127);
  28.       }
  29.       // translate from locally rotated center based on radius 
  30.       translate(radius, 0);
  31.       if(i == 0){
  32.         drawCoordinateSystem(&quot;4.local+rot.+\ntrans.&quot;,60, 192);
  33.       }
  34.       // undo local rotation so text is straight
  35.       rotate(-angle);
  36.       if(i == 0){
  37.         drawCoordinateSystem(&quot;\n5.prev.\n-rot.&quot;,60, 255);
  38.       }
  39.       // render text
  40.       text(i+1, 0, 0);
  41.     // exit local coordinate system, back to global coordinates after this
  42.     popMatrix();
  43.   }
  44. }
  46. void drawCoordinateSystem(String label, float size, float alpha){
  47.   pushStyle();
  48.   textAlign(LEFT);
  49.   strokeWeight(3);
  50.   // x axis
  51.   stroke(192, 0, 0, alpha);
  52.   line(0, 0, size, 0);
  53.   // y axis
  54.   stroke(0, 192, 0, alpha);
  55.   line(0, 0, 0, size);
  56.   text(label, 10, 15);
  57.   popStyle();
  58. }

旋转文本并不改变文本在处理中的位置。

Note that the indent is not required for pushMatrix()/popMatrix(), it's more of a visual cue to aid when you read code to remember coordinate system nesting.

This is over the top and you won't need the code bellow, but hopefully it's a fun visualisation:

  1. PImage screenshot;
  3. String[] labels = {&quot;1.original cooordinates&quot;,&quot;2.global center\ntranslate(width / 2, height / 2)&quot;,
  4.                    &quot;3.local+rotation\npushMatrix();\nrotate(angle)&quot;,
  5.                    &quot;4.local+rot.+\ntrans.\ntranslate(radius, 0)&quot;,&quot;5.previous-rot.\nrotate(-angle)&quot;,&quot;&quot;};
  6. PMatrix2D[] systems = new PMatrix2D[labels.length];
  7. PMatrix2D lerpMatrix = new PMatrix2D();
  9. void setup() {
  10.   size(300, 300);
  11.   background(0);
  12.   stroke(255);
  13.   // center align text
  14.   textAlign(CENTER);
  15.   // &quot;1.original cooordinates&quot;
  16.   systems[0] = new PMatrix2D();
  17.   // global translation to center
  18.   translate(width / 2, height / 2);
  19.   // &quot;2.global center&quot;
  20.   systems[1] = systems[0].get();
  21.   systems[1].translate(width / 2, height / 2);
  22.   
  24.   int hours = 12;
  25.   // an angle section (360/12 = 30 degrees), but in radians
  26.   float angleIncrement = TWO_PI / hours;
  27.   // distance from center
  28.   float radius = 100;
  29.   for (int i = 0; i &lt; hours; i++) {
  30.     // calculate the angle for each hour, subtracting a bit because angle 0 points to the right, not top (12 o&#39;clock)
  31.     // remember this offset: it may come in handy when drawing clock handles ;)
  32.     float angle = (angleIncrement * i) - (QUARTER_PI * 4/3);
  33.     // isolate coordinate space
  34.     pushMatrix();
  35.       // rotate from global center by each hour angle
  36.       rotate(angle);
  37.       if(i == 0){
  38.         // &quot;3.local+rotation&quot;
  39.         PMatrix2D local = new PMatrix2D();
  40.         local.apply(systems[1]);
  41.         local.rotate(angle);
  42.         systems[2] = local.get();
  43.       }
  44.       // translate from locally rotated center based on radius 
  45.       translate(radius, 0);
  46.       if(i == 0){
  47.         // &quot;4.local+rot.+\ntrans.&quot;
  48.         systems[3] = systems[2].get();
  49.         systems[3].translate(radius,0);
  50.       }
  51.       // undo local rotation so text is straight
  52.       rotate(-angle);
  53.       if(i == 0){
  54.         // &quot;\n5.prev.\n-rot.&quot;
  55.         systems[4] = systems[3].get();
  56.         systems[4].rotate(-angle);
  57.         systems[5] = systems[4];
  58.       }
  59.       // render text
  60.       text(i+1, 0, 0);
  61.     // exit local coordinate system, back to global coordinates after this
  62.     popMatrix();
  63.   }
  64.   screenshot = get();
  65. }
  67. void draw(){
  68.   image(screenshot,0, 0);
  69.   animateCoordinateSystems();
  70.   text(&quot;mouse mouse on X axis&quot;, width / 2, height - 12);
  71. }
  73. void animateCoordinateSystems(){
  74.   float mapping = map(constrain(mouseX, 0, width), 0, width, 0.0, 1.0);
  75.   float globalT = (float)(labels.length -1) * mapping;
  76.   int index = (int)globalT;
  77.   float localT = globalT - index;
  78.   lerpMatrix(systems[index], systems[index+1], localT, lerpMatrix);
  79.   pushMatrix();
  80.   applyMatrix(lerpMatrix);
  81.   drawCoordinateSystem(labels[index] + (labels[index+1].length() &gt; 0 ? &quot;\ntransitions to\n&quot; + labels[index+1] : &quot;&quot;),60, 255);
  82.   popMatrix();  
  83. }
  85. void lerpMatrix(PMatrix2D from, PMatrix2D to, float t, PMatrix2D result){
  86.   result.m00 = lerp(from.m00, to.m00, t);
  87.   result.m01 = lerp(from.m01, to.m01, t);
  88.   result.m02 = lerp(from.m02, to.m02, t);
  89.   result.m10 = lerp(from.m10, to.m10, t);
  90.   result.m11 = lerp(from.m11, to.m11, t);
  91.   result.m12 = lerp(from.m12, to.m12, t);
  92. }
  95. void drawCoordinateSystem(String label, float size, float alpha){
  96.   pushStyle();
  97.   textAlign(LEFT);
  98.   strokeWeight(3);
  99.   // x axis
  100.   stroke(192, 0, 0, alpha);
  101.   line(0, 0, size, 0);
  102.   // y axis
  103.   stroke(0, 192, 0, alpha);
  104.   line(0, 0, 0, size);
  105.   text(label, 10, 15);
  106.   popStyle();
  107. }

旋转文本并不改变文本在处理中的位置。

huangapple
  • 本文由 发表于 2020年9月24日 04:09:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/64035544.html
  • java
  • processing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定