如何在Tcl/Tk中实现类OpenGL的网格坐标系相机功能？

Since Tcl/Tk's canvas doesn't have built-in "camera" controls like OpenGL's view/projection matrices, we can replicate this behavior by managing our own view state (center point and zoom level) and transforming grid coordinates to canvas pixels on the fly. This gives you full control over panning, zooming, and keeping your grid-aligned nodes properly positioned—even with fractional offsets.

Here's a complete, working example that matches your requirements:

wm title . "Grid Camera View"
canvas .canvas -bg white
pack .canvas -fill both -expand yes

# View state variables (similar to OpenGL view matrix parameters)
set view_center_x 3.0   ;# Initial center in grid coordinates (midpoint of 1-5)
set view_center_y 2.0   ;# Initial center in grid coordinates (midpoint of 1-3)
set zoom_level 50.0     ;# Pixels per grid unit (adjust base zoom here)
set canvas_width 800    ;# Initial canvas size
set canvas_height 600

# Define your nodes: {gridX gridY label} with fractional Y offsets
set nodes {
    {1.0 1.2 "1,1"}
    {2.0 1.3 "2,1"}
    {3.0 1.4 "3,1"}
    {4.0 1.5 "4,1"}
    {5.0 1.6 "5,1"}
    {1.0 2.1 "1,2"}
    {2.0 2.2 "2,2"}
    {3.0 2.3 "3,2"}
    {4.0 2.4 "4,2"}
    {5.0 2.5 "5,2"}
    {1.0 2.8 "1,3"}
    {2.0 2.9 "2,3"}
    {3.0 3.0 "3,3"}
    {4.0 3.1 "4,3"}
    {5.0 3.2 "5,3"}
}

# Convert grid coordinates to canvas pixels (handles Y-axis inversion)
proc grid_to_canvas {gx gy} {
    global view_center_x view_center_y zoom_level canvas_width canvas_height
    set cx [expr {($gx - $view_center_x) * $zoom_level + $canvas_width / 2.0}]
    # Canvas Y increases downward, so invert grid Y to match typical math coordinates
    set cy [expr {($view_center_y - $gy) * $zoom_level + $canvas_height / 2.0}]
    return [list $cx $cy]
}

# Redraw all elements based on current view state
proc redraw {} {
    global .canvas nodes view_center_x view_center_y zoom_level canvas_width canvas_height
    
    # Clear existing canvas content
    .canvas delete all
    
    # Calculate visible grid range to avoid drawing off-screen lines
    set half_width [expr {$canvas_width / (2.0 * $zoom_level)}]
    set half_height [expr {$canvas_height / (2.0 * $zoom_level)}]
    set min_gx [expr {$view_center_x - $half_width}]
    set max_gx [expr {$view_center_x + $half_width}]
    set min_gy [expr {$view_center_y - $half_height}]
    set max_gy [expr {$view_center_y + $half_height}]
    
    # Draw vertical grid lines (integer X positions)
    for {set gx [ceil $min_gx]} {$gx <= $max_gx} {incr gx} {
        lassign [grid_to_canvas $gx $min_gy] cx1 cy1
        lassign [grid_to_canvas $gx $max_gy] cx2 cy2
        .canvas create line $cx1 $cy1 $cx2 $cy2 -fill #cccccc
    }
    
    # Draw horizontal grid lines (integer Y positions)
    for {set gy [ceil $min_gy]} {$gy <= $max_gy} {incr gy} {
        lassign [grid_to_canvas $min_gx $gy] cx1 cy1
        lassign [grid_to_canvas $max_gx $gy] cx2 cy2
        .canvas create line $cx1 $cy1 $cx2 $cy2 -fill #cccccc
    }
    
    # Draw nodes with their fractional offsets
    foreach node $nodes {
        lassign $node gx gy label
        lassign [grid_to_canvas $gx $gy] cx cy
        
        # Draw node circle (scales with zoom)
        set radius [expr {$zoom_level * 0.3}]
        .canvas create oval [expr {$cx - $radius}] [expr {$cy - $radius}] \
            [expr {$cx + $radius}] [expr {$cy + $radius}] -fill blue -outline black
        
        # Draw label with a small offset above the node
        .canvas create text $cx [expr {$cy - $radius - 5}] -text $label -anchor center
    }
}

