deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Работа над избавлением от канваса в сторону верстки дивами

Browse Source
This commit is contained in:
Book Pauk
2019-01-24 16:16:04 +07:00
parent 132956eabd
commit 6cecc8d8c8
3 changed files with 73 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/components/Reader/TextPage/DrawHelper.js
View File

@@ -67,5 +67,11 @@ export default class DrawHelper {
} }
} }
fillText(text, x, y, font) {
/*this.context1.textAlign = 'left';
this.context2.textAlign = 'left';
this.context1.textBaseline = 'bottom';
this.context2.textBaseline = 'bottom';*/
return `<div style="position: absolute; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
}
} }

144
client/components/Reader/TextPage/TextPage.vue
View File

@@ -1,15 +1,22 @@
<template> <template>
<div ref="main" class="main" @click.capture="onMouseClick"> <div ref="main" class="main" @click.capture="onMouseClick">
<canvas :style="canvasStyle1" ref="canvas1" class="canvas" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp" <div v-show="activeCanvas" class="layout">
<div v-html="page1"></div>
</div>
<div v-show="!activeCanvas" class="layout">
<div v-html="page2"></div>
</div>
<!--canvas :style="canvasStyle2" ref="canvas2" class="canvas" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
@wheel.prevent.stop="onMouseWheel" @wheel.prevent.stop="onMouseWheel"
@touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel" @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel"
oncontextmenu="return false;"> oncontextmenu="return false;">
</canvas> </canvas-->
<canvas :style="canvasStyle2" ref="canvas2" class="canvas" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp" <div ref="layoutEvents" class="layout events" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
@wheel.prevent.stop="onMouseWheel" @wheel.prevent.stop="onMouseWheel"
@touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel" @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel"
oncontextmenu="return false;"> oncontextmenu="return false;">
</canvas> </div>
<canvas ref="offscreenCanvas" style="display: none"></canvas>
</div> </div>
</template> </template>
@@ -33,6 +40,8 @@ export default @Component({
}) })
class TextPage extends Vue { class TextPage extends Vue {
activeCanvas = false; activeCanvas = false;
page1 = null;
page2 = null;
lastBook = null; lastBook = null;
bookPos = 0; bookPos = 0;
@@ -68,8 +77,7 @@ class TextPage extends Vue {
} }
mounted() { mounted() {
this.canvas1 = this.$refs.canvas1; this.context = this.$refs.offscreenCanvas.getContext('2d');
this.canvas2 = this.$refs.canvas2;
} }
hex2rgba(hex, alpha = 1) { hex2rgba(hex, alpha = 1) {
@@ -78,36 +86,12 @@ class TextPage extends Vue {
} }
async calcDrawProps() { async calcDrawProps() {
this.context1 = this.canvas1.getContext('2d');
this.context2 = this.canvas2.getContext('2d');
this.realWidth = this.$refs.main.clientWidth; this.realWidth = this.$refs.main.clientWidth;
this.realHeight = this.$refs.main.clientHeight; this.realHeight = this.$refs.main.clientHeight;
let ratio = window.devicePixelRatio; this.$refs.layoutEvents.style.width = this.realWidth + 'px';
if (ratio) { this.$refs.layoutEvents.style.height = this.realHeight + 'px';
this.canvas1.width = this.realWidth*ratio;
this.canvas1.height = this.realHeight*ratio;
this.canvas1.style.width = this.$refs.main.clientWidth + 'px';
this.canvas1.style.height = this.$refs.main.clientHeight + 'px';
this.context1.scale(ratio, ratio);
this.canvas2.width = this.realWidth*ratio;
this.canvas2.height = this.realHeight*ratio;
this.canvas2.style.width = this.$refs.main.clientWidth + 'px';
this.canvas2.style.height = this.$refs.main.clientHeight + 'px';
this.context2.scale(ratio, ratio);
} else {
this.canvas1.width = this.realWidth;
this.canvas1.height = this.realHeight;
this.canvas2.width = this.realWidth;
this.canvas2.height = this.realHeight;
}
this.context1.textAlign = 'left';
this.context2.textAlign = 'left';
this.context1.textBaseline = 'bottom';
this.context2.textBaseline = 'bottom';
this.activeCanvas = false; this.activeCanvas = false;
this.w = this.realWidth - 2*this.indent; this.w = this.realWidth - 2*this.indent;
@@ -120,8 +104,7 @@ class TextPage extends Vue {
this.parsed.w = this.w;// px, ширина текста this.parsed.w = this.w;// px, ширина текста
this.parsed.font = this.font; this.parsed.font = this.font;
this.parsed.wordWrap = this.wordWrap; this.parsed.wordWrap = this.wordWrap;
this.parsed.context = this.context1; this.parsed.measureText = this.measureText;
this.parsed.fontByStyle = this.fontByStyle;
} }
this.statusBarColor = this.hex2rgba(this.textColor, this.statusBarColorAlpha); this.statusBarColor = this.hex2rgba(this.textColor, this.statusBarColorAlpha);
@@ -137,6 +120,11 @@ class TextPage extends Vue {
this.drawHelper.fontName = this.fontName; this.drawHelper.fontName = this.fontName;
} }
measureText(text, style) {// eslint-disable-line no-unused-vars
this.context.font = this.fontByStyle(style);
return this.context.measureText(text).width;
}
async loadFonts() { async loadFonts() {
let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font))); let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font)));
if (loaded.some(r => !r)) { if (loaded.some(r => !r)) {
@@ -213,7 +201,7 @@ class TextPage extends Vue {
await this.loadFonts(); await this.loadFonts();
this.draw(); this.draw();
this.refreshTime(); //this.refreshTime();
})(); })();
} }
} }
@@ -231,22 +219,6 @@ class TextPage extends Vue {
return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`; return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`;
} }
get context() {
return (this.activeCanvas ? this.context1 : this.context2);
}
get canvas() {
return (this.activeCanvas ? this.canvas1 : this.canvas2);
}
get canvasStyle1() {
return (this.activeCanvas ? {'z-index': 11} : {'z-index': 10});
}
get canvasStyle2() {
return (this.activeCanvas ? {'z-index': 10} : {'z-index': 11});
}
draw(immediate) { draw(immediate) {
if (this.book && this.bookPos > 0 && this.bookPos >= this.parsed.textLength) { if (this.book && this.bookPos > 0 && this.bookPos >= this.parsed.textLength) {
this.doEnd(); this.doEnd();
@@ -254,12 +226,15 @@ class TextPage extends Vue {
} }
this.activeCanvas = !this.activeCanvas; this.activeCanvas = !this.activeCanvas;
const context = this.context;
if (immediate) { immediate = true;
this.drawPage(context, this.bookPos); if (immediate) {
if (this.activeCanvas)
this.page1 = this.drawPage(this.bookPos);
else
this.page2 = this.drawPage(this.bookPos);
} else { } else {
if (this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) { /*if (this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) {
this.linesDown = this.linesDownNext; this.linesDown = this.linesDownNext;
this.linesUp = this.linesUpNext; this.linesUp = this.linesUpNext;
this.pagePrepared = false; this.pagePrepared = false;
@@ -268,7 +243,7 @@ class TextPage extends Vue {
this.drawPage(context, this.bookPos); this.drawPage(context, this.bookPos);
this.pagePrepared = false; this.pagePrepared = false;
this.debouncedPrepareNextPage(); this.debouncedPrepareNextPage();
} }*/
if (this.currentTransition) { if (this.currentTransition) {
//this.currentTransition //this.currentTransition
@@ -284,19 +259,19 @@ class TextPage extends Vue {
} }
} }
drawPage(context, bookPos, nextChangeLines) { drawPage(bookPos, nextChangeLines) {
if (!this.lastBook) if (!this.lastBook)
return; return;
context.fillStyle = this.backgroundColor; let out = `<div class="layout" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` +
context.fillRect(0, 0, this.realWidth, this.realHeight); ` color: ${this.textColor}; background-color: ${this.backgroundColor}">`;
if (!this.book || !this.parsed.textLength) if (!this.book || !this.parsed.textLength) {
return; out += '</div>';
return out;
}
context.font = this.font; const spaceWidth = this.measureText(' ', {});
context.fillStyle = this.textColor;
const spaceWidth = context.measureText(' ').width;
const lines = this.parsed.getLines(bookPos, 2*this.pageLineCount); const lines = this.parsed.getLines(bookPos, 2*this.pageLineCount);
if (!nextChangeLines) { if (!nextChangeLines) {
@@ -328,13 +303,15 @@ class TextPage extends Vue {
}*/ }*/
let indent = this.indent + (line.first ? this.p : 0); let indent = this.indent + (line.first ? this.p : 0);
y += this.lineHeight;
let lineText = ''; let lineText = '';
let center = false; let center = false;
let centerStyle = {};
for (const part of line.parts) { for (const part of line.parts) {
lineText += part.text; lineText += part.text;
center = center || part.style.center; center = center || part.style.center;
if (part.style.center)
centerStyle = part.style.center;
} }
let filled = false; let filled = false;
@@ -349,13 +326,13 @@ class TextPage extends Vue {
let x = indent; let x = indent;
for (const part of line.parts) { for (const part of line.parts) {
context.font = this.fontByStyle(part.style); const font = this.fontByStyle(part.style);
let partWords = part.text.split(' '); let partWords = part.text.split(' ');
for (let i = 0; i < partWords.length; i++) { for (let i = 0; i < partWords.length; i++) {
let word = partWords[i]; let word = partWords[i];
context.fillText(word, x, y); out += this.drawHelper.fillText(word, x, y, font);
x += context.measureText(word).width + (i < partWords.length - 1 ? space : 0); x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0);
} }
} }
filled = true; filled = true;
@@ -365,20 +342,24 @@ class TextPage extends Vue {
// просто выводим текст // просто выводим текст
if (!filled) { if (!filled) {
let x = indent; let x = indent;
x = (center ? this.indent + (this.w - context.measureText(lineText).width)/2 : x); x = (center ? this.indent + (this.w - this.measureText(lineText, centerStyle))/2 : x);
for (const part of line.parts) { for (const part of line.parts) {
let text = part.text; let text = part.text;
context.font = this.fontByStyle(part.style); const font = this.fontByStyle(part.style);
context.fillText(text, x, y); out += this.drawHelper.fillText(text, x, y, font);
x += context.measureText(text).width; x += this.measureText(text, part.style);
} }
} }
y += this.lineHeight;
} }
this.drawStatusBar(context, lines); out += '</div>';
//this.drawStatusBar(context, lines);
return out;
} }
drawStatusBar(context, lines) { /*drawStatusBar(context, lines) {
if (!lines) if (!lines)
lines = this.linesDown; lines = this.linesDown;
@@ -404,7 +385,7 @@ class TextPage extends Vue {
this.timeRefreshing = false; this.timeRefreshing = false;
this.refreshTime(); this.refreshTime();
} }
} }*/
prepareNextPage() { prepareNextPage() {
// подготовка следующей страницы заранее // подготовка следующей страницы заранее
@@ -622,10 +603,7 @@ class TextPage extends Vue {
onMouseClick(event) { onMouseClick(event) {
if (this.showStatusBar && this.book) { if (this.showStatusBar && this.book) {
const pointX = event.pageX - this.canvas.offsetLeft; if (this.checkPointInStatusBar(event.offsetX, event.offsetY)) {
const pointY = event.pageY - this.canvas.offsetTop;
if (this.checkPointInStatusBar(pointX, pointY)) {
window.open(this.meta.url, '_blank'); window.open(this.meta.url, '_blank');
return false; return false;
} }
@@ -695,9 +673,15 @@ class TextPage extends Vue {
position: relative; position: relative;
} }
.canvas { .layout {
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
z-index: 10;
}
.events {
z-index: 20;
background-color: rgba(0,0,0,0);
} }
</style> </style>

10
client/components/Reader/share/BookParser.js
View File

@@ -8,15 +8,9 @@ export default class BookParser {
this.w = 300;// px, ширина страницы this.w = 300;// px, ширина страницы
this.wordWrap = false;// перенос по слогам this.wordWrap = false;// перенос по слогам
//заглушка
this.measureText = (text, style) => {// eslint-disable-line no-unused-vars this.measureText = (text, style) => {// eslint-disable-line no-unused-vars
if (this.context) { return text.length*20;
this.context.save();
this.context.font = this.fontByStyle(style);
const w = this.context.measureText(text).width;
this.context.restore();
return w;
} else
return 0;
}; };
} }