You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Jupyter RISE(reveal.js)演示中实现可交互ipycanvas+ipywidgets

在RISE(reveal.js)演示中使用ipycanvas交互式画布的问题

我有一段代码在Jupyter Notebook/Lab单元格中运行完全正常:

from ipycanvas import Canvas
from ipywidgets import Button
from IPython.display import display

WIDTH = 200  # px
HEIGHT = 200  # px

# 创建带黑色边框的200x200画布
canvas = Canvas(width=WIDTH, height=HEIGHT)

# 给画布添加黑色边框
canvas.stroke_style = 'black'
canvas.stroke_rect(0, 0, WIDTH, HEIGHT)

# 存储点击位置的列表
clicked_positions = []

# 处理点击事件并绘制红点的函数
def handle_click(x, y):
    # 将点击位置加入列表
    clicked_positions.append((x, y))
    # 在点击位置绘制半径为3的红点
    canvas.fill_style = 'red'
    canvas.fill_circle(x, y, 3)

# 给画布绑定鼠标点击事件处理器
canvas.on_mouse_down(lambda x, y: handle_click(x, y))

# 用于显示点击位置的按钮
show_button = Button(description="显示点击位置")

# 显示点击位置的函数
def show_positions(b):
    print("点击位置:", clicked_positions)

show_button.on_click(show_positions)

# 显示画布和按钮
display(canvas, show_button)

IT WORKS!

但当我尝试在reveal.js/Jupyterlab_rise/RISE演示文稿中运行这段代码时,遇到了诸多问题。只有安装以下版本组合时,才能在演示中看到并点击画布:

python3.12 -m pip install notebook==6.5.4 ipywidgets==8.1.5 ipycanvas==0.11.0 rise==5.7.1

对应的Jupyter核心包版本如下:

>> python3.12 -m jupyter --version

Selected Jupyter core packages...
IPython          : 8.10.0
ipykernel        : 6.29.5
ipywidgets       : 8.1.5
jupyter_client   : 8.6.2
jupyter_core     : 5.7.2
jupyter_server   : 2.14.2
jupyterlab       : not installed
nbclient         : 0.10.0
nbconvert        : 7.16.4
nbformat         : 5.10.4
notebook         : 6.5.4
qtconsole        : not installed
traitlets        : 5.9.0

但这个版本组合在点击绘制几个点后仍会崩溃。

我需要在Jupyter的reveal.js演示中使用可交互画布,获取点击坐标并传递到下一个单元格,恳请提供帮助。如果有可正常运行的Jupyter Notebook/Lab + ipywidgets + reveal.js版本组合,烦请告知。

内容的提问来源于stack exchange,提问作者user2853437

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 15:57:04