dos

Public/static/js/common.js

@@ -53,6 +53,8 @@ var canvas, ctx, w, h, particles = [],
 
 var fireworkLock = false;
 
+let posterCanvas, posterCtx;
+
 $(document).ready(function () {
     if ($('.page').height() < document.documentElement.clientHeight) {
         var scale = document.documentElement.clientHeight / $('.page').height();
@@ -81,6 +83,10 @@ $(document).ready(function () {
     $('.scene-3').on('click', {
         scene: 3
     }, toscene)
+
+    $('.result').on('click', {
+        resultFlag: $(this).attr('class').replace(/[^0-9]/ig, "")
+    }, showResult)
 });
 
 
@@ -102,6 +108,104 @@ function toPage3() {
     $('.page3').show();
 }
 
+function showResult(event) {
+    const resultFlag = event.data.resultFlag
+    console.log(resultFlag)
+}
+
+function createPoster(resultFlag) {
+    $('#notification_area').remove();
+    my_notify('正在生成海报，请稍候', 60000);
+
+    let canvasinfo = initCanvas('.poster-canvas', 'posterCanvas', 640 * 2, 1238 * 2);
+    posterCanvas = canvasinfo[0];
+    posterCtx = canvasinfo[1];
+    var posterObj = new Image();
+    posterObj.src = '/Public/static/image2/result-' + resultFlag + '.jpg';
+    posterObj.onload = function () {
+        posterCtx.drawImage(posterObj, 0, 0, posterCanvas.width, posterCanvas.height);
+        setTimeout(function () {
+            drawNum();
+        }, 200);
+        setTimeout(function () {
+            $('.poster-canvas').append('<img class="posterimg" />');
+            $('.posterimg').attr('src', getManBase64(posterCanvas));
+            $('.page').hide();
+            $('.page7').show();
+            $('#notification_area').remove();
+            createPosterLock = false;
+        }, 500);
+    }
+}
+
+function drawNum() {
+    posterCtx.font = 'normal ' + '48px normal';
+    let text1 = '已有';
+    let text2 = '人发起承诺';
+    let text1Width = posterCtx.measureText(text1).width;
+    let text2Width = posterCtx.measureText(text2).width;
+    posterCtx.font = 'normal ' + '80px num';
+    let numWidth = posterCtx.measureText(window.num).width;
+    let totalWidth = text1Width + 10 * 2 + numWidth + 6 * 2 + text2Width;
+    let text1X = 212 * 2 - totalWidth / 2;
+    let numX = text1X + text1Width + 10 * 2;
+    let text2X = numX + numWidth + 6 * 2;
+    txtDraw(posterCtx, window.num, '#fff', numX, 557 * 2);
+    posterCtx.font = 'normal ' + '48px normal';
+    txtDraw(posterCtx, text1, '#fff', text1X, 557 * 2);
+    txtDraw(posterCtx, text2, '#fff', text2X, 557 * 2);
+}
+
+function txtDraw(ctx, content, x, y, fontsize, fontweight, color, textAlign = 'left', rightReserved = 0, stroke = false) {
+    x = x * 2;
+    y = y * 2;
+    fontsize = fontsize * 2;
+    ctx.font = fontweight + ' ' + fontsize + 'px arial';
+    if (stroke) {
+        //设置描边颜色
+        ctx.strokeStyle = "#494949";
+        //设置描边宽度
+        ctx.lineWidth = 7;
+    }
+    if (textAlign == 'center') {
+        var width = ctx.measureText(content).width;
+        var cx = x - width / 2;
+        ctx.fillStyle = color;
+        ctx.fillText(content, cx, y);
+    } else if (textAlign == 'right') {
+        var width = ctx.measureText(content).width;
+        var cx = x - width;
+        if (rightReserved) {
+            cx = x - width - rightReserved;
+        }
+        ctx.fillStyle = color;
+        ctx.fillText(content, cx, y);
+        return width;
+    } else {
+        ctx.fillStyle = color;
+        if (stroke) {
+            ctx.strokeText(content, x, y);
+        }
+        ctx.fillText(content, x, y);
+    }
+
+}
+
+function getManBase64(canvas) {
+    return canvas.toDataURL('image/png');
+}
+
+function initCanvas(target, id, canvasWidth, canvasHeight) {
+    black = loadedImages[blackUrl];
+    $(target).append($('<canvas id="' + id + '" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'));
+    canvas = $('#' + id)[0];
+    ctx = canvas.getContext("2d");
+    ctx.scale(2, 2);
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    return [canvas, ctx];
+}
+
 function deepClone(obj) {
 
     var objClone = new Particle