72 lines
3.2 KiB
HTML
72 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru<head>
|
|
<meta charset=" utf-8">
|
|
<title> Трансформация и анимация</title>
|
|
<link rel="stylesheet" href="CSS/style.css">
|
|
<script src="JavaScript/d3.v7.min.js"> </script>
|
|
<script src="JavaScript/main.js"></script>
|
|
<script src="JavaScript/image.js"></script>
|
|
<script src="JavaScript/path.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<form id="setting">
|
|
<p class="path-anim-related-inverse">Координаты рисунка<br>
|
|
<label for="cx">x: </label>
|
|
<input type="number" id="cx" value="300" max="600" min="0">
|
|
<label class="anim-related" for="cx_finish">до: </label>
|
|
<input class="anim-related" type="number" id="cx_finish" value="300" max="600" min="0">
|
|
<br>
|
|
<label for="cy">y: </label>
|
|
<input class="anim-related" type="number" id="cy" value="300" max="600" min="0">
|
|
<label class="anim-related" for="cy_finish">до: </label>
|
|
<input type="number" id="cy_finish" value="300" max="600" min="0">
|
|
</p>
|
|
<p class="path-anim-related">Пути перемещения<br>
|
|
<select id="pathSelect">
|
|
<option value="0">Буквой "Г"</option>
|
|
<option value="1">По кругу</option>
|
|
|
|
</select>
|
|
</p>
|
|
<p class="path-anim-related-inverse" >Масштаб<br>
|
|
<label for="sx">по x: </label>
|
|
<input type="number" id="sx" value="1" max="100" min="-100">
|
|
<label class="anim-related" for="sx_finish">до: </label>
|
|
<input class="anim-related" type="number" id="sx_finish" value="1.5" max="100" min="-100">
|
|
<br>
|
|
<label for="sy">по y: </label>
|
|
<input type="number" id="sy" value="1" max="100" min="-100">
|
|
<label class="anim-related" for="sy_finish">до: </label>
|
|
<input class="anim-related" type="number" id="sy_finish" value="1.5" max="100" min="-100">
|
|
</p>
|
|
<p class="path-anim-related-inverse">Поворот<br>
|
|
<label for="r">x: </label>
|
|
<input type="number" id="r" value="0" max="360" min="-360">
|
|
<label class="anim-related" for="r_finish">до: </label>
|
|
<input class="anim-related" type="number" id="r_finish" value="360" max="360" min="-360">
|
|
</p>
|
|
<p>
|
|
<input type="button" class="anim-related-inverse" id="applyButton" value="Нарисовать">
|
|
<input type="button" id="clearButton" value="Отчистить">
|
|
</p>
|
|
<p>
|
|
Включить Анимацию? <input type="checkbox" id="enableAnimCheckbox"><br>
|
|
<label class="anim-related" for="animAlongPathCheckbox"> Перемещение вдоль пути? </label><input type="checkbox" id="animAlongPathCheckbox" class="anim-related">
|
|
<select class="anim-related" id="animTypeSelect">
|
|
<option value="0">linear</option>
|
|
<option value="1">elastic</option>
|
|
<option value="2">bounce</option>
|
|
</select>
|
|
<br>
|
|
<input class="anim-related" type="button" id="startAnimButton" value="Анимировать">
|
|
</p>
|
|
|
|
</form>
|
|
|
|
|
|
<svg></svg>
|
|
|
|
</body>
|
|
|
|
</html> |