在Pyodide中利用Basthon Turtle渲染动画SVG教程-Python教程-PHP中文网

在Pyodide中利用Basthon Turtle渲染动画SVG教程

DDD

发布： 2025-11-25 13:39:01

原创

762人浏览过

在pyodide中利用basthon turtle渲染动画svg教程

本教程旨在指导如何在Pyodide环境中，通过集成Basthon修改版的Turtle模块，实现在网页上渲染动态SVG图形。我们将详细介绍从构建自定义Python包到在浏览器中加载并运行Python代码，最终将Turtle绘制的动画实时输出为HTML页面的SVG元素的全过程，帮助开发者在Web端实现交互式图形编程。

1. 理解Pyodide与Python Turtle模块的兼容性挑战

Pyodide作为WebAssembly版的Python运行时，允许在浏览器中直接执行Python代码。然而，标准的Python turtle 模块依赖于Tkinter，这在浏览器环境中是不支持的。为了解决这一问题，社区中出现了基于SVG的 turtle 模块实现，例如Basthon项目中的版本，它能够将Turtle绘图指令转换为SVG输出。本教程将利用Basthon的这一实现，使其在Pyodide中工作。

2. 构建自定义Basthon Turtle Pyodide包

首先，我们需要获取Basthon Turtle模块的源代码，并将其打包成Pyodide可加载的Wheel文件。

2.1 获取Basthon Turtle源代码

从Basthon项目的仓库中获取 turtle 模块的 src/modules/turtle/turtle 目录下的所有文件，并按以下结构组织：

pyodide/
  turtle/
    src/
      turtle/
        __init__.py
        svg.py
    pyproject.toml

登录后复制

2.2 配置 pyproject.toml

在 pyodide/turtle 目录下创建 pyproject.toml 文件，内容如下：

[build-system]
requires = ["hatchling"]
build-backend = "hatchling.build"

[project]
name = "turtle"
version = "0.0.1"

登录后复制

这定义了项目的构建系统和基本元数据。

2.3 构建Wheel文件

使用以下Bash脚本来构建Wheel文件：

#!/bin/bash

pushd pyodide/turtle
python3 -m pip install --upgrade build hatchling
python3 -m build
popd

登录后复制

运行此脚本后，将在 pyodide/turtle/dist 目录下生成一个名为 turtle-0.0.1-py2.py3-none-any.whl 的Wheel文件。

3. 在Web页面中集成Pyodide与自定义Turtle模块

接下来，我们将创建一个HTML页面来加载Pyodide和我们刚刚构建的Turtle Wheel文件，并执行Python代码。

智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

查看详情

3.1 HTML结构

创建一个HTML文件（例如 index.html），包含Pyodide的加载脚本、一个文本区域用于输入Python代码、一个按钮触发执行，以及一个 div 元素用于显示Turtle绘制的SVG。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pyodide Turtle SVG</title>
    <!-- 引入Pyodide库 -->
    <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
    <style>
      body { font-family: sans-serif; margin: 20px; }
      textarea { width: 100%; max-width: 600px; margin-bottom: 10px; }
      #visual { border: 1px solid #ccc; width: 600px; height: 400px; overflow: hidden; }
    </style>
  </head>
  <body>
    <h1>Pyodide Turtle SVG 示例</h1>
    <textarea id="input" cols="80" rows="15">
import turtle
t = turtle.Turtle()
t.speed(0) # 最快速度
t.pensize(2)
t.pencolor("blue")

