116 lines
3.4 KiB
Vue
116 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import Sidebar from "./components/Sidebar.vue";
|
|
import SidebarBlock from "./components/SidebarBlock.vue";
|
|
import ButtonsBar from "./components/ButtonsBar.vue";
|
|
import Button from "./components/Button.vue";
|
|
import Page from "./components/Page.vue";
|
|
import Input from "./components/Input.vue";
|
|
import Canvas from "./components/Canvas.vue";
|
|
import { ref } from "vue";
|
|
import {
|
|
DEFAULT_HORIZONTAL_MARGIN,
|
|
DEFAULT_IMAGE_HEIGHT,
|
|
DEFAULT_IMAGE_WIDTH,
|
|
DEFAULT_VERTICAL_MARGIN,
|
|
DEFAULT_IMAGE_BACKGROUND_COLOR,
|
|
DEFAULT_VERTICAL_ROTATION,
|
|
} from "./const";
|
|
import { ButtonSize, InputType } from "./types";
|
|
|
|
const vMargin = ref(DEFAULT_VERTICAL_MARGIN);
|
|
const vRotation = ref(DEFAULT_VERTICAL_ROTATION);
|
|
const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN);
|
|
const hMargin2 = ref(DEFAULT_HORIZONTAL_MARGIN);
|
|
const imageWidth = ref(DEFAULT_IMAGE_WIDTH);
|
|
const imageHeight = ref(DEFAULT_IMAGE_HEIGHT);
|
|
const imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR);
|
|
|
|
const savePng = async () => {
|
|
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
|
|
|
if (canvas) {
|
|
const image = canvas.toDataURL("image/png");
|
|
const link = document.createElement("a");
|
|
link.setAttribute("download", "image.png");
|
|
link.href = image;
|
|
link.click();
|
|
}
|
|
};
|
|
|
|
const rotatePage = () => {
|
|
const tmp = imageHeight.value;
|
|
imageHeight.value = imageWidth.value;
|
|
imageWidth.value = tmp;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<Sidebar>
|
|
<SidebarBlock title="Фон">
|
|
<Input v-model="imageBackgroundColor" :type="InputType.Color">
|
|
Цвет {{ imageBackgroundColor }}
|
|
</Input>
|
|
</SidebarBlock>
|
|
<SidebarBlock title="Вертикальные линии">
|
|
<Input v-model="vMargin">Отступ, мм</Input>
|
|
<Input v-model="vRotation">Поворот, градусы</Input>
|
|
</SidebarBlock>
|
|
<SidebarBlock title="Горизонтальные линии">
|
|
<Input v-model="hMargin">Отступ, мм</Input>
|
|
<Input v-model="hMargin2">Дополнительный отступ, мм</Input>
|
|
</SidebarBlock>
|
|
<SidebarBlock title="Изображение">
|
|
<Input v-model="imageHeight">Высота, мм</Input>
|
|
<Input v-model="imageWidth">Ширина, мм</Input>
|
|
<ButtonsBar>
|
|
<Button :size="ButtonSize.Small" :click="() => {
|
|
imageWidth = 148;
|
|
imageHeight = 210;
|
|
}
|
|
">
|
|
A5
|
|
</Button>
|
|
<Button :size="ButtonSize.Small" :click="() => {
|
|
imageWidth = 210;
|
|
imageHeight = 297;
|
|
}
|
|
">
|
|
A4
|
|
</Button>
|
|
<Button :size="ButtonSize.Small" :click="rotatePage">
|
|
Повернуть
|
|
</Button>
|
|
</ButtonsBar>
|
|
<Button :click="savePng">Сохранить как png</Button>
|
|
</SidebarBlock>
|
|
</Sidebar>
|
|
<Page>
|
|
<Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
|
|
:imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
|
|
</Page>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#app,
|
|
body,
|
|
html {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
font-family: MPLUS1p, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: aqua;
|
|
}
|
|
</style>
|