Skip to content

php / ccb-lantern

Go to a project
Commit 7728d8f1 by doszhang
Options

dos

parent f1d371b3
Showing with 58 additions and 56 deletions
Public/static/js/common.js
...@@ -432,9 +432,11 @@ function calculationWrap() { ...@@ -432,9 +432,11 @@ function calculationWrap() {
} }
function createPoster() { function createPoster() {
//初始化海报canvas
let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, 1238 * 2, true); let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, 1238 * 2, true);
posterCanvas = canvasinfo[0]; posterCanvas = canvasinfo[0];
posterCtx = canvasinfo[1]; posterCtx = canvasinfo[1];
//计算每行文字数量
wrapNum = calculationWrap(); wrapNum = calculationWrap();
$('.poster-list-page').show(); $('.poster-list-page').show();
$('.poster-page .poster-canvas-block').append($('<img class="posterImg" src="" />')); $('.poster-page .poster-canvas-block').append($('<img class="posterImg" src="" />'));
...@@ -443,66 +445,66 @@ function createPoster() { ...@@ -443,66 +445,66 @@ function createPoster() {
createList('.poster-list-page .poster-list', flagStack[i], i + 1, wrapNum); createList('.poster-list-page .poster-list', flagStack[i], i + 1, wrapNum);
} }
let flagListHeight = $('.poster-list-page .poster-list').height(); // let flagListHeight = $('.poster-list-page .poster-list').height();
flagListHeight = (flagListHeight / fontSize) * 20; // flagListHeight = (flagListHeight / fontSize) * 20;
flagListHeight = flagListHeight + 20; // flagListHeight = flagListHeight + 20;
let topHalfHeight = 489; // let topHalfHeight = 489;
let bottomHalfHeight = 368; // let bottomHalfHeight = 368;
let posterCanvasHeight = 0; // let posterCanvasHeight = 0;
flagListHeight = flagListHeight + 60; // flagListHeight = flagListHeight + 60;
if (flagListHeight < 383) { // if (flagListHeight < 383) {
posterCanvasHeight = topHalfHeight + 383 + bottomHalfHeight; // posterCanvasHeight = topHalfHeight + 383 + bottomHalfHeight;
flagListHeight = 383; // flagListHeight = 383;
} else { // } else {
posterCanvasHeight = topHalfHeight + flagListHeight + bottomHalfHeight; // posterCanvasHeight = topHalfHeight + flagListHeight + bottomHalfHeight;
} // }
$('#posterCanvas').remove(); // $('#posterCanvas').remove();
canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, posterCanvasHeight * 2, true); // canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, posterCanvasHeight * 2, true);
posterCanvas = canvasinfo[0]; // posterCanvas = canvasinfo[0];
posterCtx = canvasinfo[1]; // posterCtx = canvasinfo[1];
$('#posterCanvas').css('height', pxToRem(posterCanvasHeight)); // $('#posterCanvas').css('height', pxToRem(posterCanvasHeight));
posterCtx.fillStyle = bgColor; // posterCtx.fillStyle = bgColor;
posterCtx.fillRect(0, 0, posterCanvas.width, posterCanvas.height); // posterCtx.fillRect(0, 0, posterCanvas.width, posterCanvas.height);
//45 107 // //45 107
let topHalf = new Image(); // let topHalf = new Image();
topHalf.src = "/Public/static/image2/poster-tophalf.png"; // topHalf.src = "/Public/static/image2/poster-tophalf.png";
topHalf.onload = function () { // topHalf.onload = function () {
//画海报上半部分 // //画海报上半部分
posterCtx.drawImage(topHalf, pxToRem(45 * 2), pxToRem(107 * 2), pxToRem(550 * 2), pxToRem(382 * 2)); // posterCtx.drawImage(topHalf, pxToRem(45 * 2), pxToRem(107 * 2), pxToRem(550 * 2), pxToRem(350 * 2));
posterCtx.save(); // posterCtx.save();
posterCtx.restore(); // posterCtx.restore();
//画海报中部背景 // //画海报中部背景
posterCtx.fillStyle = '#f4f4f4'; // posterCtx.fillStyle = '#ffffff';
posterCtx.fillRect(pxToRem(45 * 2), pxToRem(489 * 2), pxToRem(550 * 2), pxToRem(flagListHeight * 2)); // posterCtx.fillRect(pxToRem(45 * 2), pxToRem(488 * 2), pxToRem(550 * 2), pxToRem(flagListHeight * 2));
posterCtx.save(); // posterCtx.save();
posterCtx.restore(); // posterCtx.restore();
//画海报底部 // //画海报底部
let bottomHalf = new Image(); // let bottomHalf = new Image();
bottomHalf.src = "/Public/static/image2/poster-bottomhalf.png"; // bottomHalf.src = "/Public/static/image2/poster-bottomhalf.png";
bottomHalf.onload = function () { // bottomHalf.onload = function () {
bottomHalfTop = pxToRem(487) + pxToRem(flagListHeight); // bottomHalfTop = pxToRem(487) + pxToRem(flagListHeight);
$('.poster-tip').css('top', bottomHalfTop + pxToRem(181)); // $('.poster-tip').css('top', bottomHalfTop + pxToRem(181));
posterCtx.drawImage(bottomHalf, pxToRem(45 * 2), bottomHalfTop * 2, pxToRem(550 * 2), pxToRem(238 * 2)); // posterCtx.drawImage(bottomHalf, pxToRem(45 * 2), bottomHalfTop * 2, pxToRem(550 * 2), pxToRem(207 * 2));
drawFlagItem(pxToRem(489 + 20)); // drawFlagItem(pxToRem(489 + 20));
let decorate = new Image(); // let decorate = new Image();
decorate.src = checkedDecorate; // decorate.src = checkedDecorate;
decorate.onload = function () { // decorate.onload = function () {
posterCtx.drawImage(decorate, pxToRem(170 * 2), pxToRem(305 * 2), pxToRem(300 * 2), pxToRem(150 * 2)); // posterCtx.drawImage(decorate, pxToRem(170 * 2), pxToRem(305 * 2), pxToRem(300 * 2), pxToRem(150 * 2));
flagTextDraw(posterCtx, signature, pxToRem(40 * 2), '#222222', pxToRem(230 * 2), (bottomHalfTop + pxToRem(103)) * 2, 'font'); // flagTextDraw(posterCtx, signature, pxToRem(40 * 2), '#222222', pxToRem(230 * 2), (bottomHalfTop + pxToRem(103)) * 2, 'font');
flagTextDraw(posterCtx, getTime(), pxToRem(20 * 2), '#222222', pxToRem(230 * 2), (bottomHalfTop + pxToRem(136)) * 2); // flagTextDraw(posterCtx, getTime(), pxToRem(20 * 2), '#222222', pxToRem(230 * 2), (bottomHalfTop + pxToRem(136)) * 2);
setTimeout(function () { // setTimeout(function () {
$('.posterImg').attr('src', getManBase64(posterCanvas)).css('height', pxToRem(posterCanvasHeight)); // $('.posterImg').attr('src', getManBase64(posterCanvas)).css('height', pxToRem(posterCanvasHeight));
}, 1000); // }, 1000);
} // }
} // }
} // }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment