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

Merge branch 'tonys' into 'v2'

Merge facebook survey template

See merge request tomas.hozman/graphics-generator!1
parents 95eb62aa 5de0b27e
No related branches found
No related tags found
1 merge request!1Release facebook survey template
Graphics Generator v2/src/assets/previews/facebook_survey.png

824 KiB

......@@ -3,6 +3,7 @@ import urgentTextBannerImage from './assets/previews/urgent_text_banner.png'
import textBannerImage from './assets/previews/text_banner.png'
import newspaperQuoteBottomImage from './assets/previews/newspaper_quote_bottom.png'
import newspaperQuoteMiddleImage from './assets/previews/newspaper_quote_middle.png'
import facebookSurveyImage from './assets/previews/facebook_survey.png'
const TEMPLATES = {
basic_photo_banner: {
......@@ -49,6 +50,15 @@ const TEMPLATES = {
meta: {
title: 'Novinová citace - pouze text',
}
},
facebook_survey: {
name: 'Facebook anketa',
image: facebookSurveyImage,
path: '/facebook_survey',
component: () => import('./views/facebook_survey/FacebookSurvey.vue'),
meta: {
title: 'Facebook anketa',
}
}
}
......
<script setup>
import { watch, ref } from 'vue'
import COLORS from '../../colors'
import TEMPLATES from '../../templates'
import { generateDefaultLogos } from '../../logos'
import { loadFonts } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue'
import redraw from './canvas'
import Navbar from '../../components/Navbar.vue'
import MainContainer from '../../components/MainContainer.vue'
import ImageInput from '../../components/inputs/ImageInput.vue'
import LongTextInput from '../../components/inputs/text/LongTextInput.vue'
import EmojiInput from '../../components/inputs/EmojiInput.vue'
import InputSeparator from '../../components/inputs/InputSeparator.vue'
import MultipleColorPicker from '../../components/inputs/colors/MultipleColorPicker.vue'
import ShortTextInput from '../../components/inputs/text/ShortTextInput.vue'
</script>
<script>
loadFonts([
'12px Bebas Neue',
'12px Roboto Condensed',
'bold 12px Roboto Condensed'
])
export default {
data () {
const predefinedColors = {
base: {
name: 'Základní barvy',
colors: {
background: COLORS.black,
highlight: COLORS.yellow1,
arrow: COLORS.yellow1,
baseText: COLORS.white,
highlightedText: COLORS.black
}
},
black_on_yellow: {
name: 'Černá na žluté',
colors: {
background: COLORS.yellow1,
highlight: COLORS.black,
arrow: COLORS.black,
baseText: COLORS.black,
highlightedText: COLORS.white
}
}
}
return {
mainImage: null,
mainText: null,
logoImage: null,
firstEmojiImage: null,
firstEmojiText: null,
secondEmojiImage: null,
secondEmojiText: null,
colorLabels: {
background: 'Pozadí',
highlight: 'Zvýraznění',
arrow: 'Šipka',
baseText: 'Text',
highlightedText: 'Zvýrazněný text'
},
predefinedColors: predefinedColors,
colors: predefinedColors.base.colors,
predefinedLogoImages: generateDefaultLogos('defaultLight')
}
},
mounted () {
this.$watch(
vm => [
vm.mainImage,
vm.mainText,
vm.logoImage,
vm.colors,
vm.firstEmojiImage,
vm.firstEmojiText,
vm.secondEmojiImage,
vm.secondEmojiText,
],
async (value) => {
await this.$refs.canvas.redraw(
{
mainImage: this.mainImage,
mainText: this.mainText,
logoImage: this.logoImage,
colors: this.colors,
firstEmojiImage: this.firstEmojiImage,
secondEmojiImage: this.secondEmojiImage,
firstEmojiText: this.firstEmojiText,
secondEmojiText: this.secondEmojiText,
}
);
},
{
immediate: true,
deep: true
}
)
}
}
</script>
<template>
<header>
<Navbar
headerName="Generátor grafiky"
:defaultTemplate="TEMPLATES.basic_photo_banner"
></Navbar>
</header>
<main>
<MainContainer>
<template v-slot:left>
<Canvas
ref="canvas"
:redrawFunction="redraw"
width="2000"
height="2000"
/>
</template>
<template v-slot:right>
<ImageInput
name="Obrázek"
v-bind:important="true"
v-model="mainImage"
zIndex="10"
/>
<LongTextInput
name="Hlavní text"
v-bind:important="true"
v-model="mainText"
zIndex="9"
/>
<EmojiInput
name="Volba 1"
v-bind:important="true"
v-model="firstEmojiImage"
zIndex="10"
/>
<ShortTextInput
name="Volba 1 text"
v-bind:important="true"
v-model="firstEmojiText"
zIndex="9"
/>
<EmojiInput
name="Volba 2"
v-bind:important="true"
v-model="secondEmojiImage"
zIndex="9"
/>
<ShortTextInput
name="Volba 2 text"
v-bind:important="true"
v-model="secondEmojiText"
zIndex="8"
/>
<InputSeparator />
<ImageInput
name="Obrázek loga"
v-bind:important="false"
v-model="logoImage"
:predefinedImages="predefinedLogoImages"
:mustSelectPredefinedImage="true"
zIndex="6"
/>
<MultipleColorPicker
name="Barvy"
v-bind:important="false"
v-model="colors"
:colorLabels="colorLabels"
:predefinedColors="predefinedColors"
:defaultPredefinedColors="predefinedColors.base"
zIndex="5"
></MultipleColorPicker>
</template>
</MainContainer>
</main>
</template>
<style>
@import "vue-select/dist/vue-select.css";
</style>
import { fabric } from 'fabric'
import { clearObjects, sortObjects, transformHighlightedText } from '../../components/canvas/utils'
let mainTextBox = null
let mainTextBoxBackground = null
let mainImage = null
let logoImage = null
let firstEmojiImage = null
let secondEmojiImage = null
let firstEmojiText = null
let secondEmojiText = null
const redraw = async (canvas, options) => {
clearObjects(
[
mainTextBox,
mainTextBoxBackground,
firstEmojiImage,
firstEmojiText,
secondEmojiImage,
secondEmojiText,
],
canvas
)
canvas.preserveObjectStacking = true
const textMarginLeft = Math.ceil(canvas.width * 0.14)
const textMarginRight = Math.ceil(canvas.width * 0.14)
let mainTextMarginBottom = Math.ceil(canvas.height * 0.06)
const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14)
const mainTextSize = Math.ceil(canvas.height * 0.0725)
const mainTextHeightLimit = Math.ceil(mainTextSize * 3.3)
const mainTextLineHeight = 0.98 // Hacky fix for highlight seam
const EmojiImageHeight = Math.ceil(canvas.height * 0.100)
const firstEmojiImageMarginSide = Math.ceil(canvas.width * 0.25)
const firstEmojiImageMarginTop = 50
const secondEmojiImageMarginSide = Math.ceil(canvas.width * 0.65)
const secondEmojiImageMarginTop = 50
const logoWidth = Math.ceil(canvas.width * 0.2)
const logoSideMargin = Math.ceil(canvas.width * 0.07)
if (options.mainText !== null) {
/* BEGIN Name text render */
/* END Name text render */
/* BEGIN Main text render */
const highlightedData = transformHighlightedText(
options.mainText,
options.colors.highlight.value,
options.colors.highlightedText.value
)
mainTextBox = new fabric.Textbox(
highlightedData.text,
{
width: canvas.width - textMarginLeft - textMarginRight,
left: textMarginLeft,
textAlign: 'center',
fontFamily: 'Bebas Neue',
fontSize: mainTextSize,
lineHeight: mainTextLineHeight,
fill: options.colors.baseText.value,
styles: highlightedData.styles,
selectable: false,
zIndex: 10
}
)
canvas.add(mainTextBox)
while (mainTextBox.height > mainTextHeightLimit) {
mainTextBox.fontSize -= 4
canvas.renderAll()
}
mainTextBox.top = (
canvas.height
- mainTextBox.height
- mainTextMarginBottom
- 200
)
/* END Main text render */
/* BEGIN Arrow render */
/* END Arrow render */
/* BEGIN First Emoji render*/
if (options.firstEmojiImage !== null) {
firstEmojiImage = new Image()
const firstEmojiImageLoadPromise = new Promise(
resolve => {
firstEmojiImage.onload = () => {
resolve()
}
}
)
firstEmojiImage.src = options.firstEmojiImage.url
await firstEmojiImageLoadPromise
firstEmojiImage = new fabric.Image(firstEmojiImage, {
selectable: false,
zIndex: 10,
})
.scaleToHeight(EmojiImageHeight)
firstEmojiImage.set({
left: canvas.width/2 - 600,
top: mainTextBox.top + mainTextBox.height + firstEmojiImageMarginTop
})
canvas.add(firstEmojiImage)
}
if (options.firstEmojiText !== null && options.firstEmojiImage !== null) {
firstEmojiText = new fabric.Text(
options.firstEmojiText,
{
left: firstEmojiImage.left + 250,
top: (
mainTextBox.top + mainTextBox.height + firstEmojiImageMarginTop + EmojiImageHeight/4
),
fontFamily: 'Roboto Condensed',
fontSize: 100,
fontWeight: 600,
fill: options.colors.baseText.value,
selectable: false,
zIndex: 10
})
canvas.add(firstEmojiText)
}
/* BEGIN Second Emoji render*/
if (options.secondEmojiImage !== null) {
secondEmojiImage = new Image()
const secondEmojiImageLoadPromise = new Promise(
resolve => {
secondEmojiImage.onload = () => {
resolve()
}
}
)
secondEmojiImage.src = options.secondEmojiImage.url
await secondEmojiImageLoadPromise
secondEmojiImage = new fabric.Image(secondEmojiImage, {
selectable: false,
zIndex: 10
})
secondEmojiImage.scaleToHeight(EmojiImageHeight)
secondEmojiImage.set({
left: canvas.width/2 + 200,
top: mainTextBox.top + mainTextBox.height + firstEmojiImageMarginTop
})
canvas.add(secondEmojiImage)
}
if (options.secondEmojiText !== null && options.secondEmojiImage !== null) {
secondEmojiText = new fabric.Text(
options.secondEmojiText,
{
left: secondEmojiImage.left + 250,
top: (
mainTextBox.top + mainTextBox.height + secondEmojiImageMarginTop + EmojiImageHeight/4
),
fontFamily: 'Roboto Condensed',
fontSize: 100,
fontWeight: 600,
fill: options.colors.baseText.value,
selectable: false,
zIndex: 10
})
canvas.add(secondEmojiText)
}
/*END Second Emoji render*/
/* BEGIN Main text background render */
const backgroundHeight = (
canvas.height
- mainTextBox.top
+ mainTextBackgroundMarginTop
)
mainTextBoxBackground = new fabric.Rect(
{
width: canvas.width,
height: backgroundHeight,
left: 0,
top: mainTextBox.top - mainTextBackgroundMarginTop,
fill: new fabric.Gradient({
type: 'linear',
gradientUnits: 'pixels',
coords: {
x1: 0, y1: 0,
x2: 0, y2: backgroundHeight
},
colorStops: [
{
offset: 1,
color: options.colors.background.value
},
{
offset: 0.45,
color: options.colors.background.value
},
{
offset: 0,
color: `${options.colors.background.value}00`
}
]
}),
selectable: false,
zIndex: 9
}
)
canvas.add(mainTextBoxBackground)
/* END Main text background render */
}
/* BEGIN Logo render */
// A logo is provided, and it either hasn't been rendered yet or is a new one.
const createNewLogo = (
options.logoImage !== null
&& (
logoImage === null
|| (
options.logoImage !== null
&& options.logoImage !== logoImage._element
)
)
)
if (createNewLogo) {
canvas.remove(logoImage)
logoImage = new fabric.Image(options.logoImage, {})
logoImage.scaleToWidth(logoWidth)
logoImage.set({
left: (
canvas.width
- logoWidth
- logoSideMargin
),
top: logoSideMargin,
zIndex: 11,
})
canvas.add(logoImage)
}
/* END Logo render */
/* BEGIN Main image render */
if (
options.mainImage !== null
&& (
mainImage === null
|| options.mainImage.src !== mainImage._element.src
)
) {
if (mainImage !== null) {
canvas.remove(mainImage)
}
mainImage = new fabric.Image(
options.mainImage,
{
left: 0,
top: 0,
zIndex: 0
}
)
if (mainImage.width >= mainImage.height) {
mainImage.scaleToHeight(canvas.height)
} else {
mainImage.scaleToWidth(canvas.width)
}
canvas.add(mainImage)
// canvas.centerObject(mainImage)
} else if (
mainImage !== null
&& options.mainImage === null
) {
canvas.remove(mainImage)
}
/* END Main image render */
sortObjects(canvas)
}
export default redraw
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment