Поправки для планшета

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: {