Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement text wrapping #11

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Implement text wrapping #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 33 additions & 3 deletions src/HTMLMesh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,27 @@ function html2canvas( element ) {

}

function drawText( style, x, y, string ) {
function getLines( ctx, text, maxWidth ) {
const words = text.split( " " );
const lines = [];
let currentLine = words[0];

for (let i = 1; i < words.length; i++) {

const word = words[i];
const width = ctx.measureText( currentLine + " " + word ).width;
if ( width < maxWidth ) {
currentLine += " " + word;
} else {
lines.push( currentLine );
currentLine = word;
}
}
lines.push(currentLine);
return lines;
}

function drawText( style, x, y, string, maxWidth ) {

if ( string !== '' ) {

Expand All @@ -203,7 +223,14 @@ function html2canvas( element ) {
context.font = style.fontWeight + ' ' + style.fontSize + ' ' + style.fontFamily;
context.textBaseline = 'top';
context.fillStyle = style.color;
context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 );
if ( !maxWidth ) {
context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 );
} else {
const lines = getLines(context, string, maxWidth);
lines.forEach(function(line, i) {
context.fillText( line, x, y + parseFloat( style.fontSize ) * 0.1 + i * parseFloat( style.fontSize ) * 1.3 );
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually have no idea why I need 1.3 here. I also don't understand why we have the 0.1 here. Is this related to line-height maybe? 0.1 above, 0.1 below + 0.1 between lines?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's to vertically centre the text

});
}

}

Expand Down Expand Up @@ -259,8 +286,11 @@ function html2canvas( element ) {
y = rect.top - offset.top - 0.5;
width = rect.width;
height = rect.height;
// On Quest the font used to draw on canvas is bigger than on
// the desktop, compensate for this.
const maxWidth = width * 1.01; // 1.005 is good, but use 1.01 to be sure
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is hacky. I didn't have the same result on Meta browser and Chrome desktop.
Also without this, the label for radio weren't in one line but on two lines.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't love it but whatever works tbh


drawText( style, x, y, element.nodeValue.trim() );
drawText( style, x, y, element.nodeValue.trim(), maxWidth );

} else if ( element.nodeType === Node.COMMENT_NODE ) {

Expand Down