绘制和更新车速表指针

Question

我正在尝试使用 Python 中的 Tkinter Canvas 绘制速度计，但我的代码存在一些我似乎无法解决的问题。首先，这是我写的：

import tkinter as tk
from tkinter import ttk
import math

class DrawMeter(tk.Canvas):

    def __init__(self, parent, *args, **kwargs):
        tk.Canvas.__init__(self, parent, *args, **kwargs)
        self.config(bg = "grey")
        if (int(self['height']) * 2 > int(self['width'])):
            boxSide = int(self['width'])
        else:
            boxSide = int(self['height']) * 2
        self.boxX = boxSide / 2
        self.boxY = boxSide / 2
        self.boxRadius = int(0.40 * float(boxSide))
        self.start = 0
        self.end = 1

        self.drawBackground()
        self.drawTicks()
        self.drawNeedle()

    def drawBackground(self):
        bgColour = "black"
        self.create_arc((self.boxX - self.boxRadius,
                         self.boxY - self.boxRadius,
                         self.boxX * 4,
                         self.boxY * 4),
                        fill = bgColour, start = 90)

    def drawTicks(self):
        length = self.boxRadius / 8
        for deg in range(5, 85, 6):
            rad = math.radians(deg)
            self.Tick(rad, length)
        for deg in range(5, 91, 18):
            rad = math.radians(deg)
            self.Tick(rad, length * 2)

    def Tick(self, angle, length):
        cos = math.cos(angle)
        sin = math.sin(angle)
        radius = self.boxRadius * 2
        X = self.boxX * 2
        Y = self.boxY * 2
        self.create_line((X - radius * cos,
                          Y - radius * sin,
                          X - (radius - length) * cos,
                          Y - (radius - length) * sin),
                         fill = "white", width = 2)

    def drawText(self, start = 0, end = 100):
        interval = end / 5
        value = start
        length = self.boxRadius / 2
        for deg in range(5, 91, 18):
            rad = math.radians(deg)
            cos = math.cos(rad)
            sin = math.sin(rad)
            radius = self.boxRadius * 2
            self.create_text(self.boxX * 2 - (radius - length - 1) * cos,
                             self.boxY * 2 - (radius - length - 1) * sin,
                             text = str("{0:.1f}".format(value)),
                             fill = "white",
                             font = ("Arial", 12, "bold"))
            value = value + interval

    def setRange(self, start, end):
        self.start = start
        self.end = end
        self.drawText(start, end)

    def drawNeedle(self):
        X = self.boxX * 2
        Y = self.boxY * 2
        length = self.boxRadius - (self.boxRadius / 4)
        self.meterHand = self.create_line(X / 2, Y / 2, X + length, Y + length,
                                          fill = "red", width = 4)
        self.create_arc(X - 30, Y - 30, X + 30, Y + 30,
                        fill = "#c0c0c0", outline = "#c0c0c0", start = 90)

    def updateNeedle(self, value):
        length = self.boxRadius - (self.boxRadius / 4)
        deg = 80 * (value - self.start) / self.end - 180
        rad = math.radians(deg)
        self.coords(self.meterHand, self.boxX * 2, self.boxY * 2,
                    self.boxX + length * math.cos(rad),
                    self.boxY + length * math.sin(rad))

value = 0

def update_frame():
    global value
    if value < 1:
        value = value + 0.01
    print(value)
    meter.updateNeedle(value)
    container.after(200, update_frame)

root = tk.Tk()
container = tk.Frame(root)
container.pack()
meter = DrawMeter(container, height = 200, width = 200, bg = "red")
meter.setRange(0, 1)
meter.pack()
update_frame()
root.mainloop()

所以我遇到的问题是我的针正在屏幕上正确绘制和更新。当我启动程序时，指针从大约 0.2 左右开始，一直到大约 0.6，然后停止。我觉得我计算针位置的公式是错误的，但我不确定它是错误的。

我的设置方式是，取总值的百分比 (

value = self.start) / self.end

) 并将其乘以 80 度（因为我的车速表从 5 度标记开始到 85 度结束），然后减去180 这样数字就使数字顺时针转动，而不是逆时针转动。

我对画布对象的放置也可能会发生变化。我的尝试是在画布底部设置一个四分之一圆的速度计。但是，当您使用 Canvas

create_arc

