diff --git a/frontend/src/assets/template/poster/overlay.png b/frontend/src/assets/template/poster/overlay.png index 72aefb6c47dd5a9e4e3d5e0c7272df0d417340c6..a2be5dcb1a9990c9277b08c35bd6b104ea555c70 100644 Binary files a/frontend/src/assets/template/poster/overlay.png and b/frontend/src/assets/template/poster/overlay.png differ diff --git a/frontend/src/views/poster/Poster.vue b/frontend/src/views/poster/Poster.vue index 6311f7d248eeefb7626ec39f92114e0a43897958..ab805e4728e3a0bea49d056eda0171ef61eb24f7 100644 --- a/frontend/src/views/poster/Poster.vue +++ b/frontend/src/views/poster/Poster.vue @@ -50,7 +50,8 @@ export default { colors: { background: COLORS.white, baseText: COLORS.black, - contractedByText: COLORS.gray1 + contractedByText: COLORS.gray1, + arrow: COLORS.yellow1 } } } @@ -74,7 +75,8 @@ export default { colorLabels: { background: 'Pozadí', baseText: 'Text', - highlightedText: 'Zvýrazněný text' + highlightedText: 'Zvýrazněný text', + arrow: 'Šipka' }, predefinedColors: predefinedColors, diff --git a/frontend/src/views/poster/canvas.js b/frontend/src/views/poster/canvas.js index b7bef17c63fe7a3c077323aac64b62f077c0c53f..64ff1ff2b26a564345eae837c6d60b0afd853af6 100644 --- a/frontend/src/views/poster/canvas.js +++ b/frontend/src/views/poster/canvas.js @@ -11,6 +11,11 @@ let socialMediaTextObject = null let backgroundRect = null let bottomBackgroundRect = null let personNameText = null +let mainText = null +let firstColumn = null +let secondColumn = null + +let arrow = null let contractedByTextbox = null @@ -27,16 +32,38 @@ const redraw = async (canvas, options) => { socialMediaTextObject, personNameText, contractedByTextbox, + arrow, + mainText, + firstColumn, + secondColumn ], canvas ) const leftMarginText = 300 - const bottomMarginText = 225 - const bottomFontSize = 100 + const leftMarginPersonText = 410 + const bottomMarginText = 200 + const bottomFontSize = 90 + + const topMarginText = 150 + + const mainTextMarginBottom = 1180 + const mainTextSize = 300 const nameTextSize = 100 + const arrowWidth = Math.ceil(canvas.width * 0.0235) + const arrowHeight = Math.ceil(canvas.width * 0.0275) + const arrowThickness = Math.ceil(canvas.width * 0.01) + const arrowMarginLeft = 300 + const arrowMarginBottom = Math.ceil(canvas.height * 0.257) + + const columnsMarginTop = 600 + const columnsMarginBetween = 100 + const columnsMaxWidth = 1500 + const columnTextSize = 75 + const columnLineHeight = 1 + const contractedByTextSize = Math.ceil(canvas.height * 0.01) const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9) const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03) @@ -167,6 +194,43 @@ const redraw = async (canvas, options) => { /* END Bottom background render */ + /* BEGIN Arrow render */ + + arrow = new fabric.Polygon( + [ + {x: 0, y: 0}, + {x: arrowThickness, y: 0}, + { + x: arrowWidth, + y: Math.ceil(arrowHeight) / 2 + }, + { + x: arrowThickness, + y: arrowHeight + }, + {x: 0, y: arrowHeight}, + { + x: arrowWidth - arrowThickness, + y: Math.ceil(arrowHeight) / 2 + }, + {x: 0, y: 0} + ], + { + top: ( + canvas.height + - arrowMarginBottom + ), + left: arrowMarginLeft, + fill: "#fec900", + selectable: false, + zIndex: 40 + } + ) + + canvas.add(arrow) + + /* END Arrow render */ + /* BEGIN Name / position text render */ if (options.personName !== null) { @@ -189,11 +253,11 @@ const redraw = async (canvas, options) => { personNameText = new fabric.Text( nameText, { - left: leftMarginText, + left: leftMarginPersonText, top: ( canvas.height - bottomBackgroundRect.height - + bottomMarginText + + topMarginText ), fontFamily: 'Roboto Condensed', fontSize: nameTextSize, @@ -209,10 +273,76 @@ const redraw = async (canvas, options) => { /* END Name / position text render */ + /* BEGIN Main text render */ + + if (options.mainText !== null) { + mainText = new fabric.Text( + options.mainText, + { + left: leftMarginText, + top: ( + canvas.height + - mainTextMarginBottom + ), + fontFamily: 'Bebas Neue', + fontSize: mainTextSize, + fill: "#000", + selectable: false, + zIndex: 40 + } + ) + + canvas.add(mainText) + } + + /* END Main text render */ + /* BEGIN Column text render */ if (options.firstColumn !== null) { + firstColumn = new fabric.Textbox( + options.firstColumn, + { + left: leftMarginText, + top: ( + canvas.height + - bottomBackgroundRect.height + + columnsMarginTop + ), + width: columnsMaxWidth, + fontFamily: 'Roboto Condensed', + fontSize: columnTextSize, + lineHeight: columnLineHeight, + fill: "#000", + selectable: false, + zIndex: 40 + } + ) + + canvas.add(firstColumn) + } + + if (options.secondColumn !== null) { + secondColumn = new fabric.Textbox( + options.secondColumn, + { + left: leftMarginText + columnsMarginBetween + columnsMaxWidth, + top: ( + canvas.height + - bottomBackgroundRect.height + + columnsMarginTop + ), + width: columnsMaxWidth, + fontFamily: 'Roboto Condensed', + fontSize: columnTextSize, + lineHeight: columnLineHeight, + fill: "#000", + selectable: false, + zIndex: 40 + } + ) + canvas.add(secondColumn) } /* END Column text render */ diff --git a/server/server/templates/index.html b/server/server/templates/index.html index b895de36b757c249aedee5e42bf22f5ab9f72e15..65fe09896a07dae74cf05591b99602fe61aa210a 100644 --- a/server/server/templates/index.html +++ b/server/server/templates/index.html @@ -19,6 +19,6 @@ </head> <body> <div id="app"></div> - + </body> </html>