Skip to content

Commit a6a68d3

Browse files
dhowedhowe
committed
fix to #5404 
1 parent 419f687 commit a6a68d3

File tree

3 files changed

+83
-21
lines changed

3 files changed

+83
-21
lines changed

Diff for: ‎src/core/p5.Renderer.js

+64-4
Original file line numberDiff line numberDiff line change
@@ -289,27 +289,87 @@ p5.Renderer.prototype.text = function(str, x, y, maxWidth, maxHeight) {
289289
// Render lines of text according to settings of textWrap
290290
// Splits lines at spaces, for loop adds one word + space at a time and tests length with next word added
291291
if (textWrapStyle === constants.WORD) {
292+
// ADDED-WORD /////////////////////////////////////////////////////////
293+
let nlines = [];
292294
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
293295
line = '';
294296
words = lines[lineIndex].split(' ');
295297
for (let wordIndex = 0; wordIndex < words.length; wordIndex++) {
296298
testLine = `${line + words[wordIndex]}` + ' ';
297299
testWidth = this.textWidth(testLine);
298300
if (testWidth > maxWidth && line.length > 0) {
299-
this._renderText(p, line, x, y, finalMaxHeight);
301+
//this._renderText(p, line, x, y, finalMaxHeight);
302+
nlines.push(line);
303+
line = `${words[wordIndex]}` + ' ';
304+
//y += p.textLeading();
305+
} else {
306+
line = testLine;
307+
}
308+
}
309+
//this._renderText(p, line, x, y, finalMaxHeight);
310+
nlines.push(line);
311+
//y += p.textLeading();
312+
}
313+
//console.log('WORD: ', nlines);
314+
let offset = 0;
315+
316+
const vAlign = p.textAlign().vertical;
317+
if (vAlign === constants.CENTER) {
318+
offset = (nlines.length - 1) * p.textLeading() / 2;
319+
} else if (vAlign === constants.BOTTOM) {
320+
offset = (nlines.length - 1) * p.textLeading();
321+
}
322+
////////////////////////////////////////////////////////////////////////
323+
324+
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
325+
line = '';
326+
words = lines[lineIndex].split(' ');
327+
for (let wordIndex = 0; wordIndex < words.length; wordIndex++) {
328+
testLine = `${line + words[wordIndex]}` + ' ';
329+
testWidth = this.textWidth(testLine);
330+
if (testWidth > maxWidth && line.length > 0) {
331+
this._renderText(p, line.trim(), x, y - offset, finalMaxHeight);
300332
line = `${words[wordIndex]}` + ' ';
301333
y += p.textLeading();
302334
} else {
303335
line = testLine;
304336
}
305337
}
306-
this._renderText(p, line, x, y, finalMaxHeight);
338+
this._renderText(p, line.trim(), x, y - offset, finalMaxHeight);
307339
y += p.textLeading();
308340
if (baselineHacked) {
309341
this._textBaseline = constants.BASELINE;
310342
}
311343
}
312344
} else {
345+
// ADDED-CHAR /////////////////////////////////////////////////////////
346+
let nlines = [];
347+
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
348+
line = '';
349+
chars = lines[lineIndex].split('');
350+
for (let charIndex = 0; charIndex < chars.length; charIndex++) {
351+
testLine = `${line + chars[charIndex]}`;
352+
testWidth = this.textWidth(testLine);
353+
if (testWidth <= maxWidth) {
354+
line += chars[charIndex];
355+
} else if (testWidth > maxWidth && line.length > 0) {
356+
nlines.push(line);
357+
line = `${chars[charIndex]}`;
358+
}
359+
}
360+
}
361+
nlines.push(line);
362+
console.log('CHAR: ', nlines);
363+
let offset = 0;
364+
365+
const vAlign = p.textAlign().vertical;
366+
if (vAlign === constants.CENTER) {
367+
offset = (nlines.length - 1) * p.textLeading() / 2;
368+
} else if (vAlign === constants.BOTTOM) {
369+
offset = (nlines.length - 1) * p.textLeading();
370+
}
371+
////////////////////////////////////////////////////////////////////////
372+
313373
// Splits lines at characters, for loop adds one char at a time and tests length with next char added
314374
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
315375
line = '';
@@ -320,13 +380,13 @@ p5.Renderer.prototype.text = function(str, x, y, maxWidth, maxHeight) {
320380
if (testWidth <= maxWidth) {
321381
line += chars[charIndex];
322382
} else if (testWidth > maxWidth && line.length > 0) {
323-
this._renderText(p, line, x, y, finalMaxHeight);
383+
this._renderText(p, line.trim(), x, y - offset, finalMaxHeight);
324384
y += p.textLeading();
325385
line = `${chars[charIndex]}`;
326386
}
327387
}
328388
}
329-
this._renderText(p, line, x, y, finalMaxHeight);
389+
this._renderText(p, line.trim(), x, y - offset, finalMaxHeight);
330390
y += p.textLeading();
331391

