adds tests for #1410

Author: dhowe

src/core/p5.Renderer2D.js

@@ -1105,7 +1105,7 @@ p5.Renderer2D.prototype.text = function (str, x, y, maxWidth, maxHeight) {
       case constants.BOTTOM:
         y += (maxHeight - totalHeight);
         break;
-      case constants._CTX_MIDDLE:
+      case constants._CTX_MIDDLE: // CENTER?
         y += (maxHeight - totalHeight) / 2;
         break;
       case constants.BASELINE:
@@ -1139,8 +1139,8 @@ p5.Renderer2D.prototype.text = function (str, x, y, maxWidth, maxHeight) {
     }
   }
   else {
-    //offset to account for centering multiple lines of text
-    var offset = ((cars.length)*0.5-0.5)*p.textLeading();
+    // offset to account for vertically centering multiple lines of text
+    var offset = ((cars.length * 0.5) - 0.5) * p.textLeading(); // see #1410
 
     for (jj = 0; jj < cars.length; jj++) {
 

test/manual-test-examples/p5.Font/custom/LEFT.BL.lead.png

@@ -26,7 +26,16 @@
   <img src="textAlignSketch.png" width="240" height="160"></img>
   </div>
   <div id='textLeadingSketch'>
-  <img src="textLeadingSketch.png" width="240" height="160"></img>
+  <img src="LEFT.TOP.lead.png" width="400" height="200"></img>
+  </div>
+  <div id='textLeadingSketch2'>
+  <img src="LEFT.CENTER.lead.png" width="400" height="200"></img>
+  </div>
+  <div id='textLeadingSketch3'>
+  <img src="LEFT.BL.lead.png" width="400" height="200"></img>
+  </div>
+  <div id='textLeadingSketch4'>
+  <img src="LEFT.BOTTOM.lead.png" width="400" height="200"></img>
   </div>
   <div id='textSizeSketch'>
   <img src="textSizeSketch.png" width="240" height="160"></img>

test/manual-test-examples/p5.Font/custom/LEFT.BOTTOM.lead.png

@@ -273,27 +273,120 @@ var textAlignSketch = function(p) {
   };
 };
 
+
 var textLeadingSketch = function(p) {
   var font;
   p.preload = function() {
     font = p.loadFont("../SourceSansPro-Regular.otf");
   };
   p.setup = function() {
-    p.createCanvas(240, 160);
+    p.createCanvas(400, 200);
+    p.textFont(font);
+    p.fill(0);
+    p.textSize(12);
+
+    p.line(0,100,p.width,100);
+    p.textAlign(p.LEFT, p.TOP);
+    p.strokeWeight(0);
+
+    var s10 = 'LEFT/TOP@10px',
+      s20 = s10.replace('1','2'),
+      s30 = s10.replace('1','3');
+
+    p.textLeading(10);  // Set leading to 10
+    p.text(s10+'\n'+s10+'\n'+s10, 10, 100);
+    p.textLeading(20);  // Set leading to 20
+    p.text(s20+'\n'+s20+'\n'+s20, 140, 100);
+    p.textLeading(30);  // Set leading to 30
+    p.text(s30+'\n'+s30+'\n'+s30, 270, 100);
+  };
+};
+
+var textLeadingSketch2 = function(p) {
+  var font;
+  p.preload = function() {
+    font = p.loadFont("../SourceSansPro-Regular.otf");
+  };
+  p.setup = function() {
+    p.createCanvas(400, 200);
+    p.textFont(font);
+    p.fill(0);
+    p.textSize(12);
+
+    p.line(0,100,p.width,100);
+    p.textAlign(p.LEFT, p.CENTER);
+    p.strokeWeight(0);
+
+    var s10 = 'LEFT/CENTER@10px',
+      s20 = s10.replace('1','2'),
+      s30 = s10.replace('1','3');
+
+    p.textLeading(10);  // Set leading to 10
+    p.text(s10+'\n'+s10+'\n'+s10, 10, 100);
+    p.textLeading(20);  // Set leading to 20
+    p.text(s20+'\n'+s20+'\n'+s20, 140, 100);
+    p.textLeading(30);  // Set leading to 30
+    p.text(s30+'\n'+s30+'\n'+s30, 270, 100);
+  };
+};
+
+var textLeadingSketch3 = function(p) {
+  var font;
+  p.preload = function() {
+    font = p.loadFont("../SourceSansPro-Regular.otf");
+  };
+  p.setup = function() {
+    p.createCanvas(400, 200);
     p.textFont(font);
     p.fill(0);
+    p.textSize(12);
+
+    p.line(0,100,p.width,100);
+    p.textAlign(p.LEFT, p.BASELINE);
     p.strokeWeight(0);
+
+    var s10 = 'LEFT/BASELINE@10px',
+      s20 = s10.replace('1','2'),
+      s30 = s10.replace('1','3');
+
+    p.textLeading(10);  // Set leading to 10
+    p.text(s10+'\n'+s10+'\n'+s10, 10, 100);
+    p.textLeading(20);  // Set leading to 20
+    p.text(s20+'\n'+s20+'\n'+s20, 140, 100);
+    p.textLeading(30);  // Set leading to 30
+    p.text(s30+'\n'+s30+'\n'+s30, 270, 100);
+  };
+};
+
+var textLeadingSketch4 = function(p) {
+  var font;
+  p.preload = function() {
+    font = p.loadFont("../SourceSansPro-Regular.otf");
+  };
+  p.setup = function() {
+    p.createCanvas(400, 200);
+    p.textFont(font);
+    p.fill(0);
     p.textSize(12);
-    //leadig
+
+    p.line(0,100,p.width,100);
+    p.textAlign(p.LEFT, p.BOTTOM);
+    p.strokeWeight(0);
+
+    var s10 = 'LEFT/BOTTOM@10px',
+      s20 = s10.replace('1','2'),
+      s30 = s10.replace('1','3');
+
     p.textLeading(10);  // Set leading to 10
-    p.text("Leading10px\nLeading10px\nLeading10px", 10, 30);
+    p.text(s10+'\n'+s10+'\n'+s10, 10, 100);
     p.textLeading(20);  // Set leading to 20
-    p.text("Leading20px\nLeading20px\nLeading20px", 90, 30);
+    p.text(s20+'\n'+s20+'\n'+s20, 140, 100);
     p.textLeading(30);  // Set leading to 30
-    p.text("Leading30px\nLeading30px\nLeading30px", 170, 30);
+    p.text(s30+'\n'+s30+'\n'+s30, 270, 100);
   };
 };
 
+
 var textSizeSketch = function(p) {
   var font;
   p.preload = function() {
@@ -310,8 +403,6 @@ var textSizeSketch = function(p) {
     p.text("Font Size 14", 10, 60);
     p.textSize(16);
     p.text("Font Size 16", 10, 90);
-    p.textSize(32);
-    p.text("Font Size 32", 10, 130);
   };
 };
 
@@ -603,6 +694,9 @@ new p5(textLineSketch, 'textLineSketch');
 new p5(textWrapSketch, 'textWrapSketch');
 new p5(textAlignSketch, 'textAlignSketch');
 new p5(textLeadingSketch, 'textLeadingSketch');
+new p5(textLeadingSketch2, 'textLeadingSketch2');
+new p5(textLeadingSketch3, 'textLeadingSketch3');
+new p5(textLeadingSketch4, 'textLeadingSketch4');
 new p5(textSizeSketch, 'textSizeSketch');
 new p5(textBoundsSketch, 'textBoundsSketch');
 new p5(textStyleSketch, 'textStyleSketch');