跳到主要内容

几何图形

Desmos Geometry 的使用请前往 Desmos Geometry，本文档是在 Docusaurus 或网页中使用 Desmos API 的教程。

开始​

如果你想在 Docusaurus 或网页绘制如下的精美图像，可以跟随教程，一步步实现。


第一步：绘图​

在 几何绘制 中绘制一个好看的几何图形，然后点击左下角“保存为JOSN文件”，下载后移动文件到合适位置，本教程复制到了“static/geo/json/desmos-geometry.json”中。

第二步：创建 HTML 文件​

复制以下 HTML 代码到文件中，如“static/geo/template/desmos-geometry.html”：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <script src="https://www.desmos.com/api/v1.11/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #1a1a1a;
    }
    #geometry {
      width: 100%;
      height: 100vh;
      border: none;
    }
  </style>
</head>
<body>
  <div id="geometry"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var elt = document.getElementById('geometry');
      if (!elt) {
        console.error("Element #geometry not found");
        return;
      }
      var geometry = Desmos.Geometry(elt, {
        showGrid: true,      
        showXAxis: true,     
        showYAxis: true,     
        lockViewport: false, 
        authorFeatures: true,
        showResetButtonOnGraphpaper: true,
        expressions: true,
        expressionsCollapsed: false,
        lockViewport: false,
        expressionsCollapsed: true,
      });
      fetch('/geo/json/desmos-geometry.json')
        .then(response => {
          return response.json();
        })
        .then(state => {
          try {
            geometry.setState(state);
            geometry.setDefaultState(state);
          } catch (error) {}
        })
    });
  </script>
</body>
</html>

将41行中的目录替换为json所在目录。

fetch('/geo/json/desmos-geometry.json')

第三步：插入代码块​

Markdown​

在 Markdown 中插入 iframe 嵌套第二步创建的网页：

<div style={{ borderRadius: '10px', overflow: 'hidden', aspectRatio: '3/2' }}>
  <iframe
    src="/geo/template/desmos-geometry.html"
    style={{ width: '100%', height: '100%', border: 'none' }}
  />
</div><br/>

网页​

在网页中插入 iframe 嵌套第二步创建的网页：

<div style="border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2;">
  <iframe
    src="/geo/template/desmos-geometry.html"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div><br/>

第四步：欣赏​


API​

使用此 API 需要 key，本文档使用的为开发环境密钥，如需生产，请到 Desmos API 中详细阅读相关事宜。