看看chatgpt怎麼說

ejsoon · 帖子由 **ejsoon** » 2025年 2月 14日 23:02

代码：全选

你可以使用下面的 HTML + JavaScript 程式來實現所描述的功能。此程式包括必要的 HTML 元素、SVG 操作邏輯、動畫插入等功能：

### HTML 部分：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Animation Linkage</title>
  <style>
    #imgPreview {
      display: block;
      margin: 20px auto;
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <h1>SVG Animation Linkage</h1>
  <input type="file" id="ejtilelinkagefilestart" accept=".svg">
  <input type="file" id="ejtilelinkagefileend" accept=".svg">
  <button id="makelinkageanimate">生成动画</button>
  <button id="etresetit">重置</button>
  <br><br>
  <a id="downloadLink" href="#" style="display:none;">下载结果文件</a>
  <img id="imgPreview" src="" style="display:none;">
  
  <script src="script.js"></script>
</body>
</html>
```

### JavaScript 部分（`script.js`）：

```javascript
document.getElementById('makelinkageanimate').addEventListener('click', function () {
  const fileStart = document.getElementById('ejtilelinkagefilestart').files[0];
  const fileEnd = document.getElementById('ejtilelinkagefileend').files[0];

  if (!fileStart || !fileEnd) {
    alert("请先选择两个SVG文件！");
    return;
  }

  Promise.all([loadSVG(fileStart), loadSVG(fileEnd)]).then(([startSVG, endSVG]) => {
    // Step 1: Remove <g class="etwait"/> and extract <use> from <g class="etdrop">
    const startGroup = startSVG.querySelector('g.etdrop');
    const endGroup = endSVG.querySelector('g.etdrop');
    const startUses = Array.from(startGroup.querySelectorAll('use'));
    const endUses = Array.from(endGroup.querySelectorAll('use'));

    // Step 2: Sort uses by href
    const sortedStartUses = sortByHref(startUses);
    const sortedEndUses = sortByHref(endUses);

    console.log("Start SVG uses:", sortedStartUses);
    console.log("End SVG uses:", sortedEndUses);

    // Step 3: Log translate values from both files
    sortedStartUses.forEach((use, index) => {
      console.log(`Start translate for ${use.href.baseVal}:`, getTranslate(use));
    });

    sortedEndUses.forEach((use, index) => {
      console.log(`End translate for ${use.href.baseVal}:`, getTranslate(use));
      console.log(`End rotate for ${use.href.baseVal}:`, getRotate(use));
    });

    // Step 4: Insert <animateTransform> for translation and rotation
    insertAnimation(startSVG, endSVG, sortedStartUses, sortedEndUses);

    // Step 5: Generate downloadable file and display image preview
    const resultSVG = startSVG.outerHTML;
    const resultBlob = new Blob([resultSVG], { type: 'image/svg+xml' });
    const resultUrl = URL.createObjectURL(resultBlob);
    
    document.getElementById('downloadLink').href = resultUrl;
    document.getElementById('downloadLink').style.display = 'block';
    document.getElementById('downloadLink').textContent = `下载文件 (${resultBlob.size} 字节)`;

    // Display image preview
    document.getElementById('imgPreview').src = resultUrl;
    document.getElementById('imgPreview').style.display = 'block';
  }).catch((error) => {
    console.error("加载文件失败:", error);
  });
});

document.getElementById('etresetit').addEventListener('click', function () {
  document.getElementById('ejtilelinkagefilestart').value = '';
  document.getElementById('ejtilelinkagefileend').value = '';
  document.getElementById('downloadLink').style.display = 'none';
  document.getElementById('imgPreview').style.display = 'none';
  console.clear();
});

// Load SVG file as a DOM object
function loadSVG(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      const parser = new DOMParser();
      const svgDoc = parser.parseFromString(e.target.result, 'image/svg+xml');
      resolve(svgDoc.documentElement);
    };
    reader.onerror = reject;
    reader.readAsText(file);
  });
}

// Sort <use> elements by href attribute (handle numbers correctly)
function sortByHref(uses) {
  return uses.sort((a, b) => {
    const numA = parseInt(a.getAttribute('href').substring(1), 10);
    const numB = parseInt(b.getAttribute('href').substring(1), 10);
    return numA - numB;
  });
}

// Get the translate transformation from a <use> element
function getTranslate(use) {
  const transform = use.getAttribute('transform');
  const match = /translate\(([^,]+),([^,]+)\)/.exec(transform);
  return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
}

// Get the rotate transformation from a <use> element
function getRotate(use) {
  const transform = use.getAttribute('transform');
  const match = /rotate\(([^)]+)\)/.exec(transform);
  return match ? parseFloat(match[1]) : 0;
}

// Insert animation transforms (translation and rotation) into the SVG
function insertAnimation(startSVG, endSVG, startUses, endUses) {
  startUses.forEach((startUse, index) => {
    const startTranslate = getTranslate(startUse);
    const endUse = endUses[index];
    const endTranslate = getTranslate(endUse);
    const tx = endTranslate.x - startTranslate.x;
    const ty = endTranslate.y - startTranslate.y;

    // Insert translation animation
    const animateTranslate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
    animateTranslate.setAttribute('additive', 'sum');
    animateTranslate.setAttribute('attributeName', 'transform');
    animateTranslate.setAttribute('attributeType', 'XML');
    animateTranslate.setAttribute('type', 'translate');
    animateTranslate.setAttribute('values', `0,0;${tx},${ty}`);
    animateTranslate.setAttribute('dur', '3.6s');
    animateTranslate.setAttribute('repeatCount', 'indefinite');
    animateTranslate.setAttribute('begin', '0');
    startUse.appendChild(animateTranslate);

    // Insert rotation animations
    for (let i = 0; i <= index; i++) {
      const rotateValue = getRotate(endUses[i]);
      const centerX = getTranslate(startUses[i]).x - startTranslate.x;
      const centerY = getTranslate(startUses[i]).y - startTranslate.y;
      
      const animateRotate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
      animateRotate.setAttribute('additive', 'sum');
      animateRotate.setAttribute('attributeName', 'transform');
      animateRotate.setAttribute('attributeType', 'XML');
      animateRotate.setAttribute('type', 'rotate');
      animateRotate.setAttribute('values', `0 ${centerX} ${centerY};${rotateValue} ${centerX} ${centerY}`);
      animateRotate.setAttribute('dur', '3.6s');
      animateRotate.setAttribute('repeatCount', 'indefinite');
      animateRotate.setAttribute('begin', '0s');
      startUse.appendChild(animateRotate);
    }
  });
}
```

### 说明：
1. **HTML 部分**：包括两个文件上传控件（用于加载 SVG 文件），一个按钮用于生成动画，另一个按钮用于重置。
2. **JavaScript 部分**：
   - `loadSVG` 函数：用于读取并解析 SVG 文件。
   - `sortByHref` 函数：按数字顺序排序 `use` 元素。
   - `getTranslate` 和 `getRotate`：获取 `use` 元素的平移和旋转值。
   - `insertAnimation`：根据模板添加 `<animateTransform>` 元素（平移和旋转动画）。
   - `makelinkageanimate` 按钮点击时，处理文件、生成动画并展示下载链接及图片预览。
   - `etresetit` 按钮点击时，重置输入框及状态。

### 使用：
1. 选择两个 SVG 文件。
2. 点击「生成动画」按钮，JavaScript 会处理这些文件并生成动画效果。
3. 下载链接会显示，点击可以下载生成的文件，图像预览也会显示。

### 重点：
- **排序 `use` 元素**：通过 href 中的数字部分对 `use` 元素进行排序，确保按照正确的顺序排列。
- **插入动画**：在每个 `use` 元素中插入平移和旋转动画，基于文件中获取的

ejsoon · 帖子由 **ejsoon** » 2025年 2月 14日 23:24

代码：全选

了解了，你的排序需求是根据 `tile0` 到 `tile11` 依次排列，保证按从 `tile0` 到 `tile11` 的顺序排列，而不是按照数值顺序。并且，计算结果需要四舍五入保留三位小数。

这里是调整后的代码部分：

### JavaScript 更新部分：
```javascript
document.getElementById('makelinkageanimate').addEventListener('click', function () {
  const fileStart = document.getElementById('ejtilelinkagefilestart').files[0];
  const fileEnd = document.getElementById('ejtilelinkagefileend').files[0];

  if (!fileStart || !fileEnd) {
    alert("请先选择两个SVG文件！");
    return;
  }

  Promise.all([loadSVG(fileStart), loadSVG(fileEnd)]).then(([startSVG, endSVG]) => {
    // Step 1: Remove <g class="etwait"/> and extract <use> from <g class="etdrop">
    const startGroup = startSVG.querySelector('g.etdrop');
    const endGroup = endSVG.querySelector('g.etdrop');
    const startUses = Array.from(startGroup.querySelectorAll('use'));
    const endUses = Array.from(endGroup.querySelectorAll('use'));

    // Step 2: Sort uses explicitly by tile0, tile1, tile2, ..., tile11
    const sortedStartUses = sortByTileOrder(startUses);
    const sortedEndUses = sortByTileOrder(endUses);

    console.log("Start SVG uses:", sortedStartUses);
    console.log("End SVG uses:", sortedEndUses);

    // Step 3: Log translate values from both files
    sortedStartUses.forEach((use, index) => {
      console.log(`Start translate for ${use.href.baseVal}:`, getTranslate(use));
    });

    sortedEndUses.forEach((use, index) => {
      console.log(`End translate for ${use.href.baseVal}:`, getTranslate(use));
      console.log(`End rotate for ${use.href.baseVal}:`, getRotate(use));
    });

    // Step 4: Insert <animateTransform> for translation and rotation
    insertAnimation(startSVG, endSVG, sortedStartUses, sortedEndUses);

    // Step 5: Generate downloadable file and display image preview
    const resultSVG = startSVG.outerHTML;
    const resultBlob = new Blob([resultSVG], { type: 'image/svg+xml' });
    const resultUrl = URL.createObjectURL(resultBlob);
    
    document.getElementById('downloadLink').href = resultUrl;
    document.getElementById('downloadLink').style.display = 'block';
    document.getElementById('downloadLink').textContent = `下载文件 (${resultBlob.size} 字节)`;

    // Display image preview
    document.getElementById('imgPreview').src = resultUrl;
    document.getElementById('imgPreview').style.display = 'block';
  }).catch((error) => {
    console.error("加载文件失败:", error);
  });
});

