dos

Public/static/js/common.js

@@ -116,6 +116,8 @@ $(document).ready(function () {
             $('.username,.company').show();
             var mc = new Hammer($('.touch').get(0));
             bindMc(mc, uploadCtx, uploadCanvas, img, imgInfo);
+            drawVerticalText(uploadCtx, username, '#595857',32 * 2, 95 * 2, 345 * 2, true, 5 * 2);
+            drawVerticalText(uploadCtx, company, '#595857',32 * 2, 95 * 2, 505 * 2, true, 5 * 2);
         }, imgInfo);
         return false;
     });
@@ -222,7 +224,7 @@ function setShare() {
 }
 
 function initPage() {
-    // const displacement = parseFloat(getTranslateDistance());
+    const displacement = parseFloat(getTranslateDistance());
     // const wrapHeight = parseFloat($('.wrap').css('height'));
     canvasHeight = 1238;
     // $('.upload-canvas-block,.poster-img,.show-img,.poster-canvas').css('height', wrapHeight + 'px').css('top', displacement < 0 ? -displacement : 0 + 'px');
@@ -230,6 +232,14 @@ function initPage() {
 
     //     $('.upload-page .logo').css('top', -displacement + 183 + 'px');
     // }
+
+    if (displacement > 0) {
+        const scale = document.documentElement.clientHeight / $('.page').height();
+        $('.wrap-inner').css({
+            'transform': 'translate(0%,-50%) scale(1,' + scale + ')'
+        });
+    }
+
     // if (displacement > 0) {
     //     const scale = document.documentElement.clientHeight / $('.page').height();
     //     $('.wrap-inner').css({
@@ -406,6 +416,8 @@ function bindMc(mc, ctx, myCanvas, img, imgInfo) {
             imgInfo.y += movedY * 2;
 
             drawImage(ctx, myCanvas, img, imgInfo);
+            drawVerticalText(ctx, username, '#595857',32 * 2, 95 * 2, 345 * 2, true, 5 * 2);
+            drawVerticalText(ctx, company, '#595857',32 * 2, 95 * 2, 505 * 2, true, 5 * 2);
         }
     });
     var oldScale = 1;
@@ -421,6 +433,8 @@ function bindMc(mc, ctx, myCanvas, img, imgInfo) {
             oldScale = event.scale;
             imgInfo.scale *= nowScale;
             drawImage(ctx, myCanvas, img, imgInfo);
+            drawVerticalText(ctx, username, '#595857',32 * 2, 95 * 2, 345 * 2, true, 5 * 2);
+            drawVerticalText(ctx, company, '#595857',32 * 2, 95 * 2, 505 * 2, true, 5 * 2);
         }
     });
     var oldRotation = 0;
@@ -436,6 +450,8 @@ function bindMc(mc, ctx, myCanvas, img, imgInfo) {
             oldRotation = event.rotation;
             imgInfo.rotation += nowRotation;
             drawImage(ctx, myCanvas, img, imgInfo);
+            drawVerticalText(ctx, username, '#595857',32 * 2, 95 * 2, 345 * 2, true, 5 * 2);
+            drawVerticalText(ctx, company, '#595857',32 * 2, 95 * 2, 505 * 2, true, 5 * 2);
         }
     });
 }