lab2 init

2026-03-12 23:02:05 +10:00
parent 64b82e3982
commit 0f62e7ea49
5 changed files with 133 additions and 0 deletions
--- a/labs/lab2/CSS/style.css
+++ b/labs/lab2/CSS/style.css
--- a/labs/lab2/JavaScript/d3.v7.min.js
+++ b/labs/lab2/JavaScript/d3.v7.min.js
--- a/labs/lab2/JavaScript/image.js
+++ b/labs/lab2/JavaScript/image.js
@@ -0,0 +1,33 @@
+// создаем изображение смайлик
+// рисуем его относительно точки (0, 0)
+function drawSmile(svg) {
+    let smile = svg.append("g")
+        .style("stroke", "brown")
+        .style("stroke-width", 2)
+        .style("fill", "brown");
+    //лицо
+    smile.append("circle") 
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", 50)
+        .style("fill", "yellow");
+    //левый глаз   
+    smile.append("circle") 
+        .attr("cx", -20)
+        .attr("cy", -10)
+        .attr("r", 5);
+    //правый глаз
+    smile.append("circle") 
+        .attr("cx", 20)
+        .attr("cy", -10)
+        .attr("r", 5);
+    // улыбка
+    let arc = d3.arc()
+       .innerRadius(35)
+       .outerRadius(35);    
+    smile.append("path")
+       .attr("d", arc({startAngle: Math.PI /3 * 2, endAngle: Math.PI/3 * 4}))
+       .style("stroke", "brown")
+
+     return smile  
+}   
--- a/labs/lab2/JavaScript/main.js
+++ b/labs/lab2/JavaScript/main.js
@@ -0,0 +1,47 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const width = 600;
+    const height = 600;
+    const svg = d3.select("svg")
+        .attr("width", width)
+        .attr("height", height);
+
+    // let pict1 = drawSmile(svg);
+    // pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);
+
+    // let pict = drawSmile(svg);
+    // pict.attr("transform", "translate(200, 200)");
+
+    setting.applyButton.addEventListener("click", () => {
+        draw(setting);
+    })
+    setting.clearButton.addEventListener("click", () => {
+        svg.selectAll('*').remove()
+    })
+
+    enableAnimCheckbox.addEventListener("change", () => {
+        let isChecked = enableAnimCheckbox.checked;
+        if (isChecked) {
+            startAnimButton.display = "inline-block";
+            animTypeSelect.display = "inline-block";
+            applyButton.display = "none";
+        }
+        else {
+            startAnimButton.display = "none";
+            animTypeSelect.display = "none";
+            applyButton.display ="inline-block";
+        }
+    })
+})
+
+
+const draw = (dataForm) => {
+    const svg = d3.select("svg")
+    let pict = drawSmile(svg);
+    pict.attr("transform", `
+        translate(${dataForm.cx.value},
+        ${dataForm.cy.value})
+        scale(${dataForm.sx.value},
+        ${dataForm.sy.value})
+        rotate(${dataForm.r.value})`);
+
+}
--- a/labs/lab2/index.html
+++ b/labs/lab2/index.html
@@ -0,0 +1,51 @@
+<!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>
+</head>
+
+<body>
+    <form id="setting">
+        <p>Координаты рисунка<br>
+            <label for="cx">x: </label>
+            <input type="number" id="cx" value="300" max="600" min="0"><br>
+            <label for="cy">y: </label>
+            <input type="number" id="cy" value="300" max="600" min="0">
+        </p>
+        <p>Масштаб<br>
+            <label for="sx">по x: </label>
+            <input type="number" id="sx" value="1" max="100" min="-100"><br>
+            <label for="sy">по y: </label>
+            <input type="number" id="sy" value="1" max="100" min="-100">
+        </p>
+        <p>Поворот<br>
+            <label for="r">x: </label>
+            <input type="number" id="r" value="0" max="360" min="-360"><br>
+        </p>
+        <p>
+            <input type="button" id="applyButton" value="Нарисовать">
+            <input type="button" id="clearButton" value="Отчистить">
+        </p>
+        <p>
+            Включить Анимацию? <input type="checkbox" id="enableAnimCheckbox"> 
+            <select id ="animTypeSelect">
+                <option value="0">linear</option>
+                <option value="1">elastic</option>
+                <option value="2">bounce</option>
+            </select>
+            <br>
+            <input type="button" id="startAnimButton" value="Анимировать">
+        </p>
+
+    </form>
+
+
+    <svg></svg>
+
+</body>
+
+</html>