Skip to content
Snippets Groups Projects
Verified Commit 52174f84 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

WIP - poster template

parent 8987c8e9
No related branches found
No related tags found
No related merge requests found
Pipeline #17667 passed
......@@ -77,6 +77,7 @@ export default {
</div>
<div class="object-contain h-[115vw] md:h-[unset]">
<canvas
id="canvas"
ref="canvas"
class="w-full border border-gray-300 drop-shadow-md duration-150"
:class="{'blur': redrawing}"
......
......@@ -48,11 +48,8 @@ export default {
base: {
name: 'Základní barvy',
colors: {
background: COLORS.black,
highlight: COLORS.yellow1,
arrow: COLORS.yellow1,
baseText: COLORS.white,
highlightedText: COLORS.black,
background: COLORS.white,
baseText: COLORS.black,
contractedByText: COLORS.gray1
}
}
......@@ -76,8 +73,6 @@ export default {
colorLabels: {
background: 'Pozadí',
highlight: 'Zvýraznění',
arrow: 'Šipka',
baseText: 'Text',
highlightedText: 'Zvýrazněný text'
},
......@@ -108,7 +103,7 @@ export default {
await this.$refs.canvas.redraw(canvasProperties)
delete canvasProperties.colors
// delete canvasProperties.colors
setCanvasStorage(canvasProperties)
}
},
......
......@@ -6,15 +6,66 @@ import overlayURL from '../../assets/template/poster/overlay.png'
let mainImage = null
let mainImageSource = null
let overlayImage = null
let pointerDownEventAssigned = false
let socialMediaTextObject = null
let backgroundRect = null
let bottomBackgroundRect = null
let personNameText = null
let contractedByTextbox = null
const removeDownEventListener = () => {
document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerdown", canvasPointerDownEvent)
}
let upEventFunction = null
let canvasPointerDownEvent = null
const redraw = async (canvas, options) => {
clearObjects(
[],
[
socialMediaTextObject,
personNameText,
contractedByTextbox,
],
canvas
)
const leftMarginText = 300
const bottomMarginText = 225
const bottomFontSize = 100
const nameTextSize = 100
const contractedByTextSize = Math.ceil(canvas.height * 0.01)
const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9)
const contractedByTextSidesMargin = Math.ceil(canvas.width * 0.03)
document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerup", upEventFunction)
document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointerout", upEventFunction)
document.getElementsByClassName("upper-canvas")[0].removeEventListener("pointercancel", upEventFunction
)
canvas.preserveObjectStacking = true
/* BEGIN Background render */
if (backgroundRect === null) {
backgroundRect = new fabric.Rect({
width: canvas.width * 1.1,
height: canvas.height * 1.1,
top: -20, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
left: -20,
fill: options.colors.background.value,
selectable: false,
zIndex: 0
})
canvas.add(backgroundRect)
}
/* END Background render */
/* BEGIN Main image render */
if (
......@@ -54,11 +105,17 @@ const redraw = async (canvas, options) => {
canvas.add(mainImage)
mainImageSource = options.mainImage.src
// canvas.centerObject(mainImage)
removeDownEventListener()
pointerDownEventAssigned = false
} else if (
mainImage !== null
&& options.mainImage === null
) {
canvas.remove(mainImage)
removeDownEventListener()
pointerDownEventAssigned = false
}
/* END Main image render */
......@@ -92,7 +149,190 @@ const redraw = async (canvas, options) => {
/* END Overlay render */
/* BEGIN Bottom background render */
if (bottomBackgroundRect === null) {
bottomBackgroundRect = new fabric.Rect({
width: canvas.width * 1.1,
height: 1458,
top: 3620, // FIXME: Why???? Fabric.js, what are you trying to tell me?!
left: -20,
fill: options.colors.background.value,
zIndex: 30,
selectable: false,
})
canvas.add(bottomBackgroundRect)
}
/* END Bottom background render */
/* BEGIN Name / position text render */
if (options.personName !== null) {
let styles = {
0: {}
}
for (let position = 0; position < options.personName.length; position++) {
styles[0][position] = {
fontWeight: 'bold'
}
}
let nameText = options.personName
if (options.personPosition !== null) {
nameText += ` | ${options.personPosition}`
}
personNameText = new fabric.Text(
nameText,
{
left: leftMarginText,
top: (
canvas.height
- bottomBackgroundRect.height
+ bottomMarginText
),
fontFamily: 'Roboto Condensed',
fontSize: nameTextSize,
styles: styles,
fill: "#000",
selectable: false,
zIndex: 40
}
)
canvas.add(personNameText)
}
/* END Name / position text render */
/* BEGIN Column text render */
if (options.firstColumn !== null) {
}
/* END Column text render */
/* BEGIN Bottom text render */
if (
options.socialMedia1
|| options.socialMedia2
|| options.socialMedia3
) {
let socialMediaText = `${
(options.socialMedia1 !== null) ?
options.socialMedia1 + " " :
""
}${
(options.socialMedia2 !== null) ?
options.socialMedia2 + " " :
""
}${
(options.socialMedia3 !== null) ?
options.socialMedia3 :
""
}`
socialMediaTextObject = new fabric.Text(
socialMediaText,
{
left: leftMarginText,
top: (
canvas.height
- bottomMarginText
- bottomFontSize
),
fontFamily: 'Roboto Condensed',
fontSize: bottomFontSize,
fill: "#000",
selectable: false,
zIndex: 40
}
)
canvas.add(socialMediaTextObject)
}
/* END Bottom text render */
/* BEGIN Contracted by render */
if (options.contractedBy !== null) {
contractedByTextbox = new fabric.Textbox(
options.contractedBy,
{
left: canvas.width - contractedByTextMaxWidth - contractedByTextSidesMargin,
top: (
canvas.height
- contractedByTextSidesMargin
- contractedByTextSize
),
width: contractedByTextMaxWidth,
fontFamily: 'Roboto Condensed',
fontSize: contractedByTextSize,
textAlign: 'right',
fill: "#505050",
selectable: false,
zIndex: 40
}
)
checkTextBoxHeight(contractedByTextbox, 1)
canvas.add(contractedByTextbox)
}
/* END Contracted by render */
sortObjects(canvas)
canvasPointerDownEvent = (event) => {
let activeObject = canvas.getActiveObject()
if (activeObject === null) {
return
}
// if (activeObject._element.src == mainImage._element.src) {
// return
// }
canvas.remove(overlayImage)
overlayImage = null
}
if (!pointerDownEventAssigned) {
document.getElementsByClassName("upper-canvas")[0].addEventListener(
"pointerdown",
canvasPointerDownEvent
)
pointerDownEventAssigned = true
}
upEventFunction = (event) => {
redraw(canvas, options)
}
document.getElementsByClassName("upper-canvas")[0].addEventListener(
"pointerup",
upEventFunction
)
document.getElementsByClassName("upper-canvas")[0].addEventListener(
"pointerout",
upEventFunction
)
document.getElementsByClassName("upper-canvas")[0].addEventListener(
"pointercancel",
upEventFunction
)
}
export default redraw
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment