robonen/canvas-3d
1
0
Fork 0
mirror of https://github.com/robonen/canvas-3d.git synced 2026-03-20 10:54:39 +00:00
Code Activity

feat(components): figure page

Browse Source
This commit is contained in:
Andrew Robonen
2022-11-10 04:57:11 +07:00
parent f8a03bf7f7
commit 54cb28c0cb
12 changed files with 142 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/catalog.vue
View File

@@ -1,7 +0,0 @@
<template>
Test
</template>
<style scoped>
</style>

42
src/pages/figure.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
const axes = ['x', 'y', 'z'];
const projections = [
'Без проекции',
'Изометрическая',
'Диметрическая',
'Триметрическая',
'Одноточечная перспективная',
'Двухточечная перспективная',
];
const activeProjection = ref<number>(0);
</script>
<template>
<div class="container">
<Accordion title="Перемещение">
<FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
</Accordion>
<Accordion title="Вращение">
<FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
</Accordion>
<Accordion title="Масштабирование">
<FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1"
:defaultValue="1"/>
</Accordion>
<Accordion title="Проекции">
<GridContainer>
<GridElement v-for="(projection, i) in projections" :is-active="activeProjection === i" :key="projection"
:title="projection" @click="activeProjection = i"/>
</GridContainer>
</Accordion>
</div>
</template>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
</style>

24
src/pages/index.vue
View File

@@ -1,25 +1,13 @@
<script setup lang="ts">
const axes = ['x', 'y', 'z'];
const figures = ['Тетраэдр', 'Гексаэдр', 'Октаэдр', 'Додекаэдр', 'Икосаэдр'];
</script>
<template>
<div class="container">
<Accordion title="Перемещение">
<FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
</Accordion>
<Accordion title="Вращение">
<FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
</Accordion>
<Accordion title="Масштабирование">
<FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1" :defaultValue="1"/>
</Accordion>
</div>
<h1>Выберете фигуру</h1>
<GridContainer>
<GridElement v-for="figure in figures" :key="figure" :title="figure"/>
</GridContainer>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
row-gap: 16px;
}
<style scoped lang="scss">
</style>