-
|
Hey there, I have a notebook for handwritten digit classification, and I want to allow the user to draw their own custom digit to classify it. To accomplish this, I use the events to "follow the mouse pointer." However, my current approach is too slow and laggy, so the canvas updates are not in real-time. This is my current approach: from ipycanvas import Canvas
from ipywidgets import Output
import math
canvas = Canvas(width=200, height=200)
canvas.stroke_rect(0, 0, 200, 200)
x_prev = 0
y_prev = 0
out = Output()
@out.capture()
def handle_mouse_move(x, y):
global x_prev
global y_prev
# My approach to prevent updates for every small movements
if (x - x_prev) ** 2 + (y - y_prev) ** 2 <= 2 ** 2:
return
canvas.begin_path();
canvas.move_to(x_prev, y_prev);
canvas.arc(x, y, 15, 0, math.pi * 2, False)
canvas.fill();
x_prev = x;
y_prev = y;
canvas.on_mouse_move(handle_mouse_move)
canvasAm I using the underlying HTML canvas API wrong, or do you have any other suggestions? Best regards, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments · 2 replies
-
|
Thanks for opening a discussion :) Some comments:
Your code becomes the following, and it seems to run faster than your first version: from ipycanvas import Canvas
from ipywidgets import Output
import math
canvas = Canvas(width=200, height=200)
canvas.stroke_rect(0, 0, 200, 200)
x_prev = 0
y_prev = 0
out = Output()
@out.capture()
def handle_mouse_move(x, y):
global x_prev
global y_prev
# My approach to prevent updates for every small movements
if (x - x_prev) ** 2 + (y - y_prev) ** 2 <= 2 ** 2:
return
canvas.fill_arc(x, y, 15, 0, math.pi * 2, False)
x_prev = x;
y_prev = y;
canvas.on_mouse_move(handle_mouse_move)
canvas |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for taking a look at my code! Indeed, it runs faster. However, I encountered the problem that moving too fast with the curser skips some gaps. |
Beta Was this translation helpful? Give feedback.
-
|
Instead of filling arcs, I use the method from ipycanvas import Canvas
from ipywidgets import Output
canvas = Canvas(width=400, height=400)
canvas.stroke_rect(0, 0, 400, 400)
canvas.line_width = 28
canvas.line_cap = "round"
x_prev = 0
y_prev = 0
out = Output()
@out.capture()
def handle_mouse_move(x, y):
global x_prev
global y_prev
canvas.begin_path();
canvas.move_to(x_prev, y_prev);
canvas.line_to(x, y)
canvas.stroke();
x_prev = x;
y_prev = y;
canvas.on_mouse_move(handle_mouse_move)
canvas |
Beta Was this translation helpful? Give feedback.
-
|
Nice! You can improve your code further with using from ipycanvas import Canvas
from ipywidgets import Output
canvas = Canvas(width=400, height=400)
canvas.stroke_rect(0, 0, 400, 400)
canvas.line_width = 28
canvas.line_cap = "round"
x_prev = 0
y_prev = 0
out = Output()
@out.capture()
def handle_mouse_move(x, y):
global x_prev
global y_prev
canvas.stroke_line(x_prev, y_prev, x, y)
x_prev = x;
y_prev = y;
canvas.on_mouse_move(handle_mouse_move)
canvas |
Beta Was this translation helpful? Give feedback.
Instead of filling arcs, I use the method
line_to(...)with a modified line width and cap.This enables "real-time" drawing without lags or gaps.