332392
if (baselineHacked) {

Diff for: ‎test/manual-test-examples/p5.Font/custom/sketch.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
var textSketch = function(p) {
22
var font, font2;
33
p.preload = function() {
4-
font = p.loadFont('../acmesa.ttf');
4+
//font = p.loadFont('../acmesa.ttf');
55
font2 = p.loadFont('../SourceSansPro-Regular.otf');
66
};
77
p.setup = function() {
88
p.createCanvas(240, 160);
99
//p.ellipse(20,20,50,70);
10-
p.textFont(font);
10+
//p.textFont(font);
11+
//p.text('Default Text', 10, 30);
1112
p.textSize(18);
12-
p.text('Default Text', 10, 30);
1313
p.textFont(font2);
1414
p.noStroke();
1515
p.fill(0, 102, 153);
1616
p.text('Blue No Stroke Text', 10, 60);
17-
p.stroke(0, 200, 0);
18-
p.strokeWeight(0.5);
19-
p.text('Blue with Green Stroked Text', 10, 90);
17+
//p.stroke(0, 200, 0);
18+
//p.strokeWeight(0.5);
19+
//p.text('Blue with Green Stroked Text', 10, 90);
2020
p.noStroke();
2121
p.textSize(12);
2222
p.fill(120);
@@ -469,7 +469,7 @@ var textAlignmentSketch = function(p) {
469469
var textString = 'Hello p5';
470470
var padding = 10;
471471
p.preload = function() {
472-
font1 = p.loadFont('../SourceSansPro-Regular.otf');
472+
font1 = p.loadFont('../SourceSansPro-Regular.otf'); // different
473473
font2 = p.loadFont('../FiraSans-Book.otf');
474474
font3 = p.loadFont('../Inconsolata-Bold.ttf');
475475
font4 = p.loadFont('../PlayfairDisplay-Regular.ttf');
@@ -523,7 +523,7 @@ var textVertAlignmentSketch = function(p) {
523523
'Merriweather-LightItalic.ttf',
524524
'Montserrat-Regular.ttf',
525525
'OpenSans-Regular.ttf',
526-
'SourceSansPro-Regular.otf'
526+
'SourceSansPro-Regular.otf' // different
527527
];
528528
var fonts = [];
529529
var vAligns = [p.TOP, p.CENTER, p.BASELINE, p.BOTTOM];

Diff for: ‎test/manual-test-examples/p5.Font/system/sketch.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
var textSketch = function(p) {
22
p.setup = function() {
33
p.createCanvas(240, 160);
4-
p.textSize(18);
4+
p.background(204);
5+
p.textSize(19.5);
6+
p.fill(255);
57
p.text('Default Text', 10, 30);
68
p.noStroke();
7-
p.fill(0, 102, 153);
8-
p.text('Blue No Stroke Text', 10, 60);
9-
p.textStyle(p.ITALIC);
10-
p.text('Blue No Stroke Text Italic', 10, 80);
11-
p.textStyle(p.BOLD);
12-
p.text('Blue No Stroke Text Bold', 10, 100);
9+
p.fill(57, 112, 155);
10+
p.text('Black No Stroke Text', 10, 60);
11+
//p.textStyle(p.ITALIC);
12+
//p.text('Blue No Stroke Text Italic', 10, 80);
13+
//p.textStyle(p.BOLD);
14+
//p.text('Blue No Stroke Text Bold', 10, 100);
1315
p
1416
.fill(120)
1517
.textStyle(p.NORMAL)
16-
.textSize(12)
18+
.textSize(13.5)
1719
.text(
1820
'Simple long Text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
1921
10,
20-
110,
22+
92,
2123
220,
2224
60
2325
);

0 commit comments

Comments
 (0)