// Sort <use> elements explicitly by tile0, tile1, tile2, ..., tile11
function sortByTileOrder(uses) {
  return uses.sort((a, b) => {
    const hrefA = a.getAttribute('href');
    const hrefB = b.getAttribute('href');
    const numA = parseInt(hrefA.substring(1), 10);
    const numB = parseInt(hrefB.substring(1), 10);
    return numA - numB;
  });
}

// Get the translate transformation from a <use> element
function getTranslate(use) {
  const transform = use.getAttribute('transform');
  const match = /translate\(([^,]+),([^,]+)\)/.exec(transform);
  return match ? {
    x: roundToThreeDecimalPlaces(parseFloat(match[1])),
    y: roundToThreeDecimalPlaces(parseFloat(match[2]))
  } : { x: 0, y: 0 };
}

// Get the rotate transformation from a <use> element
function getRotate(use) {
  const transform = use.getAttribute('transform');
  const match = /rotate\(([^)]+)\)/.exec(transform);
  return match ? roundToThreeDecimalPlaces(parseFloat(match[1])) : 0;
}

// Round a number to three decimal places
function roundToThreeDecimalPlaces(num) {
  return Math.round(num * 1000) / 1000;
}

// Insert animation transforms (translation and rotation) into the SVG
function insertAnimation(startSVG, endSVG, startUses, endUses) {
  startUses.forEach((startUse, index) => {
    const startTranslate = getTranslate(startUse);
    const endUse = endUses[index];
    const endTranslate = getTranslate(endUse);
    const tx = roundToThreeDecimalPlaces(endTranslate.x - startTranslate.x);
    const ty = roundToThreeDecimalPlaces(endTranslate.y - startTranslate.y);

    // Insert translation animation
    const animateTranslate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
    animateTranslate.setAttribute('additive', 'sum');
    animateTranslate.setAttribute('attributeName', 'transform');
    animateTranslate.setAttribute('attributeType', 'XML');
    animateTranslate.setAttribute('type', 'translate');
    animateTranslate.setAttribute('values', `0,0;${tx},${ty}`);
    animateTranslate.setAttribute('dur', '3.6s');
    animateTranslate.setAttribute('repeatCount', 'indefinite');
    animateTranslate.setAttribute('begin', '0');
    startUse.appendChild(animateTranslate);

    // Insert rotation animations
    for (let i = 0; i <= index; i++) {
      const rotateValue = getRotate(endUses[i]);
      const centerX = roundToThreeDecimalPlaces(getTranslate(startUses[i]).x - startTranslate.x);
      const centerY = roundToThreeDecimalPlaces(getTranslate(startUses[i]).y - startTranslate.y);
      
      const animateRotate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
      animateRotate.setAttribute('additive', 'sum');
      animateRotate.setAttribute('attributeName', 'transform');
      animateRotate.setAttribute('attributeType', 'XML');
      animateRotate.setAttribute('type', 'rotate');
      animateRotate.setAttribute('values', `0 ${centerX} ${centerY};${rotateValue} ${centerX} ${centerY}`);
      animateRotate.setAttribute('dur', '3.6s');
      animateRotate.setAttribute('repeatCount', 'indefinite');
      animateRotate.setAttribute('begin', '0s');
      startUse.appendChild(animateRotate);
    }
  });
}
```

### 更新的功能：
1. **排序修正**：通过 `sortByTileOrder` 函数按 `tile0`, `tile1`, `tile2` 的顺序排序 `use` 元素。
2. **四舍五入**：`roundToThreeDecimalPlaces` 函数确保所有计算结果都保留三位小数，避免精度问题。

通过这些改动，排序会严格按照 `tile0`, `tile1`, `tile2` 等顺序进行，而计算出的平移（translate）和旋转（rotate）值会四舍五入到三位小数。

这样修改后，你的需求应该得到完美满足。

ejsoon · 帖子由 **ejsoon** » 2025年 2月 14日 23:33

代码：全选

可以透過以下的 HTML 和 JavaScript 程式碼來實現您所描述的功能：

### HTML

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Manipulation</title>
</head>
<body>
    <input id="ejtilelinkagefilestart" type="file" accept=".svg">
    <input id="ejtilelinkagefileend" type="file" accept=".svg">
    <button id="makelinkageanimate" type="button">Make Linkage Animate</button>
    <button id="etresetit" type="button">Reset</button>

    <script src="script.js"></script>
</body>
</html>
```

### JavaScript (script.js)

```javascript
document.getElementById('makelinkageanimate').addEventListener('click', function () {
    // Get the selected file from the input
    const fileInput = document.getElementById('ejtilelinkagefilestart');
    const file = fileInput.files[0];

    if (file) {
        // Read the SVG file
        const reader = new FileReader();
        reader.onload = function (e) {
            const parser = new DOMParser();
            const svgDocument = parser.parseFromString(e.target.result, 'image/svg+xml');
            
            // Remove <g class="etwait"/>
            const etwaitGroup = svgDocument.querySelector('g.etwait');
            if (etwaitGroup) {
                etwaitGroup.remove();
            }
            
            // Get all <use> elements inside <g class="etdrop"/>
            const etdropGroup = svgDocument.querySelector('g.etdrop');
            if (etdropGroup) {
                const uses = etdropGroup.querySelectorAll('use');
                console.log('All <use> elements inside <g class="etdrop">:', uses);
            } else {
                console.log('No <g class="etdrop"> found in the SVG.');
            }
        };

        // Start reading the file as text
        reader.readAsText(file);
    } else {
        console.log('No file selected');
    }
});

// Reset functionality (optional, if you want to reset the inputs)
document.getElementById('etresetit').addEventListener('click', function () {
    document.getElementById('ejtilelinkagefilestart').value = '';
    document.getElementById('ejtilelinkagefileend').value = '';
});
```

### 功能解釋：
1. **`input[type="file"]`** 用來選擇SVG文件。
2. 當用戶選擇文件後，點擊 **"Make Linkage Animate"** 按鈕時，JavaScript 會讀取SVG文件，解析並移除 `<g class="etwait"/>`。
3. 然後它會查找 `<g class="etdrop"/>` 中的所有 `<use>` 元素並將結果輸出到控制台。
4. **重置功能**：可以清空文件選擇器中的文件。

您可以進行測試，並查看控制台中輸出的 `<use>` 元素集合。

ejsoon · 帖子由 **ejsoon** » 2025年 2月 16日 16:44

