python - 绘制和更新车速表指针

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 对象的放置也可能不正确。我的尝试是在 Canvas 底部设置一个四分之一圆的速度计。但是，当您使用 Canvas create_arc 函数时，它会在边界框的中心绘制弧的右下角，这意味着您将其设为右下角，我需要通过边界框来制作 Canvas 宽度和高度的两倍。我想也许这也让我有点失望。

Answer 1

我的问题是我需要创建一个偏移值并将其添加到 Canvas.coords 调用中的所有四个点。