Работа с теневыми канвасами

client/components/Reader/TextPage/TextPage.vue

@@ -101,6 +101,7 @@ class TextPage extends Vue {
 
         this.statusBarColor = this.hex2rgba(this.textColor, 0.5);
         this.currentTransition = '';
+        this.pageChangeDirectionDown = true;
 
         //drawHelper
         this.drawHelper.realWidth = this.realWidth;
@@ -145,13 +146,13 @@ class TextPage extends Vue {
         this.p = 50;// px, отступ параграфа
         this.indent = 15;// px, отступ всего текста слева и справа
         this.wordWrap = true;
-        this.keepLastToFirst = true;//перенос последней строки в первую при листании
+        this.keepLastToFirst = true;// перенос последней строки в первую при листании
 
         this.showStatusBar = true;
-        this.statusBarTop = false;//top, bottom
+        this.statusBarTop = false;// top, bottom
         this.statusBarHeight = 20;// px
 
-        this.pageChangeTransition = '';//'' - нет, up-down, left-right, протаивание, мерцание
+        this.pageChangeTransition = '';// '' - нет, upDown, leftRight, thawing - протаивание, blink - мерцание
         this.pageChangeTransitionSpeed = 50; //0-100%
 
         this.calcDrawProps();
@@ -204,16 +205,33 @@ class TextPage extends Vue {
     draw(immediate) {
         if (immediate) {
             this.drawPage(this.contextMain);
-            this.drawPage(this.contextCurr);
-        } else {
-            this.contextCurr.drawImage(this.canvasNext, 0, 0);
             this.drawPage(this.contextNext);
+        } else {
             if (!this.currentTransition) {
-                this.contextMain.drawImage(this.canvasNext, 0, 0);
+                if (this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) {
+                    this.contextMain.drawImage(this.canvasPrepared, 0, 0);
+                } else {
+                    this.drawPage(this.contextNext);
+                    this.contextMain.drawImage(this.canvasNext, 0, 0);
+                }
             } else {
-                //make this.currentTransition
+                this.contextCurr.drawImage(this.canvasNext, 0, 0);
+                if (this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) {
+                    this.contextNext.drawImage(this.canvasPrepared, 0, 0);
+                } else {
+                    this.drawPage(this.contextNext);
+                }
+                /*
+                this.currentTransition
+                this.pageChangeTransitionSpeed
+                this.pageChangeDirectionDown  
+                */
+                //curr to next transition
+                //пока заглушка
+                this.contextMain.drawImage(this.canvasNext, 0, 0);
             }
             this.currentTransition = '';
+            this.pageChangeDirectionDown = false;//true только если PgDown
         }
     }
 
@@ -330,6 +348,7 @@ class TextPage extends Vue {
                 i--;
             if (i >= 0 && this.linesDown.length > i) {
                 this.currentTransition = this.pageChangeTransition;
+                this.pageChangeDirectionDown = true;
                 this.bookPos = this.linesDown[i].begin;
             }
         }
@@ -343,6 +362,7 @@ class TextPage extends Vue {
             i = (i > this.linesUp.length - 1 ? this.linesUp.length - 1 : i);
             if (i >= 0 && this.linesUp.length > i) {
                 this.currentTransition = this.pageChangeTransition;
+                this.pageChangeDirectionDown = false;
                 this.bookPos = this.linesUp[i].begin;
             }
         }