代码：全选

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算 a_2 的對應值</title>
</head>
<body>
    <h1>計算三角形BCD中角a_2</h1>

    <label for="increment">輸入a_0的遞增量（例如1）:</label>
    <input type="number" id="increment" value="1" min="0" max="90">
    
    <button onclick="calculate()">計算</button>
    
    <h2>a_2 的對應值：</h2>
    <textarea id="output" rows="10" cols="50"></textarea>

    <script>
        // 計算 a_2 的對應值
        function calculate() {
            const increment = parseFloat(document.getElementById('increment').value);
            let result = [];
            
            // 初始條件
            const x_0 = 120, y_0 = 0;
            const length = 120;
            
            for (let a_0 = 0; a_0 <= 90; a_0 += increment) {
                const radA0 = a_0 * Math.PI / 180; // a_0 轉換為弧度
                
                // 計算點B的座標
                const x_1 = x_0 - length * Math.sin(radA0);
                const y_1 = y_0 - length * Math.cos(radA0);

                // 計算 a_1
                const a_1 = 180 - (90 - a_0 + (2 / 3) * a_0);
                const radA1 = a_1 * Math.PI / 180; // a_1 轉換為弧度
                
                // 計算點C的座標
                const x_2 = x_1 - length * Math.sin(radA1);
                const y_2 = y_1 - length * Math.cos(radA1);

                // 計算點D的座標 (x_3 < 0, x_3 = -y_3)
                let x_3 = -Math.sqrt(Math.pow(x_2, 2) + Math.pow(y_2, 2) - Math.pow(length, 2));
                let y_3 = -x_3; // x_3 = -y_3

                // 計算角C (a_2)
                const angleB = Math.atan2(y_2 - y_3, x_2 - x_3);  // 角B
                const angleC = Math.atan2(y_3 - y_2, x_3 - x_2);  // 角C
                const a_2 = angleC * 180 / Math.PI;  // 轉換為度數

                result.push(a_2.toFixed(3));
            }

            // 顯示結果
            document.getElementById('output').value = result.join(',');
        }
    </script>
</body>
</html>

ejsoon · 帖子由 **ejsoon** » 2025年 2月 16日 17:05

代码：全选

要使用一元二次方程求根公式来解决这个问题，我们首先需要将给定的方程转换为标准的一元二次方程的形式。给定的方程是：

\[
(x_3 - x_2)^2 + (-x_3 - y_2)^2 = 120^2
\]

我们可以展开并简化这个方程，最后求解 \( x_3 \)。

### 1. 展开方程
首先，我们展开两项：

\[
(x_3 - x_2)^2 + (-x_3 - y_2)^2 = 120^2
\]

展开后：

\[
(x_3^2 - 2x_3x_2 + x_2^2) + (x_3^2 + 2x_3y_2 + y_2^2) = 14400
\]

合并同类项：

\[
2x_3^2 + (-2x_3x_2 + 2x_3y_2) + (x_2^2 + y_2^2) = 14400
\]

这时方程已经转化为一个二次方程的标准形式：

\[
2x_3^2 + 2x_3(y_2 - x_2) + (x_2^2 + y_2^2 - 14400) = 0
\]

### 2. 使用求根公式

我们现在得到一个标准的一元二次方程：

\[
Ax^2 + Bx + C = 0
\]

其中：
- \( A = 2 \)
- \( B = 2(y_2 - x_2) \)
- \( C = x_2^2 + y_2^2 - 14400 \)

求解这个方程的根可以使用求根公式：

\[
x_3 = \frac{-B \pm \sqrt{B^2 - 4AC}}{2A}
\]

### 3. 实现代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算 x_3 的根</title>
</head>
<body>
    <h1>使用一元二次方程求解 x_3</h1>

    <label for="x2">輸入 x_2:</label>
    <input type="number" id="x2" value="100"><br>

    <label for="y2">輸入 y_2:</label>
    <input type="number" id="y2" value="50"><br>

    <button onclick="calculateRoots()">計算 x_3 的根</button>

    <h2>計算結果：</h2>
    <p id="output"></p>

    <script>
        function calculateRoots() {
            // 讀取 x_2 和 y_2
            const x2 = parseFloat(document.getElementById('x2').value);
            const y2 = parseFloat(document.getElementById('y2').value);

            // 方程的係數 A, B, C
            const A = 2;
            const B = 2 * (y2 - x2);
            const C = Math.pow(x2, 2) + Math.pow(y2, 2) - Math.pow(120, 2);

            // 計算判別式
            const discriminant = Math.pow(B, 2) - 4 * A * C;

            // 判別式為負，無實數解
            if (discriminant < 0) {
                document.getElementById('output').textContent = '無實數解';
                return;
            }

            // 計算兩個根
            const root1 = (-B + Math.sqrt(discriminant)) / (2 * A);
            const root2 = (-B - Math.sqrt(discriminant)) / (2 * A);

            // 顯示結果
            document.getElementById('output').textContent = `x_3 的兩個根是: ${root1.toFixed(3)} 和 ${root2.toFixed(3)}`;
        }
    </script>
</body>
</html>
```

### 代码解释：
1. **输入**：用户输入 \( x_2 \) 和 \( y_2 \)。
2. **计算**：通过展开方程并应用求根公式，我们计算出方程的两个根 \( x_3 \)。
3. **输出**：显示计算出的两个根。

### 使用方法：
1. 输入 `x_2` 和 `y_2` 的值。
2. 点击“计算 x_3 的根”按钮，程序会计算并显示两个根。

如果方程有负的判别式，则会显示“无实数解”。

ejsoon · 帖子由 **ejsoon** » 2025年 2月 16日 17:45

代码：全选

要求三角形 \(BCD\) 中角 \(C\) 的角度，可以使用**向量法**来计算。具体来说，角 \(C\) 是向量 \(BC\) 和 \(DC\) 之间的夹角。通过向量的点积公式可以求得这个夹角的余弦值，再通过反余弦函数（`Math.acos`）来得到角度。

### 角度计算步骤：
1. **向量** \( \mathbf{BC} \) 和 \( \mathbf{DC} \)：
   - 向量 \( \mathbf{BC} = (x_2 - x_1, y_2 - y_1) \)
   - 向量 \( \mathbf{DC} = (x_3 - x_2, y_3 - y_2) \)
   
2. **计算向量的点积** \( \mathbf{BC} \cdot \mathbf{DC} \)：
   - \( \mathbf{BC} \cdot \mathbf{DC} = (x_2 - x_1) \cdot (x_3 - x_2) + (y_2 - y_1) \cdot (y_3 - y_2) \)

3. **计算向量的模长**：
   - \( |\mathbf{BC}| = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} \)
   - \( |\mathbf{DC}| = \sqrt{(x_3 - x_2)^2 + (y_3 - y_2)^2} \)

4. **计算夹角的余弦值**：
   \[
   \cos(\theta) = \frac{\mathbf{BC} \cdot \mathbf{DC}}{|\mathbf{BC}| \cdot |\mathbf{DC}|}
   \]

5. **通过反余弦函数计算角度**：
   \[
   \theta = \cos^{-1}(\cos(\theta))
   \]
   结果将以弧度表示，如果需要角度，可以将弧度转换为角度（乘以 \( \frac{180}{\pi} \)）。

### JavaScript实现：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算角 C 的角度</title>
</head>
<body>
    <h1>計算三角形BCD中角C</h1>

    <label for="x1">輸入 x_1 (B 點的 x 座標):</label>
    <input type="number" id="x1" value="0"><br>

    <label for="y1">輸入 y_1 (B 點的 y 座標):</label>
    <input type="number" id="y1" value="0"><br>

    <label for="x2">輸入 x_2 (C 點的 x 座標):</label>
    <input type="number" id="x2" value="3"><br>

    <label for="y2">輸入 y_2 (C 點的 y 座標):</label>
    <input type="number" id="y2" value="0"><br>

    <label for="x3">輸入 x_3 (D 點的 x 座標):</label>
    <input type="number" id="x3" value="3"><br>

    <label for="y3">輸入 y_3 (D 點的 y 座標):</label>
    <input type="number" id="y3" value="4"><br>

    <button onclick="calculateAngle()">計算角C</button>

    <h2>計算結果：</h2>
    <p id="output"></p>

    <script>
        function calculateAngle() {
            // 讀取 B, C, D 點的座標
            const x1 = parseFloat(document.getElementById('x1').value);
            const y1 = parseFloat(document.getElementById('y1').value);
            const x2 = parseFloat(document.getElementById('x2').value);
            const y2 = parseFloat(document.getElementById('y2').value);
            const x3 = parseFloat(document.getElementById('x3').value);
            const y3 = parseFloat(document.getElementById('y3').value);

            // 向量 BC 和向量 DC 的分量
            const BCx = x2 - x1;
            const BCy = y2 - y1;
            const DCx = x3 - x2;
            const DCy = y3 - y2;

            // 向量 BC 和向量 DC 的點積
            const dotProduct = BCx * DCx + BCy * DCy;

            // 向量 BC 和向量 DC 的模長
            const magnitudeBC = Math.sqrt(BCx * BCx + BCy * BCy);
            const magnitudeDC = Math.sqrt(DCx * DCx + DCy * DCy);

            // 計算 cos(θ)
            const cosTheta = dotProduct / (magnitudeBC * magnitudeDC);

            // 使用反餘弦函數計算角度 (返回的角度是弧度)
            let angleRadian = Math.acos(cosTheta);

            // 把弧度轉換為角度
            let angleDegree = angleRadian * (180 / Math.PI);

            // 顯示結果
            document.getElementById('output').textContent = `角 C 的角度是: ${angleDegree.toFixed(3)}°`;
        }
    </script>
</body>
</html>
```

