История изменений
Исправление MOPKOBKA, (текущая версия) :
Vue, а когда добавится реальная работа реактивность даст свои плоды и количество строк, сложность заметно уменьшатся. Babylon.js тоже довольно прост, если нужно простое 3д, ну а сложный интерфейс без реактивности это трудно и нудно.
<template>
<v-stage :config="{width:240,height:240}">
<v-layer>
<v-rect :config="{x:60,y:100,width:100,height:100,fill:'lightblue'}"/>
<v-line :config="{points:[40,100,110,40,180,100],closed:true,fill:'lightblue'}"/>
<v-ellipse :config="{x:205,y:35,width:50,height:50,fill:'orange'}"/>
<v-arc v-for="i in 25" :key="i" :config="{x:i*10+40,y:250,innerRadius:72,outerRadius:70,angle:-55,fill:'green',clockwise:true,scaleX:-1}"/>
</v-layer>
</v-stage>
</template>
<style>
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
Исправление MOPKOBKA, :
Vue, а когда добавится реальная работа реактивность даст свои плоды и количество строк, сложность заметно уменьшатся. Babylon.js тоже довольно прост, если говорим про 3д отрисовку, ну а сложный интерфейс без реактивности это трудно и нудно.
<template>
<v-stage :config="{width:240,height:240}">
<v-layer>
<v-rect :config="{x:60,y:100,width:100,height:100,fill:'lightblue'}"/>
<v-line :config="{points:[40,100,110,40,180,100],closed:true,fill:'lightblue'}"/>
<v-ellipse :config="{x:205,y:35,width:50,height:50,fill:'orange'}"/>
<v-arc v-for="i in 25" :key="i" :config="{x:i*10+40,y:250,innerRadius:72,outerRadius:70,angle:-55,fill:'green',clockwise:true,scaleX:-1}"/>
</v-layer>
</v-stage>
</template>
<style>
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
Исправление MOPKOBKA, :
Vue, а когда добавится реальная работа реактивность даст свои плоды и количество строк, сложность заметно уменьшатся.
<template>
<v-stage :config="{width:240,height:240}">
<v-layer>
<v-rect :config="{x:60,y:100,width:100,height:100,fill:'lightblue'}"/>
<v-line :config="{points:[40,100,110,40,180,100],closed:true,fill:'lightblue'}"/>
<v-ellipse :config="{x:205,y:35,width:50,height:50,fill:'orange'}"/>
<v-arc v-for="i in 25" :key="i" :config="{x:i*10+40,y:250,innerRadius:72,outerRadius:70,angle:-55,fill:'green',clockwise:true,scaleX:-1}"/>
</v-layer>
</v-stage>
</template>
<style>
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
Исправление MOPKOBKA, :
Vue
<template>
<v-stage :config="{width:240,height:240}">
<v-layer>
<v-rect :config="{x:60,y:100,width:100,height:100,fill:'lightblue'}"/>
<v-line :config="{points:[40,100,110,40,180,100],closed:true,fill:'lightblue'}"/>
<v-ellipse :config="{x:205,y:35,width:50,height:50,fill:'orange'}"/>
<v-arc v-for="i in 25" :key="i" :config="{x:i*10+40,y:250,innerRadius:72,outerRadius:70,angle:-55,fill:'green',clockwise:true,scaleX:-1}"/>
</v-layer>
</v-stage>
</template>
<style>
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
Исправление MOPKOBKA, :
Vue
<template>
<div>
<v-stage
ref="stage"
:config="{width:240,height:240}"
>
<v-layer>
<v-rect :config="{x:60,y:100,width:100,height:100,fill:'lightblue'}"/>
<v-line :config="{points:[40,100,110,40,180,100],closed:true,fill:'lightblue'}"/>
<v-ellipse :config="{x:205,y:35,width:50,height:50,fill:'orange'}"/>
<v-arc v-for="i in 25" :key="i" :config="{x:i*10+40,y:250,innerRadius:72,outerRadius:70,angle:-55,fill:'green',clockwise:true,scaleX:-1}"/>
</v-layer>
</v-stage>
</div>
</template>
Исходная версия MOPKOBKA, :
Vue
<template>
<div>
<v-stage
ref="stage"
:config="{width:240,height:240}"
>
<v-layer>
<v-rect :config="{x:60,y:100,width:100,height:100,fill:'lightblue'}"/>
<v-line :config="{points:[40,100,110,40,180,100],closed:true,fill:'lightblue'}"/>
<v-ellipse :config="{x:205,y:35,width:50,height:50,fill:'orange'}"/>
<v-arc v-for="i in 25" :key="i" :config="{x:i*10+40,y:250,innerRadius:72,outerRadius:70,angle:-55,fill:'green',clockwise:true,scaleX:-1}"/>
</v-layer>
</v-stage>
</div>
</template>