函数时，它会在边界框的中心绘制弧线的右下角，这意味着您将其设为右下角，我需要通过边界框将宽度和高度加倍画布的。我想也许这也让我有点失望。

Answer 1

我的问题是我需要创建一个偏移值并将其添加到

Canvas.coords

调用中的所有四个点。

Answer 2

将 tkinter 导入为 tk 从 tkinter 导入 ttk 导入数学

DrawMeter 类（tk.Canvas）：

def __init__(self, parent, *args, **kwargs):
    tk.Canvas.__init__(self, parent, *args, **kwargs)
    self.config(bg = "grey")
    if (int(self['height']) * 2 > int(self['width'])):
        boxSide = int(self['width'])
    else:
        boxSide = int(self['height']) * 2
    self.boxX = boxSide / 2
    self.boxY = boxSide / 2
    self.boxRadius = int(0.50 * float(boxSide))
    self.start = 0
    self.end = 1

    self.drawBackground()
    self.drawTicks()
    self.drawNeedle()

def drawBackground(self):
    bgColour = "black"
    self.create_arc((self.boxX - self.boxRadius,
                     self.boxY - self.boxRadius,
                     self.boxX * 2,
                     self.boxY * 2),
                    fill = bgColour, start = 0, extent=180, style=tk.CHORD)

def drawTicks(self):
    length = self.boxRadius / 8
    for deg in range(5, 90, 3):
        rad = math.radians(deg)
        self.Tick(rad, length)
    for deg in range(5, 90, 18):
        rad = math.radians(deg)
        self.Tick(rad, length * 2)
    self.create_line(400, 0, 400, 100, fill="white", width=2)

def Tick(self, angle, length):
    cos = math.cos(angle)
    sin = math.sin(angle)
    radius = self.boxRadius
    X = self.boxX
    Y = self.boxY

    # Calculate the coordinates for the tick
    start_x = X + radius * cos
    start_y = Y + radius * sin
    end_x = X + (radius - length) * cos
    end_y = Y + (radius - length) * sin
    temp = self.boxX + self.boxY
    # Draw a line for the tick
    self.create_line(temp - start_x, temp - start_y, temp - end_x, temp - end_y, fill="white", width=2)
    self.create_line(start_x, temp - start_y, end_x, temp - end_y, fill="white", width=2)


def drawText(self, start = 0, end = 100):
    interval = (end/2) / 5
    value1 = start
    value2 = end
    length = self.boxRadius / 2
    for deg in range(5, 90, 18):
        rad = math.radians(deg)
        angle = rad
        cos = math.cos(angle)
        sin = math.sin(angle)
        radius = self.boxRadius
        X = self.boxX
        Y = self.boxY

        # Calculate the coordinates for the tick
        start_x = X + radius * cos
        start_y = Y + radius * sin
        end_x = X + (radius - length) * cos
        end_y = Y + (radius - length) * sin
        temp = 800

        self.create_text(temp - end_x, temp - end_y,
                         text = str("{0:.1f}".format(value1)),
                         fill = "white",
                         font = ("Arial", 12, "bold"))

        self.create_text(end_x, temp - end_y,
                         text = str("{0:.1f}".format(value2)),
                         fill = "white",
                         font = ("Arial", 12, "bold"))
        
        value1 = value1 + interval
        value2 = value2 - interval

def setRange(self, start, end):
    self.start = start
    self.end = end
    self.drawText(start, end)

def drawNeedle(self):
    X = self.boxX
    Y = self.boxY
    length = self.boxRadius - (self.boxRadius / 4)
    self.meterHand = self.create_line(X / 2, Y / 2, X, Y,
                                      fill = "red", width = 4)
    self.create_arc(X - 30, Y - 30, X + 30, Y + 30,
                    fill = "#c0c0c0", outline = "#c0c0c0", start = 0, extent=180, style=tk.CHORD)

def updateNeedle(self, value):
    length = self.boxRadius - (self.boxRadius / 4)
    deg = 80 * (value - self.start) / self.end - 180
    rad = math.radians(deg)
    self.coords(self.meterHand, self.boxX, self.boxY,
                self.boxX + length * math.cos(rad),
                self.boxY + length * math.sin(rad))

值 = 0

def update_frame(): 全球价值 如果值 < upper_range_val: value = value + increment_val meter.updateNeedle(value) container.after(200, update_frame)