diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index 6e0aed38..6cbdb6aa 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -36,7 +36,7 @@ class TextPage extends Vue { this.debouncedEmitPosChange = _.debounce((newValue) => { this.$emit('book-pos-changed', {bookPos: newValue}); - }, 100); + }, 1000); this.$root.$on('resize', () => {this.$nextTick(this.onResize)}); } @@ -47,16 +47,28 @@ class TextPage extends Vue { } async calcDrawProps() { - this.canvas.width = this.$refs.main.clientWidth; - this.canvas.height = this.$refs.main.clientHeight; + this.realWidth = this.$refs.main.clientWidth; + this.realHeight = this.$refs.main.clientHeight; + + if (window.devicePixelRatio) { + this.canvas.width = this.realWidth*window.devicePixelRatio; + this.canvas.height = this.realHeight*window.devicePixelRatio; + this.canvas.style.width = this.$refs.main.clientWidth + 'px'; + this.canvas.style.height = this.$refs.main.clientHeight + 'px'; + this.context.scale(window.devicePixelRatio, window.devicePixelRatio); + } else { + this.canvas.width = this.realWidth; + this.canvas.height = this.realHeight; + } + this.lineHeight = this.fontSize + this.lineInterval; this.pageLineCount = Math.floor(this.canvas.height/this.lineHeight); - this.w = this.canvas.width - 2*this.indent; - this.h = this.canvas.height; + this.w = this.realWidth - 2*this.indent; + this.h = this.realHeight; this.context.textAlign = 'left'; this.context.textBaseline = 'bottom'; - + if (this.parsed) { this.parsed.p = this.p; this.parsed.w = this.w;// px, ширина текста @@ -98,12 +110,12 @@ class TextPage extends Vue { this.textColor = 'black'; this.backgroundColor = '#478355'; this.fontStyle = '';// 'bold','italic' - this.fontSize = 40;// px + this.fontSize = 33;// px this.fontName = 'Arial'; - this.lineInterval = 15;// px, межстрочный интервал + this.lineInterval = 10;// px, межстрочный интервал this.textAlignJustify = true;// выравнивание по ширине - this.p = 60;// px, отступ параграфа - this.indent = 20;// px, отступ всего текста слева и справа + this.p = 50;// px, отступ параграфа + this.indent = 10;// px, отступ всего текста слева и справа this.wordWrap = true; this.calcDrawProps(); @@ -327,8 +339,8 @@ class TextPage extends Vue { 100: {30: 'PgUp', 100: 'PgDown'} }; - const w = event.clientX/this.canvas.width*100; - const h = event.clientY/this.canvas.height*100; + const w = event.clientX/this.realWidth*100; + const h = event.clientY/this.realHeight*100; let action = ''; loops: {