From f7f9f4d51e4ba6839e067e2bdd1678bddb7de506 Mon Sep 17 00:00:00 2001 From: Book Pauk Date: Sun, 20 Jan 2019 20:51:47 +0700 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Reader/TextPage/TextPage.vue | 42 +++++++++---------- client/components/Reader/share/BookParser.js | 20 +++++---- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index 3b4c5b7e..15cfbcfc 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -21,7 +21,7 @@ export default @Component({ watch: { bookPos: function(newValue) { this.debouncedEmitPosChange(newValue); - this.drawPage(); + this.draw(); }, }, }) @@ -50,7 +50,6 @@ class TextPage extends Vue { mounted() { this.canvas = this.$refs.canvas; - this.context = this.canvas.getContext('2d'); } hex2rgba(hex, alpha = 1) { @@ -59,6 +58,8 @@ class TextPage extends Vue { } async calcDrawProps() { + this.contextMain = this.canvas.getContext('2d'); + this.realWidth = this.$refs.main.clientWidth; this.realHeight = this.$refs.main.clientHeight; @@ -68,31 +69,28 @@ class TextPage extends Vue { this.canvas.height = this.realHeight*ratio; this.canvas.style.width = this.$refs.main.clientWidth + 'px'; this.canvas.style.height = this.$refs.main.clientHeight + 'px'; - this.context.scale(ratio, ratio); + this.contextMain.scale(ratio, ratio); } else { this.canvas.width = this.realWidth; this.canvas.height = this.realHeight; } + //this.offscreen = new OffscreenCanvas(256, 256); + this.contextMain.textAlign = 'left'; + this.contextMain.textBaseline = 'bottom'; + this.w = this.realWidth - 2*this.indent; this.h = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0); this.lineHeight = this.fontSize + this.lineInterval; this.pageLineCount = Math.floor(this.h/this.lineHeight); - this.context.textAlign = 'left'; - this.context.textBaseline = 'bottom'; - if (this.parsed) { this.parsed.p = this.p; this.parsed.w = this.w;// px, ширина текста this.parsed.font = this.font; this.parsed.wordWrap = this.wordWrap; - this.measureText = (text, style) => {// eslint-disable-line no-unused-vars - if (style) - this.context.font = this.fontByStyle(style); - return this.context.measureText(text).width; - }; - this.parsed.measureText = this.measureText; + this.parsed.context = this.contextMain; + this.parsed.fontByStyle = this.fontByStyle; } this.statusBarColor = this.hex2rgba(this.textColor, 0.5); @@ -145,7 +143,7 @@ class TextPage extends Vue { this.statusBarHeight = 20;// px this.calcDrawProps(); - this.drawPage();// пока не загрузили, очистим канвас + this.draw();// пока не загрузили, очистим канвас if (this.lastBook) { (async() => { @@ -173,14 +171,14 @@ class TextPage extends Vue { await this.loadFonts(); - this.drawPage(); + this.draw(); })(); } } onResize() { this.calcDrawProps(); - this.drawPage(); + this.draw(true); } get font() { @@ -191,12 +189,14 @@ class TextPage extends Vue { return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`; } - drawPage() { + draw(immediate) { + this.drawPage(this.contextMain); + } + + drawPage(context) { if (!this.lastBook) return; - const context = this.context; - context.fillStyle = this.backgroundColor; context.fillRect(0, 0, this.realWidth, this.realHeight); @@ -216,7 +216,7 @@ class TextPage extends Vue { */ context.font = this.font; context.fillStyle = this.textColor; - const spaceWidth = this.context.measureText(' ').width; + const spaceWidth = context.measureText(' ').width; const lines = this.parsed.getLines(this.bookPos, this.pageLineCount + 1); this.linesUp = this.parsed.getLines(this.bookPos, -(this.pageLineCount + 1)); @@ -267,7 +267,7 @@ class TextPage extends Vue { for (let i = 0; i < partWords.length; i++) { let word = partWords[i]; context.fillText(word, x, y); - x += this.measureText(word) + (i < partWords.length - 1 ? space : 0); + x += context.measureText(word).width + (i < partWords.length - 1 ? space : 0); } } filled = true; @@ -281,7 +281,7 @@ class TextPage extends Vue { let text = part.text; context.font = this.fontByStyle(part.style); context.fillText(text, x, y); - x += this.measureText(text); + x += context.measureText(text).width; } } } diff --git a/client/components/Reader/share/BookParser.js b/client/components/Reader/share/BookParser.js index f4189089..812f90d4 100644 --- a/client/components/Reader/share/BookParser.js +++ b/client/components/Reader/share/BookParser.js @@ -8,9 +8,15 @@ export default class BookParser { this.w = 300;// px, ширина страницы this.wordWrap = false;// перенос по слогам - // заглушка this.measureText = (text, style) => {// eslint-disable-line no-unused-vars - return text.length*10; + if (this.context) { + this.context.save(); + this.context.font = this.fontByStyle(style); + const w = this.context.measureText(text).width; + this.context.restore(); + return w; + } else + return 0; }; } @@ -340,12 +346,12 @@ export default class BookParser { let prevStr = ''; let prevW = 0; let j = 0;//номер строки + let style = {}; let ofs = -1; - // тут начинается самый замес, перенос по слогам и стилизация for (const part of parts) { const words = part.text.split(' '); - const style = part.style; + style = part.style; let sp1 = ''; let sp2 = ''; @@ -396,7 +402,7 @@ export default class BookParser { let t = line.parts[line.parts.length - 1].text; if (t[t.length - 1] == ' ') { line.parts[line.parts.length - 1].text = t.trimRight(); - prevW -= this.measureText(' '); + prevW -= this.measureText(' ', style); } } line.end = para.offset + ofs - wordTail.length - 1; @@ -425,9 +431,9 @@ export default class BookParser { if (line.parts.length) {//корявенько, коррекция при переносе let t = line.parts[line.parts.length - 1].text; - if (t.trimRight() != t) { + if (t[t.length - 1] == ' ') { line.parts[line.parts.length - 1].text = t.trimRight(); - prevW -= this.measureText(' '); + prevW -= this.measureText(' ', style); } } line.end = para.offset + para.length - 1;