### 代码解释：
1. **输入**：
   - 用户输入三角形的三个顶点 \(B(x_1, y_1)\), \(C(x_2, y_2)\), 和 \(D(x_3, y_3)\) 的坐标。
   
2. **计算**：
   - 使用向量 \( \mathbf{BC} \) 和 \( \mathbf{DC} \) 的坐标差，计算它们的点积和模长。
   - 使用点积公式计算夹角的余弦值。
   - 通过 `Math.acos` 得到弧度，并将弧度转换为角度。

3. **输出**：
   - 计算出的角 \(C\) 的角度会以度数形式显示出来。

### 使用方法：
1. 输入三角形的三点坐标（\(B(x_1, y_1)\), \(C(x_2, y_2)\), \(D(x_3, y_3)\)）。
2. 点击“计算角C”按钮，程序会计算并显示角 \(C\) 的角度。

希望这对你有帮助！如果有任何问题或需要进一步优化，欢迎随时提问。

ejsoon · 帖子由 **ejsoon** » 2025年 2月 16日 20:35

代码：全选

0.000,4.260,8.386,12.397,16.304,20.119,23.850,27.505,31.088,34.604,38.058,41.453,44.791,48.076,51.308,54.490,57.622,60.707,63.745,66.737,69.684,72.586,75.444,78.257,81.027,83.754,86.437,89.076,91.672,94.225,96.735,99.201,101.623,104.002,106.337,108.629,110.877,113.081,115.241,117.357,119.430,121.459,123.445,125.388,127.287,129.144,130.958,132.731,134.461,136.151,137.799,139.408,140.977,142.508,144.000,145.455,146.873,148.256,149.603,150.917,152.197,153.446,154.663,155.849,157.006,158.135,159.237,160.312,161.362,162.387,163.389,164.369,165.327,166.264,167.183,168.083,168.965,169.831,170.681,171.516,172.338,173.147,173.944,174.730,175.506,176.273,177.031,177.782,178.527,179.266,180.000

代码：全选

<svg id="etmain" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" rotatestart="0" stepvalue="30" snapto="0">   <g id="tile0" frontfill="#ffd766" backfill="#000e15"><path d="M 0,-119.999 L 0,0 L -16.076,-60 Z"/></g><g id="tile1" frontfill="#ffd766" backfill="#000e15"><path d="M -119.999,0 L 0,0 L -60,16.076 Z"/></g><g id="tile2" frontfill="#ffd766" backfill="#000e15"><path d="M -119.999,0 L 0,0 L -60,16.076 Z"/></g><g id="tile3" frontfill="#ffd766" backfill="#000e15"><path d="M 0,119.999 L 0,0 L 16.076,60 Z"/></g><g id="tile4" frontfill="#ffd766" backfill="#000e15"><path d="M 0,119.999 L 0,0 L 16.076,60 Z"/></g><g id="tile5" frontfill="#ffd766" backfill="#000e15"><path d="M 119.999,0 L 0,0 L 60,-16.076 Z"/></g><g id="tile6" frontfill="#8feeaa" backfill="#01334a"><path d="M 60,60 L -60,60 L -60,-60 L 60,-60 Z"/></g><g id="tile7" frontfill="#8feeaa" backfill="#01334a"><path d="M 60,60 L -60,60 L -60,-60 L 60,-60 Z"/></g><g id="tile8" frontfill="#8feeaa" backfill="#01334a"><path d="M 60,60 L -60,60 L -60,-60 L 60,-60 Z"/></g><g id="tile9" frontfill="#ff3b5c" backfill="#2691c0"><path d="M -60,-60 L 0,-43.923 L 60,-59.999 L 43.923,0 L 60,60 L -60,60 Z"/></g><g id="tile10" frontfill="#ff3b5c" backfill="#2691c0"><path d="M -60,-60 L 0,-43.923 L 60,-59.999 L 43.923,0 L 60,60 L -60,60 Z"/></g><g id="tile11" frontfill="#ff3b5c" backfill="#2691c0"><path d="M -60,-60 L 0,-43.923 L 60,-59.999 L 43.923,0 L 60,60 L -60,60 Z"/></g><g id="tile12" frontfill="#55abca" backfill="#000609"><path d="M 30,-29.999 L 13.923,30 L -30,-13.923 Z"/></g><g id="tile13" frontfill="#55abca" backfill="#000609"><path d="M 30,-29.999 L 13.923,30 L -30,-13.923 Z"/></g><g id="tile14" frontfill="#55abca" backfill="#000609"><path d="M 30,-29.999 L 13.923,30 L -30,-13.923 Z"/></g><g id="tile15" frontfill="#ff3b5c" backfill="#2691c0"><path d="M -60,-60 L 0,-43.923 L 43.923,0 L 60,60 L -60,60 Z"/></g><g id="tile16" frontfill="#ff3b5c" backfill="#2691c0"><path d="M -60,-60 L 0,-43.923 L 43.923,0 L 60,60 L -60,60 Z"/></g><g id="tile17" frontfill="#ff3b5c" backfill="#2691c0"><path d="M -60,-60 L 0,-43.923 L 43.923,0 L 60,60 L -60,60 Z"/></g></defs> <g class="etdrop" stroke="#777" stroke-width="2" transform="translate(161.056,166.568) scale(0.484)"><g class="etboard"><circle r="6" cx="-60" cy="-60" fill="purple" stroke="none" stroke-width="0" class="bcenter"/><circle r="6" cx="60" cy="-60" fill="purple" stroke="none" stroke-width="0" class="bcenter"/><circle r="6" cx="-60" cy="60" fill="purple" stroke="none" stroke-width="0" class="bcenter"/><path d="M 0,-120 L -60,-103.923 L -103.923,-60 L -120,0 L -103.923,60 L -60,103.923 L 0,120 L 60,103.923 L 103.923,60 L 120,0 L 103.923,-60 L 60,-103.923 Z" stroke="#000" stroke-width="4" fill="none" class="boardsnap0"/></g><use href="#tile17" fill="#ff3b5c" stroke="#777" transform="translate(275.101,226.093) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -155.103,-226.093;-90 -155.103,-226.093;-90 -155.103,-226.093;0 -155.103,-226.093;0 -155.103,-226.093" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -155.102,-346.09;-60 -155.102,-346.09;-60 -155.102,-346.09;0 -155.102,-346.09;0 -155.102,-346.09" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -275.101,-346.091;180 -275.101,-346.091;180 -275.101,-346.091;0 -275.101,-346.091;0 -275.101,-346.091" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -395.098,-346.093;-60 -395.098,-346.093;-60 -395.098,-346.093;0 -395.098,-346.093;0 -395.098,-346.093" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -395.099,-226.094;180 -395.099,-226.094;180 -395.099,-226.094;0 -395.099,-226.094;0 -395.099,-226.094" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -395.101,-106.096;-60 -395.101,-106.096;-60 -395.101,-106.096;0 -395.101,-106.096;0 -395.101,-106.096" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -335.101,143.824;0 -335.101,143.824;0 -335.101,143.824;0 -335.101,143.824;0 -335.101,143.824" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -114.027,77.543;0 -114.027,77.543;0 -114.027,77.543;0 -114.027,77.543;0 -114.027,77.543" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -18.82,75.477;0 -18.82,75.477;0 -18.82,75.477;0 -18.82,75.477;0 -18.82,75.477" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -215.101,-286.093;0 -215.101,-286.093;0 -215.101,-286.093;0 -215.101,-286.093;0 -215.101,-286.093" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -335.101,-286.093;-90 -335.101,-286.093;-90 -335.101,-286.093;0 -335.101,-286.093;0 -335.101,-286.093" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -335.101,-166.093;180 -335.101,-166.093;180 -335.101,-166.093;0 -335.101,-166.093;0 -335.101,-166.093" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -7.303,-197.386;0 -7.303,-197.386;0 -7.303,-197.386;0 -7.303,-197.386;0 -7.303,-197.386" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -58.956,-5.237;0 -58.956,-5.237;0 -58.956,-5.237;0 -58.956,-5.237;0 -58.956,-5.237" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -63.088,-7.303;0 -63.088,-7.303;0 -63.088,-7.303;0 -63.088,-7.303;0 -63.088,-7.303" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -262.397,47.521;-120 -262.397,47.521;-120 -262.397,47.521;0 -262.397,47.521;0 -262.397,47.521" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -41.322,26.859;0 -41.322,26.859;0 -41.322,26.859;0 -41.322,26.859;0 -41.322,26.859" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile16" fill="#ff3b5c" stroke="#777" transform="translate(233.779,252.952) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -113.781,-252.952;-90 -113.781,-252.952;-90 -113.781,-252.952;0 -113.781,-252.952;0 -113.781,-252.952" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -113.78,-372.949;-60 -113.78,-372.949;-60 -113.78,-372.949;0 -113.78,-372.949;0 -113.78,-372.949" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -233.779,-372.95;180 -233.779,-372.95;180 -233.779,-372.95;0 -233.779,-372.95;0 -233.779,-372.95" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -353.776,-372.952;-60 -353.776,-372.952;-60 -353.776,-372.952;0 -353.776,-372.952;0 -353.776,-372.952" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -353.777,-252.953;180 -353.777,-252.953;180 -353.777,-252.953;0 -353.777,-252.953;0 -353.777,-252.953" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -353.779,-132.955;-60 -353.779,-132.955;-60 -353.779,-132.955;0 -353.779,-132.955;0 -353.779,-132.955" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -293.779,116.965;0 -293.779,116.965;0 -293.779,116.965;0 -293.779,116.965;0 -293.779,116.965" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -72.705,50.684;0 -72.705,50.684;0 -72.705,50.684;0 -72.705,50.684;0 -72.705,50.684" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 22.502,48.618;0 22.502,48.618;0 22.502,48.618;0 22.502,48.618;0 22.502,48.618" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -173.779,-312.952;0 -173.779,-312.952;0 -173.779,-312.952;0 -173.779,-312.952;0 -173.779,-312.952" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -293.779,-312.952;-90 -293.779,-312.952;-90 -293.779,-312.952;0 -293.779,-312.952;0 -293.779,-312.952" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -293.779,-192.952;180 -293.779,-192.952;180 -293.779,-192.952;0 -293.779,-192.952;0 -293.779,-192.952" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 34.019,-224.245;0 34.019,-224.245;0 34.019,-224.245;0 34.019,-224.245;0 34.019,-224.245" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -17.634,-32.096;0 -17.634,-32.096;0 -17.634,-32.096;0 -17.634,-32.096;0 -17.634,-32.096" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -21.766,-34.162;0 -21.766,-34.162;0 -21.766,-34.162;0 -21.766,-34.162;0 -21.766,-34.162" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -221.075,20.662;-120 -221.075,20.662;-120 -221.075,20.662;0 -221.075,20.662;0 -221.075,20.662" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile14" fill="#55abca" stroke="#777" transform="translate(212.013,218.79) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -92.015,-218.79;-90 -92.015,-218.79;-90 -92.015,-218.79;0 -92.015,-218.79;0 -92.015,-218.79" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -92.014,-338.787;-60 -92.014,-338.787;-60 -92.014,-338.787;0 -92.014,-338.787;0 -92.014,-338.787" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -212.013,-338.788;180 -212.013,-338.788;180 -212.013,-338.788;0 -212.013,-338.788;0 -212.013,-338.788" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -332.01,-338.79;-60 -332.01,-338.79;-60 -332.01,-338.79;0 -332.01,-338.79;0 -332.01,-338.79" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -332.011,-218.791;180 -332.011,-218.791;180 -332.011,-218.791;0 -332.011,-218.791;0 -332.011,-218.791" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -332.013,-98.793;-60 -332.013,-98.793;-60 -332.013,-98.793;0 -332.013,-98.793;0 -332.013,-98.793" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -272.013,151.127;0 -272.013,151.127;0 -272.013,151.127;0 -272.013,151.127;0 -272.013,151.127" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -50.939,84.846;0 -50.939,84.846;0 -50.939,84.846;0 -50.939,84.846;0 -50.939,84.846" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 44.268,82.78;0 44.268,82.78;0 44.268,82.78;0 44.268,82.78;0 44.268,82.78" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -152.013,-278.79;0 -152.013,-278.79;0 -152.013,-278.79;0 -152.013,-278.79;0 -152.013,-278.79" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -272.013,-278.79;-90 -272.013,-278.79;-90 -272.013,-278.79;0 -272.013,-278.79;0 -272.013,-278.79" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -272.013,-158.79;180 -272.013,-158.79;180 -272.013,-158.79;0 -272.013,-158.79;0 -272.013,-158.79" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 55.785,-190.083;0 55.785,-190.083;0 55.785,-190.083;0 55.785,-190.083;0 55.785,-190.083" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 4.132,2.066;0 4.132,2.066;0 4.132,2.066;0 4.132,2.066;0 4.132,2.066" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile13" fill="#55abca" stroke="#777" transform="translate(216.145,220.856) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -96.147,-220.856;-90 -96.147,-220.856;-90 -96.147,-220.856;0 -96.147,-220.856;0 -96.147,-220.856" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -96.146,-340.853;-60 -96.146,-340.853;-60 -96.146,-340.853;0 -96.146,-340.853;0 -96.146,-340.853" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -216.145,-340.854;180 -216.145,-340.854;180 -216.145,-340.854;0 -216.145,-340.854;0 -216.145,-340.854" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -336.142,-340.856;-60 -336.142,-340.856;-60 -336.142,-340.856;0 -336.142,-340.856;0 -336.142,-340.856" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -336.143,-220.857;180 -336.143,-220.857;180 -336.143,-220.857;0 -336.143,-220.857;0 -336.143,-220.857" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -336.145,-100.859;-60 -336.145,-100.859;-60 -336.145,-100.859;0 -336.145,-100.859;0 -336.145,-100.859" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -276.145,149.061;0 -276.145,149.061;0 -276.145,149.061;0 -276.145,149.061;0 -276.145,149.061" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -55.071,82.78;0 -55.071,82.78;0 -55.071,82.78;0 -55.071,82.78;0 -55.071,82.78" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 40.136,80.714;0 40.136,80.714;0 40.136,80.714;0 40.136,80.714;0 40.136,80.714" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -156.145,-280.856;0 -156.145,-280.856;0 -156.145,-280.856;0 -156.145,-280.856;0 -156.145,-280.856" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -276.145,-280.856;-90 -276.145,-280.856;-90 -276.145,-280.856;0 -276.145,-280.856;0 -276.145,-280.856" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -276.145,-160.856;180 -276.145,-160.856;180 -276.145,-160.856;0 -276.145,-160.856;0 -276.145,-160.856" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 51.653,-192.149;0 51.653,-192.149;0 51.653,-192.149;0 51.653,-192.149;0 51.653,-192.149" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile15" fill="#ff3b5c" stroke="#777" transform="translate(12.704,273.614) scale(1,1) rotate(-120)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 107.294,-273.614;-90 107.294,-273.614;-90 107.294,-273.614;0 107.294,-273.614;0 107.294,-273.614" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 107.295,-393.611;-60 107.295,-393.611;-60 107.295,-393.611;0 107.295,-393.611;0 107.295,-393.611" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -12.704,-393.612;180 -12.704,-393.612;180 -12.704,-393.612;0 -12.704,-393.612;0 -12.704,-393.612" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -132.701,-393.614;-60 -132.701,-393.614;-60 -132.701,-393.614;0 -132.701,-393.614;0 -132.701,-393.614" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -132.702,-273.615;180 -132.702,-273.615;180 -132.702,-273.615;0 -132.702,-273.615;0 -132.702,-273.615" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -132.704,-153.617;-60 -132.704,-153.617;-60 -132.704,-153.617;0 -132.704,-153.617;0 -132.704,-153.617" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -72.704,96.303;0 -72.704,96.303;0 -72.704,96.303;0 -72.704,96.303;0 -72.704,96.303" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 148.37,30.022;0 148.37,30.022;0 148.37,30.022;0 148.37,30.022;0 148.37,30.022" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 243.577,27.956;0 243.577,27.956;0 243.577,27.956;0 243.577,27.956;0 243.577,27.956" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 47.296,-333.614;0 47.296,-333.614;0 47.296,-333.614;0 47.296,-333.614;0 47.296,-333.614" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -72.704,-333.614;-90 -72.704,-333.614;-90 -72.704,-333.614;0 -72.704,-333.614;0 -72.704,-333.614" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -72.704,-213.614;180 -72.704,-213.614;180 -72.704,-213.614;0 -72.704,-213.614;0 -72.704,-213.614" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 255.094,-244.907;0 255.094,-244.907;0 255.094,-244.907;0 255.094,-244.907;0 255.094,-244.907" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 203.441,-52.758;0 203.441,-52.758;0 203.441,-52.758;0 203.441,-52.758;0 203.441,-52.758" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 199.309,-54.824;0 199.309,-54.824;0 199.309,-54.824;0 199.309,-54.824;0 199.309,-54.824" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;-120 0,0;-120 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile6" fill="#8feeaa" stroke="#777" transform="translate(-60,369.917) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 179.998,-369.917;-90 179.998,-369.917;-90 179.998,-369.917;0 179.998,-369.917;0 179.998,-369.917" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 179.999,-489.914;-60 179.999,-489.914;-60 179.999,-489.914;0 179.999,-489.914;0 179.999,-489.914" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 60,-489.915;180 60,-489.915;180 60,-489.915;0 60,-489.915;0 60,-489.915" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -59.997,-489.917;-60 -59.997,-489.917;-60 -59.997,-489.917;0 -59.997,-489.917;0 -59.997,-489.917" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -59.998,-369.918;180 -59.998,-369.918;180 -59.998,-369.918;0 -59.998,-369.918;0 -59.998,-369.918" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -60,-249.92;-60 -60,-249.92;-60 -60,-249.92;0 -60,-249.92;0 -60,-249.92" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile8" fill="#8feeaa" stroke="#777" transform="translate(256.281,301.57) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -136.283,-301.57;-90 -136.283,-301.57;-90 -136.283,-301.57;0 -136.283,-301.57;0 -136.283,-301.57" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -136.282,-421.567;-60 -136.282,-421.567;-60 -136.282,-421.567;0 -136.282,-421.567;0 -136.282,-421.567" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -256.281,-421.568;180 -256.281,-421.568;180 -256.281,-421.568;0 -256.281,-421.568;0 -256.281,-421.568" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -376.278,-421.57;-60 -376.278,-421.57;-60 -376.278,-421.57;0 -376.278,-421.57;0 -376.278,-421.57" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -376.279,-301.571;180 -376.279,-301.571;180 -376.279,-301.571;0 -376.279,-301.571;0 -376.279,-301.571" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -376.281,-181.573;-60 -376.281,-181.573;-60 -376.281,-181.573;0 -376.281,-181.573;0 -376.281,-181.573" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -316.281,68.347;0 -316.281,68.347;0 -316.281,68.347;0 -316.281,68.347;0 -316.281,68.347" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -95.207,2.066;0 -95.207,2.066;0 -95.207,2.066;0 -95.207,2.066;0 -95.207,2.066" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile11" fill="#ff3b5c" stroke="#777" transform="translate(-60,60) scale(1,1) rotate(180)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 179.998,-60;-90 179.998,-60;-90 179.998,-60;0 179.998,-60;0 179.998,-60" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 179.999,-179.997;-60 179.999,-179.997;-60 179.999,-179.997;0 179.999,-179.997;0 179.999,-179.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 60,-179.998;180 60,-179.998;180 60,-179.998;0 60,-179.998;0 60,-179.998" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -59.997,-180;-60 -59.997,-180;-60 -59.997,-180;0 -59.997,-180;0 -59.997,-180" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -59.998,-60.001;180 -59.998,-60.001;180 -59.998,-60.001;0 -59.998,-60.001;0 -59.998,-60.001" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -60,59.997;-60 -60,59.997;-60 -60,59.997;0 -60,59.997;0 -60,59.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,309.917;0 0,309.917;0 0,309.917;0 0,309.917;0 0,309.917" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 221.074,243.636;0 221.074,243.636;0 221.074,243.636;0 221.074,243.636;0 221.074,243.636" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 316.281,241.57;0 316.281,241.57;0 316.281,241.57;0 316.281,241.57;0 316.281,241.57" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 120,-120;0 120,-120;0 120,-120;0 120,-120;0 120,-120" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,-120;-90 0,-120;-90 0,-120;0 0,-120;0 0,-120" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;180 0,0;180 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile9" fill="#ff3b5c" stroke="#777" transform="translate(60,-60) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 59.998,60;-90 59.998,60;-90 59.998,60;0 59.998,60;0 59.998,60" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 59.999,-59.997;-60 59.999,-59.997;-60 59.999,-59.997;0 59.999,-59.997;0 59.999,-59.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -60,-59.998;180 -60,-59.998;180 -60,-59.998;0 -60,-59.998;0 -60,-59.998" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -179.997,-60;-60 -179.997,-60;-60 -179.997,-60;0 -179.997,-60;0 -179.997,-60" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -179.998,59.999;180 -179.998,59.999;180 -179.998,59.999;0 -179.998,59.999;0 -179.998,59.999" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -180,179.997;-60 -180,179.997;-60 -180,179.997;0 -180,179.997;0 -180,179.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -120,429.917;0 -120,429.917;0 -120,429.917;0 -120,429.917;0 -120,429.917" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 101.074,363.636;0 101.074,363.636;0 101.074,363.636;0 101.074,363.636;0 101.074,363.636" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 196.281,361.57;0 196.281,361.57;0 196.281,361.57;0 196.281,361.57;0 196.281,361.57" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile10" fill="#ff3b5c" stroke="#777" transform="translate(-60,-60) scale(1,1) rotate(-90)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 179.998,60;-90 179.998,60;-90 179.998,60;0 179.998,60;0 179.998,60" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 179.999,-59.997;-60 179.999,-59.997;-60 179.999,-59.997;0 179.999,-59.997;0 179.999,-59.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 60,-59.998;180 60,-59.998;180 60,-59.998;0 60,-59.998;0 60,-59.998" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -59.997,-60;-60 -59.997,-60;-60 -59.997,-60;0 -59.997,-60;0 -59.997,-60" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -59.998,59.999;180 -59.998,59.999;180 -59.998,59.999;0 -59.998,59.999;0 -59.998,59.999" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -60,179.997;-60 -60,179.997;-60 -60,179.997;0 -60,179.997;0 -60,179.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,429.917;0 0,429.917;0 0,429.917;0 0,429.917;0 0,429.917" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 221.074,363.636;0 221.074,363.636;0 221.074,363.636;0 221.074,363.636;0 221.074,363.636" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 316.281,361.57;0 316.281,361.57;0 316.281,361.57;0 316.281,361.57;0 316.281,361.57" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 120,0;0 120,0;0 120,0;0 120,0;0 120,0" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;-90 0,0;-90 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile7" fill="#8feeaa" stroke="#777" transform="translate(161.074,303.636) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -41.076,-303.636;-90 -41.076,-303.636;-90 -41.076,-303.636;0 -41.076,-303.636;0 -41.076,-303.636" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -41.075,-423.633;-60 -41.075,-423.633;-60 -41.075,-423.633;0 -41.075,-423.633;0 -41.075,-423.633" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -161.074,-423.634;180 -161.074,-423.634;180 -161.074,-423.634;0 -161.074,-423.634;0 -161.074,-423.634" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -281.071,-423.636;-60 -281.071,-423.636;-60 -281.071,-423.636;0 -281.071,-423.636;0 -281.071,-423.636" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -281.072,-303.637;180 -281.072,-303.637;180 -281.072,-303.637;0 -281.072,-303.637;0 -281.072,-303.637" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -281.074,-183.639;-60 -281.074,-183.639;-60 -281.074,-183.639;0 -281.074,-183.639;0 -281.074,-183.639" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -221.074,66.281;0 -221.074,66.281;0 -221.074,66.281;0 -221.074,66.281;0 -221.074,66.281" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile0" fill="#ffd766" stroke="#777" transform="translate(119.998,0) scale(1,1) rotate(0.001)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;-90 0,0;-90 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile1" fill="#ffd766" stroke="#777" transform="translate(119.999,-119.997) scale(1,1) rotate(0.001)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -0.001,119.997;-90 -0.001,119.997;-90 -0.001,119.997;0 -0.001,119.997;0 -0.001,119.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;-60 0,0;-60 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile2" fill="#ffd766" stroke="#777" transform="translate(0,-119.998) scale(1,1) rotate(0.001)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 119.998,119.998;-90 119.998,119.998;-90 119.998,119.998;0 119.998,119.998;0 119.998,119.998" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 119.999,0.001;-60 119.999,0.001;-60 119.999,0.001;0 119.999,0.001;0 119.999,0.001" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;180 0,0;180 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile12" fill="#55abca" stroke="#777" transform="translate(267.798,28.707) scale(1,1) rotate(0)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -147.8,-28.707;-90 -147.8,-28.707;-90 -147.8,-28.707;0 -147.8,-28.707;0 -147.8,-28.707" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -147.799,-148.704;-60 -147.799,-148.704;-60 -147.799,-148.704;0 -147.799,-148.704;0 -147.799,-148.704" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -267.798,-148.705;180 -267.798,-148.705;180 -267.798,-148.705;0 -267.798,-148.705;0 -267.798,-148.705" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -387.795,-148.707;-60 -387.795,-148.707;-60 -387.795,-148.707;0 -387.795,-148.707;0 -387.795,-148.707" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -387.796,-28.708;180 -387.796,-28.708;180 -387.796,-28.708;0 -387.796,-28.708;0 -387.796,-28.708" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -387.798,91.29;-60 -387.798,91.29;-60 -387.798,91.29;0 -387.798,91.29;0 -387.798,91.29" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -327.798,341.21;0 -327.798,341.21;0 -327.798,341.21;0 -327.798,341.21;0 -327.798,341.21" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -106.724,274.929;0 -106.724,274.929;0 -106.724,274.929;0 -106.724,274.929;0 -106.724,274.929" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -11.517,272.863;0 -11.517,272.863;0 -11.517,272.863;0 -11.517,272.863;0 -11.517,272.863" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -207.798,-88.707;0 -207.798,-88.707;0 -207.798,-88.707;0 -207.798,-88.707;0 -207.798,-88.707" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -327.798,-88.707;-90 -327.798,-88.707;-90 -327.798,-88.707;0 -327.798,-88.707;0 -327.798,-88.707" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 -327.798,31.293;180 -327.798,31.293;180 -327.798,31.293;0 -327.798,31.293;0 -327.798,31.293" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;0 0,0;0 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile3" fill="#ffd766" stroke="#777" transform="translate(-119.997,-120) scale(1,1) rotate(0.001)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 239.995,120;-90 239.995,120;-90 239.995,120;0 239.995,120;0 239.995,120" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 239.996,0.003;-60 239.996,0.003;-60 239.996,0.003;0 239.996,0.003;0 239.996,0.003" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 119.997,0.002;180 119.997,0.002;180 119.997,0.002;0 119.997,0.002;0 119.997,0.002" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;-60 0,0;-60 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile4" fill="#ffd766" stroke="#777" transform="translate(-119.998,-0.001) scale(1,1) rotate(0.001)" class="tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 239.996,0.001;-90 239.996,0.001;-90 239.996,0.001;0 239.996,0.001;0 239.996,0.001" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 239.997,-119.996;-60 239.997,-119.996;-60 239.997,-119.996;0 239.997,-119.996;0 239.997,-119.996" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 119.998,-119.997;180 119.998,-119.997;180 119.998,-119.997;0 119.998,-119.997;0 119.998,-119.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0.001,-119.999;-60 0.001,-119.999;-60 0.001,-119.999;0 0.001,-119.999;0 0.001,-119.999" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;180 0,0;180 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use><use href="#tile5" fill="#ffd766" stroke="#777" transform="translate(-120,119.997) scale(1,1) rotate(0.001)" class="tilesnapped tiledropped"><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="translate" values="0,0;0.001,0;0.001,0;0,0;0,0" dur="3.6s" repeatCount="indefinite" begin="0"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 239.998,-119.997;-90 239.998,-119.997;-90 239.998,-119.997;0 239.998,-119.997;0 239.998,-119.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 239.999,-239.994;-60 239.999,-239.994;-60 239.999,-239.994;0 239.999,-239.994;0 239.999,-239.994" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 120,-239.995;180 120,-239.995;180 120,-239.995;0 120,-239.995;0 120,-239.995" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0.003,-239.997;-60 0.003,-239.997;-60 0.003,-239.997;0 0.003,-239.997;0 0.003,-239.997" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0.002,-119.998;180 0.002,-119.998;180 0.002,-119.998;0 0.002,-119.998;0 0.002,-119.998" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform additive="sum" attributeName="transform" attributeType="XML" type="rotate" values="0 0,0;-60 0,0;-60 0,0;0 0,0;0 0,0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use></g></svg>

拕三合十二二.zip: (15.49 KiB) 已下载 34 次

ejsoon · 帖子由 **ejsoon** » 2025年 2月 16日 21:36

代码：全选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>角度計算器</title>
  <script>
    function calculateAngles() {
      const b = parseFloat(document.getElementById("b").value);
      const steps = Math.floor(b); // Number of steps based on the value of b
      
      let resultABC = [];
      let resultBCD = [];
      
      // Loop through steps
      for (let i = 0; i < steps; i++) {
        const x = i / b; // x goes from 0 to 1 in steps of 1/b
        const a = (i / b) * 45; // a goes from 0 to 45 in steps of 45/b
        
        // Calculate coordinates of points A, B, C
        const x0 = -120 + 120 * x;
        const y0 = 120 - 120 * x;
        
        const x1 = x0 + 120 * Math.cos(a * Math.PI / 180);
        const y1 = y0 - 120 * Math.sin(a * Math.PI / 180);
        
        let x2 = 120;
        let y2 = 120;
        
        // Compute angles
        const angleABC = computeAngle(x0, y0, x1, y1); // Angle ABC
        const angleBCD = computeAngle(x1, y1, x2, y2); // Angle BCD
        
        resultABC.push(angleABC);
        resultBCD.push(angleBCD);
      }
      
      // Output the results
      document.getElementById("output").innerText = "角ABC: " + resultABC.join("; ") + "\n角BCD: " + resultBCD.join("; ");
    }

    // Function to calculate angle between two vectors
    function computeAngle(x1, y1, x2, y2) {
      const dotProduct = x1 * x2 + y1 * y2;
      const magnitude1 = Math.sqrt(x1 * x1 + y1 * y1);
      const magnitude2 = Math.sqrt(x2 * x2 + y2 * y2);
      const cosTheta = dotProduct / (magnitude1 * magnitude2);
      const angleRad = Math.acos(cosTheta); // In radians
      const angleDeg = angleRad * (180 / Math.PI); // Convert to degrees
      return angleDeg.toFixed(2); // Round to 2 decimal places
    }
  </script>
</head>
<body>
  <h1>角度計算器</h1>
  <label for="b">請輸入 b 的值：</label>
  <input type="number" id="b" step="1" min="1" required>
  <button onclick="calculateAngles()">計算角度</button>
  
  <h2>輸出結果:</h2>
  <pre id="output"></pre>
</body>
</html>

算點C坐標：

代码：全选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三角形坐標計算</title>
  <script>
    function calculateC() {
      const x1 = parseFloat(document.getElementById("x1").value);
      const y1 = parseFloat(document.getElementById("y1").value);

      const BC = 120;  // 邊BC長度
      const CD = 120;  // 邊CD長度
      const BD = 120;  // 邊BD長度
      const xD = 120;  // D點x坐標
      const yD = 0;    // D點y坐標

      // 計算C點的坐標 (x2, y2)
      // 基於邊長 BC 和 CD 和 BD 計算
      const angle = Math.acos((Math.pow(BC, 2) + Math.pow(BD, 2) - Math.pow(CD, 2)) / (2 * BC * BD));  // 角B
      const x2 = x1 + BC * Math.cos(angle);  // C點的x坐標
      const y2 = y1 + BC * Math.sin(angle);  // C點的y坐標

      // 顯示結果
      document.getElementById("output").innerText = `C點的坐標: (${x2.toFixed(2)}, ${y2.toFixed(2)})`;
    }
  </script>
</head>
<body>
  <h1>計算三角形C點坐標</h1>
  <label for="x1">請輸入 x1 坐標 (B點):</label>
  <input type="number" id="x1" step="any" required>
  <br><br>
  <label for="y1">請輸入 y1 坐標 (B點):</label>
  <input type="number" id="y1" step="any" required>
  <br><br>
  <button onclick="calculateC()">計算 C 點坐標</button>

  <h2>輸出結果:</h2>
  <pre id="output"></pre>
</body>
</html>

再算點C坐標：

代码：全选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>計算三角形BCD的角和C點坐標</title>
  <script>
    function calculateTriangle() {
      const x1 = parseFloat(document.getElementById("x1").value);
      const y1 = parseFloat(document.getElementById("y1").value);

      const BC = 120;  // 邊 BC 的長度
      const CD = 120;  // 邊 CD 的長度
      const xD = 120;  // D 點的 x 坐標
      const yD = 0;    // D 點的 y 坐標

      // 1. 計算 BD 的距離
      const BD = Math.sqrt(Math.pow(x1 - xD, 2) + Math.pow(y1 - yD, 2));
      document.getElementById("bdOutput").value = `BD的距離: ${BD.toFixed(2)}`;

      // 2. 計算角 ∠BCD 使用余弦定理
      const cosBCD = (Math.pow(BD, 2) + Math.pow(BC, 2) - Math.pow(CD, 2)) / (2 * BD * BC);
      const angleBCD = Math.acos(cosBCD) * (180 / Math.PI);  // 轉換為度數

      // 3. 計算角 ∠BDC 使用余弦定理
      const cosBDC = (Math.pow(BD, 2) + Math.pow(CD, 2) - Math.pow(BC, 2)) / (2 * BD * CD);
      const angleBDC = Math.acos(cosBDC) * (180 / Math.PI);  // 轉換為度數

      // 計算角 B
      const angleB = 180 - angleBCD - angleBDC;  // 角B = 180 - 角BCD - 角BDC

      // 顯示內角
      document.getElementById("angleOutput").value = `∠BCD: ${angleBCD.toFixed(2)}°\n∠BDC: ${angleBDC.toFixed(2)}°\n∠B: ${angleB.toFixed(2)}°`;

      // 4. 計算 C 點的坐標 (x2, y2)
      // 使用三角形的邊長公式來計算 C 點坐標
      const angleBCD_rad = angleBCD * Math.PI / 180;  // 轉換為弧度
      const x2 = x1 + BC * Math.cos(angleBCD_rad);   // 計算 C 點的 x 坐標
      const y2 = y1 + BC * Math.sin(angleBCD_rad);   // 計算 C 點的 y 坐標

      // 顯示 C 點坐標
      document.getElementById("cOutput").value = `C點的坐標: (${x2.toFixed(2)}, ${y2.toFixed(2)})`;
    }
  </script>
