Skip to content
Snippets Groups Projects
Commit 8bb4084d authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

finish third template

parent 592a5ff3
No related branches found
No related tags found
No related merge requests found
import { createRouter, createWebHistory } from 'vue-router'
import TEMPLATES from '../templates'
import defaultFavicon from '../assets/favicon.png'
let routes = [];
for (let [identifier, templateData] of Object.entries(TEMPLATES)) {
......@@ -30,7 +32,12 @@ router.beforeEach(
// BEGIN Favicon
const link = document.createElement('link')
link.rel = 'icon'
if (to.meta.favicon !== undefined) {
link.href = to.meta.favicon
} else {
link.href = defaultFavicon
}
document.head.appendChild(link)
// END Favicon
......
import basicPhotoBannerImage from './assets/previews/basic_photo_banner.png'
import urgentTextBannerImage from './assets/previews/urgent_text_banner.png'
import favicon from './assets/favicon.png'
import textBannerImage from './assets/previews/urgent_text_banner.png'
const TEMPLATES = {
basic_photo_banner: {
......@@ -11,7 +10,6 @@ const TEMPLATES = {
component: () => import('./views/basic_photo_banner/BasicPhotoBanner.vue'),
meta: {
title: 'Základní banner s fotkou',
favicon: favicon
}
},
urgent_text_banner: {
......@@ -21,9 +19,17 @@ const TEMPLATES = {
component: () => import('./views/urgent_text_banner/UrgentTextBanner.vue'),
meta: {
title: 'Urgentní banner pouze s textem',
favicon: favicon
}
},
text_banner: {
name: 'Banner pouze s textem',
image: textBannerImage,
path: '/text-banner',
component: () => import('./views/text_banner/TextBanner.vue'),
meta: {
title: 'Banner pouze s textem',
}
},
}
export default TEMPLATES
......@@ -27,6 +27,7 @@ export default {
colors: {
background: COLORS.black,
highlight: COLORS.yellow1,
arrow: COLORS.yellow1,
baseText: COLORS.white,
highlightedText: COLORS.black
}
......@@ -39,6 +40,7 @@ export default {
colorLabels: {
background: 'Pozadí',
highlight: 'Zvýraznění',
arrow: 'Barva šipky',
baseText: 'Běžný text',
highlightedText: 'Zvýrazněný text'
},
......@@ -87,7 +89,7 @@ export default {
<header>
<Navbar
headerName="Generátor grafiky"
:defaultTemplate="TEMPLATES.urgent_text_banner"
:defaultTemplate="TEMPLATES.text_banner"
></Navbar>
</header>
<main>
......
......@@ -4,8 +4,7 @@ import { clearObjects, sortObjects, transformHighlightedText } from '../../compo
let textBox = null
let backgroundRect = null
let crossRect1 = null
let crossRect2 = null
let arrow = null
let logoImage = null
......@@ -14,23 +13,27 @@ const redraw = async (canvas, options) => {
[
textBox,
backgroundRect,
crossRect1,
crossRect2
arrow
],
canvas
)
const crossSideOffset = Math.ceil(canvas.width * 0.237)
const crossThickness = Math.ceil(canvas.height * 0.4)
const crossSkew = 38
const logoWidth = Math.ceil(canvas.width * 0.2)
const logoWidth = Math.ceil(canvas.width * 0.23)
const logoSideMargin = Math.ceil(canvas.width * 0.07)
const logoTopMargin = Math.ceil(canvas.width * 0.17)
const textBoxWidth = Math.ceil(canvas.width * 0.8)
const textBoxMarginSide = Math.ceil(canvas.width * 0.13)
const textBoxMarginTop = logoTopMargin + Math.ceil(canvas.height * 0.15)
const textSize = Math.ceil(canvas.height * 0.07)
const textHeightLimit = Math.ceil(textSize * 10)
const textLineHeight = 0.98 // Hacky fix for highlight seam
const textBoxWidth = Math.ceil(canvas.width * 0.5)
const textSize = Math.ceil(canvas.height * 0.0725)
const textHeightLimit = Math.ceil(textSize * 7)
const textLineHeight = 1
const arrowWidth = Math.ceil(canvas.width * 0.047)
const arrowHeight = Math.ceil(canvas.width * 0.055)
const arrowThickness = Math.ceil(canvas.width * 0.019)
const arrowMarginLeft = Math.ceil(canvas.width * 0.065)
const arrowMarginTop = Math.ceil(canvas.height * 0.017)
canvas.preserveObjectStacking = true
......@@ -49,32 +52,6 @@ const redraw = async (canvas, options) => {
canvas.add(backgroundRect)
crossRect1 = new fabric.Rect({
width: crossThickness,
height: canvas.height,
top: 0,
left: -crossSideOffset,
skewX: crossSkew,
fill: options.colors.cross.value,
selectable: false,
zIndex: 1
})
canvas.add(crossRect1)
crossRect2 = new fabric.Rect({
width: crossThickness,
height: canvas.height,
top: 0,
left: -crossSideOffset,
skewX: -crossSkew,
fill: options.colors.cross.value,
selectable: false,
zIndex: 1
})
canvas.add(crossRect2)
/* END Background render */
......@@ -103,7 +80,7 @@ const redraw = async (canvas, options) => {
- logoWidth
- logoSideMargin
),
top: logoSideMargin,
top: logoTopMargin,
zIndex: 11,
})
......@@ -113,19 +90,27 @@ const redraw = async (canvas, options) => {
/* END Logo render */
if (options.text !== null) {
/* BEGIN Text render */
if (options.text !== null) {
textBox = new fabric.Textbox(
const highlightedData = transformHighlightedText(
options.text,
options.colors.highlight.value,
options.colors.highlightedText.value
)
textBox = new fabric.Textbox(
highlightedData.text,
{
width: textBoxWidth,
left: (canvas.width - textBoxWidth) / 2,
textAlign: 'center',
left: textBoxMarginSide,
top: textBoxMarginTop,
textAlign: 'left',
fontFamily: 'Bebas Neue',
fontSize: textSize,
lineHeight: textLineHeight,
fill: options.colors.text.value,
fill: options.colors.baseText.value,
styles: highlightedData.styles,
selectable: false,
zIndex: 10
}
......@@ -138,10 +123,46 @@ const redraw = async (canvas, options) => {
canvas.renderAll()
}
textBox.top = (canvas.height - textBox.height) / 2
/* END Text 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: (
textBox.top
+ arrowMarginTop
),
left: arrowMarginLeft,
fill: options.colors.arrow.value,
selectable: false,
zIndex: 10
}
)
/* END Text render */
canvas.add(arrow)
/* END Arrow render */
}
sortObjects(canvas)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment