From a6a68d346323d3f6301b4fff7c8eafdb5c98610c Mon Sep 17 00:00:00 2001 From: dhowe Date: Fri, 1 Oct 2021 14:27:17 +0800 Subject: [PATCH] fix to #5404 --- src/core/p5.Renderer.js | 68 +++++++++++++++++-- .../p5.Font/custom/sketch.js | 16 ++--- .../p5.Font/system/sketch.js | 20 +++--- 3 files changed, 83 insertions(+), 21 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 5d70f7218b..b2d81b6bfc 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -289,6 +289,8 @@ p5.Renderer.prototype.text = function(str, x, y, maxWidth, maxHeight) { // Render lines of text according to settings of textWrap // Splits lines at spaces, for loop adds one word + space at a time and tests length with next word added if (textWrapStyle === constants.WORD) { + // ADDED-WORD ///////////////////////////////////////////////////////// + let nlines = []; for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { line = ''; words = lines[lineIndex].split(' '); @@ -296,20 +298,78 @@ p5.Renderer.prototype.text = function(str, x, y, maxWidth, maxHeight) { testLine = `${line + words[wordIndex]}` + ' '; testWidth = this.textWidth(testLine); if (testWidth > maxWidth && line.length > 0) { - this._renderText(p, line, x, y, finalMaxHeight); + //this._renderText(p, line, x, y, finalMaxHeight); + nlines.push(line); + line = `${words[wordIndex]}` + ' '; + //y += p.textLeading(); + } else { + line = testLine; + } + } + //this._renderText(p, line, x, y, finalMaxHeight); + nlines.push(line); + //y += p.textLeading(); + } + //console.log('WORD: ', nlines); + let offset = 0; + + const vAlign = p.textAlign().vertical; + if (vAlign === constants.CENTER) { + offset = (nlines.length - 1) * p.textLeading() / 2; + } else if (vAlign === constants.BOTTOM) { + offset = (nlines.length - 1) * p.textLeading(); + } + //////////////////////////////////////////////////////////////////////// + + for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { + line = ''; + words = lines[lineIndex].split(' '); + for (let wordIndex = 0; wordIndex < words.length; wordIndex++) { + testLine = `${line + words[wordIndex]}` + ' '; + testWidth = this.textWidth(testLine); + if (testWidth > maxWidth && line.length > 0) { + this._renderText(p, line.trim(), x, y - offset, finalMaxHeight); line = `${words[wordIndex]}` + ' '; y += p.textLeading(); } else { line = testLine; } } - this._renderText(p, line, x, y, finalMaxHeight); + this._renderText(p, line.trim(), x, y - offset, finalMaxHeight); y += p.textLeading(); if (baselineHacked) { this._textBaseline = constants.BASELINE; } } } else { + // ADDED-CHAR ///////////////////////////////////////////////////////// + let nlines = []; + for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { + line = ''; + chars = lines[lineIndex].split(''); + for (let charIndex = 0; charIndex < chars.length; charIndex++) { + testLine = `${line + chars[charIndex]}`; + testWidth = this.textWidth(testLine); + if (testWidth <= maxWidth) { + line += chars[charIndex]; + } else if (testWidth > maxWidth && line.length > 0) { + nlines.push(line); + line = `${chars[charIndex]}`; + } + } + } + nlines.push(line); + console.log('CHAR: ', nlines); + let offset = 0; + + const vAlign = p.textAlign().vertical; + if (vAlign === constants.CENTER) { + offset = (nlines.length - 1) * p.textLeading() / 2; + } else if (vAlign === constants.BOTTOM) { + offset = (nlines.length - 1) * p.textLeading(); + } + //////////////////////////////////////////////////////////////////////// + // Splits lines at characters, for loop adds one char at a time and tests length with next char added for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) { line = ''; @@ -320,13 +380,13 @@ p5.Renderer.prototype.text = function(str, x, y, maxWidth, maxHeight) { if (testWidth <= maxWidth) { line += chars[charIndex]; } else if (testWidth > maxWidth && line.length > 0) { - this._renderText(p, line, x, y, finalMaxHeight); + this._renderText(p, line.trim(), x, y - offset, finalMaxHeight); y += p.textLeading(); line = `${chars[charIndex]}`; } } } - this._renderText(p, line, x, y, finalMaxHeight); + this._renderText(p, line.trim(), x, y - offset, finalMaxHeight); y += p.textLeading(); if (baselineHacked) { diff --git a/test/manual-test-examples/p5.Font/custom/sketch.js b/test/manual-test-examples/p5.Font/custom/sketch.js index fbd75b3939..b7243e0d64 100755 --- a/test/manual-test-examples/p5.Font/custom/sketch.js +++ b/test/manual-test-examples/p5.Font/custom/sketch.js @@ -1,22 +1,22 @@ var textSketch = function(p) { var font, font2; p.preload = function() { - font = p.loadFont('../acmesa.ttf'); + //font = p.loadFont('../acmesa.ttf'); font2 = p.loadFont('../SourceSansPro-Regular.otf'); }; p.setup = function() { p.createCanvas(240, 160); //p.ellipse(20,20,50,70); - p.textFont(font); + //p.textFont(font); + //p.text('Default Text', 10, 30); p.textSize(18); - p.text('Default Text', 10, 30); p.textFont(font2); p.noStroke(); p.fill(0, 102, 153); p.text('Blue No Stroke Text', 10, 60); - p.stroke(0, 200, 0); - p.strokeWeight(0.5); - p.text('Blue with Green Stroked Text', 10, 90); + //p.stroke(0, 200, 0); + //p.strokeWeight(0.5); + //p.text('Blue with Green Stroked Text', 10, 90); p.noStroke(); p.textSize(12); p.fill(120); @@ -469,7 +469,7 @@ var textAlignmentSketch = function(p) { var textString = 'Hello p5'; var padding = 10; p.preload = function() { - font1 = p.loadFont('../SourceSansPro-Regular.otf'); + font1 = p.loadFont('../SourceSansPro-Regular.otf'); // different font2 = p.loadFont('../FiraSans-Book.otf'); font3 = p.loadFont('../Inconsolata-Bold.ttf'); font4 = p.loadFont('../PlayfairDisplay-Regular.ttf'); @@ -523,7 +523,7 @@ var textVertAlignmentSketch = function(p) { 'Merriweather-LightItalic.ttf', 'Montserrat-Regular.ttf', 'OpenSans-Regular.ttf', - 'SourceSansPro-Regular.otf' + 'SourceSansPro-Regular.otf' // different ]; var fonts = []; var vAligns = [p.TOP, p.CENTER, p.BASELINE, p.BOTTOM]; diff --git a/test/manual-test-examples/p5.Font/system/sketch.js b/test/manual-test-examples/p5.Font/system/sketch.js index 91a5ba4681..726abfc2bf 100755 --- a/test/manual-test-examples/p5.Font/system/sketch.js +++ b/test/manual-test-examples/p5.Font/system/sketch.js @@ -1,23 +1,25 @@ var textSketch = function(p) { p.setup = function() { p.createCanvas(240, 160); - p.textSize(18); + p.background(204); + p.textSize(19.5); + p.fill(255); p.text('Default Text', 10, 30); p.noStroke(); - p.fill(0, 102, 153); - p.text('Blue No Stroke Text', 10, 60); - p.textStyle(p.ITALIC); - p.text('Blue No Stroke Text Italic', 10, 80); - p.textStyle(p.BOLD); - p.text('Blue No Stroke Text Bold', 10, 100); + p.fill(57, 112, 155); + p.text('Black No Stroke Text', 10, 60); + //p.textStyle(p.ITALIC); + //p.text('Blue No Stroke Text Italic', 10, 80); + //p.textStyle(p.BOLD); + //p.text('Blue No Stroke Text Bold', 10, 100); p .fill(120) .textStyle(p.NORMAL) - .textSize(12) + .textSize(13.5) .text( 'Simple long Text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', 10, - 110, + 92, 220, 60 );