</head>
<body>
  <h1>計算三角形BCD的角和C點坐標</h1>
  <label for="x1">請輸入 x1 坐標 (B點):</label>
  <input type="number" id="x1" step="any" required>
  <br><br>
  <label for="y1">請輸入 y1 坐標 (B點):</label>
  <input type="number" id="y1" step="any" required>
  <br><br>
  <button onclick="calculateTriangle()">計算 BD 距離, 內角和 C 點坐標</button>

  <h2>輸出結果:</h2>
  <label for="bdOutput">BD的距離:</label>
  <textarea id="bdOutput" rows="1" cols="40" readonly></textarea>
  <br><br>

  <label for="angleOutput">內角:</label>
  <textarea id="angleOutput" rows="3" cols="40" readonly></textarea>
  <br><br>

  <label for="cOutput">C點坐標:</label>
  <textarea id="cOutput" rows="1" cols="40" readonly></textarea>
</body>
</html>

已知兩點及兩內角，求第三個點的坐標：

代码：全选

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算第三个端点坐标</title>
    <script>
        function calculateThirdPoint() {
            // 获取输入的坐标和角度
            const x1 = parseFloat(document.getElementById("x1").value);
            const y1 = parseFloat(document.getElementById("y1").value);
            const x2 = parseFloat(document.getElementById("x2").value);
            const y2 = parseFloat(document.getElementById("y2").value);
            const angle = parseFloat(document.getElementById("angle").value); // 角度，单位为度

            // 将角度转换为弧度
            const angleRad = angle * Math.PI / 180;

            // 计算边AB的长度
            const distAB = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));

            // 根据角度和边长，使用三角函数来计算第三个点坐标
            // 计算第三个点C的坐标（假设角度在A点处）
            const x3 = x1 + distAB * Math.cos(angleRad);
            const y3 = y1 + distAB * Math.sin(angleRad);

            // 显示结果
            document.getElementById("result").innerHTML = `第三个端点的坐标是：(${x3.toFixed(3)}, ${y3.toFixed(3)})`;
        }
    </script>
</head>
<body>
    <h2>计算第三个端点坐标</h2>

    <label for="x1">A点 x 坐标:</label>
    <input type="number" id="x1" required><br>

    <label for="y1">A点 y 坐标:</label>
    <input type="number" id="y1" required><br>

    <label for="x2">B点 x 坐标:</label>
    <input type="number" id="x2" required><br>

    <label for="y2">B点 y 坐标:</label>
    <input type="number" id="y2" required><br>

    <label for="angle">角度 (°):</label>
    <input type="number" id="angle" required><br>

    <button onclick="calculateThirdPoint()">计算</button>

    <p id="result"></p>
</body>
</html>

ejsoon · 帖子由 **ejsoon** » 2025年 2月 16日 23:23

算斜率：

代码：全选

function calculateAngle(x, y) {
  // 固定點 (120, 0)
  const x1 = 120;
  const y1 = 0;
  
  // 計算斜率的變化量
  const dx = x - x1;
  const dy = y - y1;
  
  // 計算角度 (反正切, 角度單位為弧度)
  let angleRadians = Math.atan2(dy, dx);
  
  // 轉換為角度
  let angleDegrees = angleRadians * (180 / Math.PI);
  
  // 回傳角度
  return angleDegrees;
}

// 測試
console.log(calculateAngle(130, 50)); // 替換成你想測試的 x, y 值

由斜率算坐標：

代码：全选

function calculateNewPoint(x, y, distance, slope) {
  // 計算斜率方向的單位向量
  let dx = 1;  // 設定單位方向為1
  let dy = slope;  // 根據斜率設定y方向增量

  // 計算單位向量的長度
  let length = Math.sqrt(dx * dx + dy * dy);
  
  // 計算距離 d 對應的增量
  let scale = distance / length;
  
  // 計算新點坐標
  let newX1 = x + dx * scale;
  let newY1 = y + dy * scale;
  
  // 另一個點可以沿著反向方向計算
  let newX2 = x - dx * scale;
  let newY2 = y - dy * scale;

  return {
    point1: { x: newX1, y: newY1 },
    point2: { x: newX2, y: newY2 }
  };
}

// 測試範例
let result = calculateNewPoint(5, 5, 10, 2); // (x=5, y=5, 距離=10, 斜率=2)
console.log(result);

ejsoon · 帖子由 **ejsoon** » 2025年 2月 17日 12:29

由一點坐標，距離，角度，求另一個端點

代码：全选

function calculateNewPoint(x1, y1, distance, angle) {
    // 將角度轉換為弧度
    const angleInRadians = angle * Math.PI / 180;

    // 計算新座標
    const x2 = x1 + distance * Math.cos(angleInRadians);
    const y2 = y1 + distance * Math.sin(angleInRadians);

    return { x2, y2 };
}

// 範例：給定點(1, 1)，距離2，角度45°
const x1 = 1;
const y1 = 1;
const distance = 2;
const angle = 45;

const newPoint = calculateNewPoint(x1, y1, distance, angle);
console.log(newPoint);  // 輸出：{ x2: 2.414213562373095, y2: 2.414213562373095 }

已知兩點坐標，求它們與x軸的夾角

代码：全选

function calculateAngle(x1, y1, x2, y2) {
    // 計算 y 和 x 的差值
    let deltaY = y2 - y1;
    let deltaX = x2 - x1;
    
    // 使用 atan2 計算夾角（弧度）
    let angleInRadians = Math.atan2(deltaY, deltaX);
    
    // 將夾角轉換為角度
    let angleInDegrees = angleInRadians * (180 / Math.PI);
    
    return angleInDegrees;
}

// 示例：兩點(1, 2) 和 (4, 6)
let angle = calculateAngle(1, 2, 4, 6);
console.log("與x軸的夾角: " + angle + " 度");

ejsoon · 帖子由 **ejsoon** » 2025年 2月 17日 12:43

由一坐標,距離，一個一元二次方程，求另一端點坐標

代码：全选

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算兩個端點</title>
</head>
<body>
    <h2>計算一元二次方程的兩個端點</h2>

    <label for="a">a (斜率):</label>
    <input type="number" id="a" value="1"><br><br>

    <label for="b">b (截距):</label>
    <input type="number" id="b" value="0"><br><br>

    <label for="x0">x0:</label>
    <input type="number" id="x0" value="0"><br><br>

    <label for="y0">y0:</label>
    <input type="number" id="y0" value="0"><br><br>

    <label for="distance">距離 l:</label>
    <input type="number" id="distance" value="5"><br><br>

    <button onclick="calculateEndpoints()">計算端點</button>

    <h3>計算結果:</h3>
    <p id="result"></p>

    <script>
        function calculateEndpoints() {
            // 獲取輸入值
            let a = parseFloat(document.getElementById('a').value);
            let b = parseFloat(document.getElementById('b').value);
            let x0 = parseFloat(document.getElementById('x0').value);
            let y0 = parseFloat(document.getElementById('y0').value);
            let l = parseFloat(document.getElementById('distance').value);

            // 距離公式: l^2 = (x1 - x0)^2 + (ax1 + b - y0)^2
            // 展開並轉換為一元二次方程: A*x1^2 + B*x1 + C = 0

            let A = 1 + a*a;
            let B = -2*x0 - 2*a*(b - y0);
            let C = x0*x0 + (b - y0)*(b - y0) - l*l;

            // 計算二次方程的根
            let discriminant = B*B - 4*A*C;
            if (discriminant < 0) {
                document.getElementById('result').textContent = "沒有實數解。";
                return;
            }

            // 計算兩個根
            let x1_1 = (-B + Math.sqrt(discriminant)) / (2 * A);
            let x1_2 = (-B - Math.sqrt(discriminant)) / (2 * A);

            // 計算對應的 y1
            let y1_1 = a * x1_1 + b;
            let y1_2 = a * x1_2 + b;

            // 顯示結果
            document.getElementById('result').textContent = `兩個端點的坐標為：\n
            端點1: (x1, y1) = (${x1_1.toFixed(2)}, ${y1_1.toFixed(2)})\n
            端點2: (x1, y1) = (${x1_2.toFixed(2)}, ${y1_2.toFixed(2)})`;
        }
    </script>
</body>
</html>

看看chatgpt怎麼說

看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

算a_2的對應值

Re: 看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

Re: 看看chatgpt怎麼說

由一點坐標，距離，角度，求另一個端點

已知兩點坐標，求它們與x軸的夾角

Re: 看看chatgpt怎麼說

由一坐標,距離，一個一元二次方程，求另一端點坐標

在线用户