for i in range(36):
    t.forward(100)
    t.left(170)
    </pencolor>
    </textarea>

    <br/>
    <button id="run" onclick="run()" disabled>运行Python代码</button>

    <p>Pyodide加载中...</p>
    <div id="visual"></div> <!-- SVG输出区域 -->

    <script type="text/javascript">
      const runButton = document.getElementById("run");
      const input = document.getElementById("input");
      const visualDiv = document.getElementById("visual"); // 获取SVG输出区域

      let pyodide;

      // 初始化Pyodide
      const main = async () => {
        pyodide = await loadPyodide({
          // stdout: (text) => console.log(text), // 可以将Python的print输出到控制台
        });
        runButton.disabled = false;
        console.log("Pyodide加载完成。");
      };
      main();

      // 运行Python代码
      const run = async () => {
        visualDiv.innerHTML = ""; // 清空之前的SVG内容
        try {
          // 加载自定义的turtle wheel包
          await pyodide.loadPackage("./pyodide/turtle/dist/turtle-0.0.1-py2.py3-none-any.whl");
          // 加载Python代码中可能需要的其他包
          await pyodide.loadPackagesFromImports(input.value);
          // 执行Python代码
          await pyodide.runPython(input.value);

          // 关键步骤：在Python代码执行后，将Turtle绘制的SVG内容渲染到HTML页面
          // 这里假设Python代码中已经调用了 turtle.Screen().show_scene()
          // 并在Python中将结果返回给JS，或者直接操作DOM
          // 更优雅的方式是在Python代码中直接通过 `js` 模块操作DOM
        } catch (error) {
          console.error("Python代码执行出错:", error);
          visualDiv.innerHTML = `<p style="color:red;">错误: ${error.message}</p>`;
        }
      };
    </script>
  </body>
</html>

登录后复制

3.2 运行Web服务器

由于浏览器CORS（跨域资源共享）限制，直接打开 index.html 文件无法加载本地的 .whl 文件。你需要启动一个本地Web服务器。最简单的方法是在包含 index.html 和 pyodide 目录的根目录下运行Python的HTTP服务器：

python -m http.server

登录后复制

然后通过浏览器访问 http://localhost:8000/index.html。

4. 渲染动画SVG到页面

这是实现实时SVG动画的关键步骤。Basthon Turtle模块提供了一个 turtle.svg() 方法来获取当前绘图的SVG字符串，但直接在Python中调用它并尝试将其赋值给JavaScript对象会遇到类型转换问题。正确的做法是利用Pyodide的 js 模块，直接在Python中操作DOM。

4.1 核心Python代码

在你的Python脚本中，你需要添加以下几行来将Turtle的输出渲染到HTML元素中：

from js import document # 导入js模块，允许Python访问JavaScript的document对象

# ... (你的Turtle绘图代码) ...

# 确保场景可见，这对于Basthon Turtle的渲染很重要
turtle.Screen().show_scene()

# 获取SVG字符串并将其设置到HTML元素的innerHTML
document.getElementById("visual").innerHTML = turtle.svg()

登录后复制

4.2 完整Python示例代码

将上述核心代码整合到你的Python输入区域（<textarea id="input">）中：

import turtle
from js import document # 导入js模块

# 初始化Turtle
t = turtle.Turtle()
t.speed(0) # 设置最快速度以观察动画效果
t.pensize(2)
t.pencolor("blue")

# 绘制一个简单的图形，例如一个星形
for i in range(36):
    t.forward(100)
    t.left(170)

# 确保Turtle场景被激活并渲染
turtle.Screen().show_scene()

# 获取生成的SVG内容并将其插入到HTML页面中id为"visual"的元素
document.getElementById("visual").innerHTML = turtle.svg()

登录后复制

当你在浏览器中点击“运行Python代码”按钮时，Pyodide会执行这段Python代码。turtle.Screen().show_scene() 会准备好Turtle的渲染，而 document.getElementById("visual").innerHTML = turtle.svg() 则会把Turtle绘制的SVG内容作为HTML字符串插入到 <div id="visual"> 元素中。由于Basthon Turtle的SVG输出是动态的，它能够展示绘制过程中的动画效果。

5. 注意事项与总结

Basthon Turtle的选择： 标准Python turtle 模块无法在浏览器中直接运行。Basthon的 turtle 实现是针对Web环境优化的，它将绘图指令转换为SVG，从而可以在HTML页面中显示。
js 模块的使用： Pyodide提供了一个内置的 js 模块，允许Python代码直接访问全局JavaScript对象，例如 document。这是Python与Web页面DOM进行交互的关键。
CORS限制： 在本地开发时，务必通过HTTP服务器（如 python -m http.server）运行你的HTML文件，而不是直接打开文件路径，以避免浏览器CORS策略阻止Pyodide加载本地Wheel文件。
动画效果： turtle.Screen().show_scene() 确保了SVG动画的正确显示。Basthon Turtle在生成SVG时会包含必要的动画定义。
性能考量： 复杂的Turtle绘图可能会生成较大的SVG文件或消耗较多的CPU资源。在实际应用中，需要注意性能优化。