如何在Python Tkinter中于倾斜线段上绘制可滑动矩形？

以下是满足需求的完整Demo，支持三种线段类型（向右下、向左下、垂直），矩形可沿线段滑动且始终位于线段右侧（沿线段从起点到终点方向的右手侧）：

import tkinter as tk
import math

def calculate_rect_points(x1, y1, x2, y2, width, height, position):
    # 计算线段方向向量和长度
    dx = x2 - x1
    dy = y2 - y1
    segment_length = math.hypot(dx, dy)
    
    # 避免除以零（垂直线段情况）
    if segment_length == 0:
        return []
    
    # 沿线段的单位向量（从起点到终点）
    ux = dx / segment_length
    uy = dy / segment_length
    
    # 垂直于线段的右侧单位向量（右手定则）
    vx = -dy / segment_length
    vy = dx / segment_length
    
    # 计算锚点（矩形左角，在线段上的位置）
    px = x1 + position * dx
    py = y1 + position * dy
    
    # 计算矩形四个顶点
    point1 = (px, py)  # 左角（锚点）
    point2 = (px + width * vx, py + width * vy)  # 右角
    point3 = (point2[0] + height * ux, point2[1] + height * uy)  # 右下角
    point4 = (px + height * ux, py + height * uy)  # 左下角
    
    return [point1, point2, point3, point4]

def update_rectangle(val):
    # 获取滑动条的position值（0-1之间的比例）
    position = float(val) / 100
    # 计算矩形顶点
    rect_points = calculate_rect_points(x1, y1, x2, y2, rect_width, rect_height, position)
    # 删除旧矩形
    canvas.delete("rect")
    # 绘制新矩形
    canvas.create_polygon(rect_points, outline="red", fill="pink", tags="rect")

# 主窗口设置
root = tk.Tk()
root.title("滑动矩形Demo")

# Canvas设置
canvas = tk.Canvas(root, width=600, height=600, bg="white")
canvas.pack(pady=10)

# 线段参数（可修改为三种情况测试）
# 情况1：向右下的线段
x1, y1 = 100, 100
x2, y2 = 400, 400

# 情况2：向左下的线段
# x1, y1 = 400, 100
# x2, y2 = 100, 400

# 情况3：垂直线段
# x1, y1 = 300, 100
# x2, y2 = 300, 400

# 矩形参数
rect_width = 50
rect_height = 30

# 绘制基础线段
canvas.create_line(x1, y1, x2, y2, fill="blue", width=2)

# 滑动条控制position
slider = tk.Scale(root, from_=0, to=100, orient=tk.HORIZONTAL, command=update_rectangle)
slider.set(0)
slider.pack(pady=10, fill=tk.X, padx=20)

# 初始绘制矩形
update_rectangle(0)

root.mainloop()

关键逻辑说明 #

1. 向量计算：
   • 先计算线段的方向向量和单位向量，确定滑动方向
   • 通过右手定则计算垂直于线段的右侧单位向量，确保矩形始终位于线段右侧（沿起点到终点方向的右手侧）
2. 锚点定位：
   • position参数为0-1的比例值（滑动条0-100对应0-1），0时锚点与线段起点重合，1时与终点重合
   • 锚点坐标通过线段方向向量按比例计算得到
3. 矩形顶点计算：
   • 以锚点为起点，分别沿垂直右侧方向延伸width，沿线段方向延伸height，得到四个顶点
   • 用create_polygon绘制矩形（也可改用create_rectangle，但需要调整坐标计算方式）

使用说明 #

• 切换代码中的三种线段参数即可测试不同情况
• 修改rect_width和rect_height可调整矩形尺寸
• 拖动滑动条即可看到矩形沿线段滑动的效果

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