我尝试在pyodide中使用Python turtle模块。这不是官方支持的，但我发现另一个StackOverflow answer建议使用Bathon的modified version。因此，我将Bathon的文件复制到一个新的目录结构中：
pyodide/
turtle/
src/
turtle/
__init__.py
svg.py
pyproject.toml字符串
我的pyproject.toml文件包含以下内容：
[build-system]
requires = ["hatchling"]
build-backend = "hatchling.build"
[project]
name = "turtle"
version = "0.0.1"型
我成功地用下面的脚本构建了一个轮子：
#!/bin/bash
pushd pyodide/turtle
python3 -m pip install --upgrade build
python3 -m build
popd型
然后，我成功地加载pyodide与turtle wheel使用以下HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pyodide</title>
<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
</head>
<body>
<textarea id="input" cols="80" rows="15">
import turtle
t = turtle.Turtle()
t.forward(100)
</textarea>
<br/>
<button id="run" onclick="run()" disabled>Run</button>
<pre id="output">Loading pyodide...</pre>
<div id="visual"></div>
<script type="text/javascript">
const runButton = document.getElementById("run");
const input = document.getElementById("input");
const output = document.getElementById("output");
let pyodide;
const main = async () => {
pyodide = await loadPyodide({
stdout: (text) => output.innerHTML += text + "\n",
});
runButton.disabled = false;
output.innerHTML = "";
};
main();
const run = async () => {
output.innerHTML = "";
try {
await pyodide.loadPackage("./turtle/dist/turtle-0.0.1-py2.py3-none-any.whl");
await pyodide.loadPackagesFromImports(input.value);
await pyodide.runPython(input.value);
} catch (error) {
console.log(error);
}
};
</script>
</body>
</html>型
我通过运行python -m http.server从Web服务器运行了上面的HTML。由于CORS浏览器的限制，这允许它读取.whl文件。
然而，我不确定如何在网页上实际输出SVG。我查看了Bathon源代码，但找不到这样做的方法。我能找到的最接近的方法是turtle.svg()，但当我从python调用它时，我在JavaScript控制台中收到以下错误：
TypeError：“pyodide.ffi.JsProxy”对象不可调用
我试着阅读关于pyodide Type Conversions的资料，但不明白我需要做什么。
是否可以将绘图上下文绑定到页面上的SVG，以便海龟在真实的时间内动画？或者只能使用Bathon turtle包渲染完成的SVG？是否有更简单的方法让pyodide和turtle在浏览器窗口中处理实时图形？
1条答案
按热度按时间s6fujrry1#
我是基于this web worker example计算出来的，我发现它使用了相同的Bathon turtle包。这些是我在python中需要的额外行：
字符串