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

fix canvas write text of multiple lines

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