WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix canvas write text of multiple lines

This commit is contained in:
raphael 2020-05-12 21:02:02 +02:00
parent 3e9c3184f7
commit 1c664a810e
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/js/utils.js
View File

@ -42,3 +42,12 @@ export function getSubDir() {
return subdir;
}
export function fillTextMultiLine(ctx, text, x, y) {
var lineHeight = ctx.measureText("M").width * 2.5;
var lines = text.split("\n");
for (var i = 0; i < lines.length; ++i) {
ctx.fillText(lines[i], x, y);
y += lineHeight;
}
}

6
src/js/whiteboard.js
View File

@ -4,6 +4,7 @@ import ReadOnlyService from "./services/ReadOnlyService";
import InfoService from "./services/InfoService";
import ThrottlingService from "./services/ThrottlingService";
import ConfigService from "./services/ConfigService";
import { fillTextMultiLine } from "./utils";
const RAD_TO_DEG = 180.0 / Math.PI;
const DEG_TO_RAD = Math.PI / 180.0;
@ -1197,7 +1198,8 @@ const whiteboard = {
//Draw the text on top
var textContainer = $(this);
var textEl = $(this).find(".textContent");
var text = textEl.text();
var text = textEl.html();
text = text.split("<div>").join("").split("</div>").join("\n");
var fontSize = textEl.css("font-size");
var fontColor = textEl.css("color");
var p = textContainer.position();
@ -1206,7 +1208,7 @@ const whiteboard = {
top += 25; //Fix top position
ctx.font = fontSize + " Monospace";
ctx.fillStyle = fontColor;
ctx.fillText(text, left, top);
fillTextMultiLine(ctx, text, left, top);
});
var url = copyCanvas.toDataURL();