Web Browser Engineering 学习笔记

Horizon_sea

已于 2024-04-29 20:30:21 修改

阅读量494

点赞数 5

文章标签：前端学习笔记

于 2024-04-25 19:16:10 首次发布

本文链接：https://blog.youkuaiyun.com/Ciel__bleu/article/details/138197150

版权

本文介绍了如何使用Tkinter库在Python中创建GUI应用，包括网页内容的布局、文本渲染、滚动功能以及处理HTTP请求和响应。还涵盖了HTML解析、自闭合标签处理以及使用SSL进行安全通信的相关技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站

https://browser.engineering/

Part 1

Method & Path & HTTP version & header & value

GET /index.html HTTP/1.0
Host: example.org
(blank line after the host line -> tells the host that you are done with headers.)

After the first line, each line contains a header, which has a name (like Host) and a value (like example.org)

server’s response

(start line)

HTTP version | Response code | Response description
HTTP/1.0 200 OK

graphical user interface

先使用thinter创建窗口

import tkinter
window = tkinter.Tk()
tkinter.mainloop()

# 这个循环大致类似于
# while True:
#   for evt in pendingEvents():
#       handleEvent(evt)
#   drawScreen()
# 看似是无限循环，实际由于线进程切换并非如此

可以使用thinter创建Canvas

WIDTH, HEIGHT = 800, 600
window = tkinter.Tk()
canvas = tkinter.Canvas(window, width=WIDTH, height=HEIGHT)
canvas.pack()

Laying out text

先通过split分割单词，再处理每个单词的位置

if isinstance(tok, Text):
    for word in tok.text.split():
       self.word(word)

Tk 中的坐标是 X 从左到右和 Y 从上到下（即屏幕右侧和下侧有更大的XY）
定义文字的长宽，记录文字位置，通过将坐标传入self.canvas.create_text实现布局

HSTEP, VSTEP = 13, 18
cursor_x, cursor_y = HSTEP, VSTEP
for c in text:
    self.canvas.create_text(cursor_x, cursor_y, text=c)
    cursor_x += HSTEP

self.canvas.create_text默认提供的坐标是文字中心，由于我们提供的坐标是左上（方便后续计算），需要是的anchor=‘w’

这里的速度会很慢，因此可以通过跳过绘制屏幕外的字符

for x, y, c in self.display_list:
    if y > self.scroll + HEIGHT: continue
    if y + self.VSTEP < self.scroll: continue
    self.canvas.create_text(x, y - self.scroll, text=c)

Scrolling text

定义一个屏幕坐标和页面坐标
通过window.bind函数记录当前下滚 or 右滑的距离

self.window.bind("<Down>", self.scrolldown)

每次通过canvas.delete删除当前界面然后遍历通过canvas.create_text创建文字

bi_times = tkinter.font.Font(
            family="Times",
            size=16,
            weight="bold",
            slant="italic",
        ) #这里是字体格式
self.canvas.delete("all")
canvas.create_text(x, y - self.scroll, text=c, font=bi_times)

Different size of text

可以通过tkinter.font.Font创建字体

bi_times = tkinter.font.Font(
            family="Times",
            size=16,
            weight="bold",
            slant="italic",
        )

并通过bi_times.metrics()测量字体尺寸

bi_times.measure("Hi!") # 31

利用font.metrics(“ascent”) 和 font.metrics(“descent

最低0.47元/天解锁文章