# Handle panning (click and drag)
set is_panning 0
set pan_start_x 0
set pan_start_y 0

.canvas bind <ButtonPress-1> {
    global is_panning pan_start_x pan_start_y
    set is_panning 1
    set pan_start_x %x
    set pan_start_y %y
}

.canvas bind <ButtonRelease-1> {
    global is_panning
    set is_panning 0
}

.canvas bind <Motion> {
    global is_panning pan_start_x pan_start_y view_center_x view_center_y zoom_level canvas_width canvas_height
    if {$is_panning} {
        # Calculate pixel delta from start position
        set dx [expr {%x - $pan_start_x}]
        set dy [expr {%y - $pan_start_y}]
        
        # Convert pixel delta to grid units (invert Y for canvas direction)
        set delta_gx [expr {- $dx / $zoom_level}]
        set delta_gy [expr {$dy / $zoom_level}]
        
        # Update view center
        set view_center_x [expr {$view_center_x + $delta_gx}]
        set view_center_y [expr {$view_center_y + $delta_gy}]
        
        # Update start position for next motion event
        set pan_start_x %x
        set pan_start_y %y
        
        # Redraw with new view
        redraw
    }
}

# Handle zoom with mouse wheel (cross-platform)
proc adjust_zoom {cx cy delta} {
    global zoom_level view_center_x view_center_y canvas_width canvas_height
    
    # Convert canvas mouse position to grid coordinates BEFORE zooming
    set gx [expr {($cx - $canvas_width/2.0)/$zoom_level + $view_center_x}]
    set gy [expr {$view_center_y - ($cy - $canvas_height/2.0)/$zoom_level}]
    
    # Adjust zoom level (clamp to reasonable bounds to avoid extreme values)
    set zoom_level [expr {$zoom_level * (1.0 + $delta * 0.1)}]
    set zoom_level [expr {max(10.0, min(200.0, $zoom_level))}]
    
    # Update view center so the mouse position stays on the same grid point
    set view_center_x [expr {$gx - ($cx - $canvas_width/2.0)/$zoom_level}]
    set view_center_y [expr {$gy + ($cy - $canvas_height/2.0)/$zoom_level}]
    
    # Redraw with new zoom
    redraw
}

.canvas bind <MouseWheel> {
    adjust_zoom %x %y [expr {%D / 120}] ;# Windows/Mac wheel delta
}

.canvas bind <Button-4> {
    adjust_zoom %x %y 1 ;# Linux scroll up
}

.canvas bind <Button-5> {
    adjust_zoom %x %y -1 ;# Linux scroll down
}

# Handle canvas resizing
.canvas bind <Configure> {
    global canvas_width canvas_height
    set canvas_width %w
    set canvas_height %h
    redraw
}

# Initial draw
redraw

Key Features Explained: #

• Coordinate Transformation: The grid_to_canvas function converts your grid-based coordinates to canvas pixels, handling the inverted Y-axis (since Tcl/Tk canvas Y increases downward).
• Redraw on Change: Instead of scaling existing canvas objects (which can cause blurriness), we clear and redraw everything whenever the view changes—this keeps lines and text crisp at any zoom level.
• Natural Panning: Click and drag to move the view center, just like dragging a camera around the scene.
• Mouse Wheel Zoom: Zoom in/out with the mouse wheel, and the point under your cursor stays fixed (a more intuitive behavior than zooming from the canvas center).
• Fractional Offsets: Nodes can have non-integer Y positions, which are handled correctly in the coordinate transformation.

Customization Tips: #

• Adjust zoom_level to change the initial zoom scale.
• Modify the node list to match your exact positions and labels.
• Change the grid line color (#cccccc) or node appearance (color, size) to fit your design.
• Adjust the zoom clamp values (10.0 and 200.0) to limit how far in/out users can zoom.

内容的提问来源于stack exchange，提问作者Andreas