![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260801110831-6a6dd3afa3c6e.png\")
<\/p>\n\u672c\u9879\u76ee\u4f7f\u7528 Python + PySide6 \u5236\u4f5c\u4e86\u4e00\u4e2a\u5177\u6709\u4e92\u52a8\u6548\u679c\u7684\u544a\u767d\u7a97\u53e3\u3002\u5f53\u9f20\u6807\u9760\u8fd1\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u65f6，\u6309\u94ae\u4f1a\u81ea\u52a8\u8eb2\u5f00，\u5361\u901a\u8868\u60c5\u4e5f\u4f1a\u9010\u6e10\u751f\u6c14；\u5f53\u9f20\u6807\u9760\u8fd1\u201c\u613f\u610f\u201d\u6309\u94ae\u65f6，\u8868\u60c5\u4f1a\u53d8\u5f00\u5fc3\u3002\u70b9\u51fb\u201c\u613f\u610f\u201d\u540e，\u7a97\u53e3\u4f1a\u663e\u793a\u7231\u5fc3\u52a8\u753b\u3002\u9879\u76ee\u540c\u65f6\u63d0\u4f9b\u4e00\u4e2a\u65e0\u9700\u5b89\u88c5\u4f9d\u8d56\u3001\u53cc\u51fb\u5373\u53ef\u8fd0\u884c\u7684 HTML \u7248\u672c\u3002<\/p>\n<\/p>\n
\u4e00\u3001\u9879\u76ee\u6548\u679c<\/p>\n
\u8fd9\u4e2a\u5c0f\u9879\u76ee\u5e76\u4e0d\u662f\u4e00\u4e2a\u666e\u901a\u7684\u9759\u6001\u5f39\u7a97，\u800c\u662f\u52a0\u5165\u4e86\u591a\u79cd\u5b9e\u65f6\u4ea4\u4e92\u6548\u679c：<\/p>\n
– \u773c\u775b\u4f1a\u8ddf\u968f\u9f20\u6807\u79fb\u52a8；
\n– \u9f20\u6807\u9760\u8fd1\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u65f6，\u8868\u60c5\u9010\u6e10\u751f\u6c14；
\n– \u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u4f1a\u4e3b\u52a8\u8eb2\u907f\u9f20\u6807；
\n– \u70b9\u51fb\u201c\u4e0d\u613f\u610f\u201d\u540e，\u7a97\u53e3\u4f1a\u6296\u52a8\u5e76\u63d0\u793a\u201c\u70b9\u9519\u4e86，\u91cd\u6765\u201d；
\n– \u9f20\u6807\u9760\u8fd1\u201c\u613f\u610f\u201d\u6309\u94ae\u65f6，\u8868\u60c5\u4f1a\u9010\u6e10\u5f00\u5fc3；
\n– \u70b9\u51fb\u201c\u613f\u610f\u201d\u540e，\u6309\u94ae\u6587\u5b57\u6539\u53d8\u5e76\u51fa\u73b0\u4e0a\u6d6e\u7231\u5fc3；
\n– \u5728\u786e\u8ba4\u4e4b\u524d，\u684c\u9762\u7248\u4f1a\u963b\u6b62\u76f4\u63a5\u5173\u95ed\u6216\u6700\u5c0f\u5316\u7a97\u53e3；
\n– \u540c\u65f6\u63d0\u4f9b Python \u684c\u9762\u7248\u548c HTML \u7f51\u9875\u7248\u3002<\/p>\n
<\/p>\n
———————————————————\u521d\u59cb\u754c\u9762———————————————————-<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260801110831-6a6dd3afc5fda.png\")
<\/p>\n
——————————————————–\u4e0d\u613f\u610f\u754c\u9762———————————————————<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260801110831-6a6dd3afda3e4.png\")
<\/p>\n
——————————————————–\u613f\u610f\u540e\u754c\u9762———————————————————<\/p>\n<\/p>\n
\u4e8c\u3001\u4f7f\u7528\u5230\u7684\u6280\u672f<\/p>\n
>Python \u684c\u9762\u7248<\/p>\n
– Python 3
\n– PySide6
\n– QPainter \u81ea\u5b9a\u4e49\u7ed8\u56fe
\n– QTimer \u5b9a\u65f6\u5237\u65b0\u52a8\u753b
\n– \u9f20\u6807\u4f4d\u7f6e\u68c0\u6d4b
\n– \u8ddd\u79bb\u8ba1\u7b97\u4e0e\u7ebf\u6027\u63d2\u503c
\n– Qt \u4e8b\u4ef6\u5904\u7406<\/p>\n
>HTML \u7f51\u9875\u7248<\/p>\n
– HTML5
\n– CSS3
\n– JavaScript
\n– Canvas 2D \u7ed8\u56fe
\n– `requestAnimationFrame` \u52a8\u753b\u5faa\u73af
\n– DOM \u4e8b\u4ef6\u76d1\u542c<\/p>\n<\/p>\n
\u4e09\u3001\u9879\u76ee\u6587\u4ef6\u7ed3\u6784<\/p>\n
```text
\nconfession-project\/
\n\u251c\u2500 confession_reactive_window.py \u00a0 \u00a0# PySide6 \u684c\u9762\u7248
\n\u251c\u2500 confession_reactive_window.html \u00a0# HTML \u7f51\u9875\u7248
\n\u251c\u2500 requirements.txt \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 # Python \u4f9d\u8d56
\n\u2514\u2500 README.md \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 # \u9879\u76ee\u8bf4\u660e<\/p>\n<\/p>\n
\u56db\u3001\u8fd0\u884c Python \u684c\u9762\u7248<\/p>\n
1. \u786e\u8ba4 Python \u73af\u5883<\/p>\n
\u5728\u7ec8\u7aef\u4e2d\u6267\u884c：python –version<\/p>\n
\u5efa\u8bae\u4f7f\u7528 Python 3.9 \u53ca\u4ee5\u4e0a\u7248\u672c\u3002<\/p>\n
2. \u5b89\u88c5 PySide6
\npip install PySide6<\/p>\n
\u4e5f\u53ef\u4ee5\u4f7f\u7528\u9879\u76ee\u4e2d\u7684\u4f9d\u8d56\u6587\u4ef6：
\npip install -r requirements.txt<\/p>\n
3. \u542f\u52a8\u9879\u76ee<\/p>\n
\u8fdb\u5165\u4ee3\u7801\u6240\u5728\u76ee\u5f55，\u6267\u884c：
\npython confession_reactive_window.py<\/p>\n
\u5982\u679c Windows \u4e2d\u5b58\u5728\u591a\u4e2a Python，\u53ef\u4ee5\u5c1d\u8bd5：
\npy confession_reactive_window.py<\/p>\n<\/p>\n
\u4e94\u3001\u8fd0\u884c HTML \u7f51\u9875\u7248<\/p>\n
HTML \u7248\u672c\u4e0d\u9700\u8981\u5b89\u88c5 Python，\u4e5f\u4e0d\u9700\u8981\u914d\u7f6e\u670d\u52a1\u5668\u3002<\/p>\n
\u76f4\u63a5\u53cc\u51fb：
\nconfession_reactive_window.html<\/p>\n
\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u6253\u5f00\u9875\u9762\u3002\u5982\u679c\u76f4\u63a5\u6253\u5f00\u65f6\u6d4f\u89c8\u5668\u9650\u5236\u4e86\u90e8\u5206\u529f\u80fd，\u4e5f\u53ef\u4ee5\u5728\u5f53\u524d\u76ee\u5f55\u542f\u52a8\u4e00\u4e2a\u7b80\u5355\u670d\u52a1\u5668：
\npython -m http.server 8000<\/p>\n
\u7136\u540e\u8bbf\u95ee：
\nhttp:\/\/localhost:8000\/confession_reactive_window.html<\/p>\n<\/p>\n
\u516d\u3001\u6838\u5fc3\u5b9e\u73b0\u601d\u8def<\/p>\n
6.1 \u4f7f\u7528\u5b9a\u65f6\u5668\u6784\u5efa\u52a8\u753b\u5faa\u73af<\/p>\n
\u684c\u9762\u7248\u901a\u8fc7 `QTimer` \u6bcf\u9694\u7ea6 16 \u6beb\u79d2\u8c03\u7528\u4e00\u6b21\u52a8\u753b\u51fd\u6570：<\/p>\n
```python
\nself.timer = QTimer(self)
\nself.timer.timeout.connect(self.animate)
\nself.timer.start(16)
\n```<\/p>\n
16 \u6beb\u79d2\u5bf9\u5e94\u7684\u5237\u65b0\u9891\u7387\u5927\u7ea6\u662f 60 FPS\u3002\u6bcf\u6b21\u5237\u65b0\u65f6，\u7a0b\u5e8f\u4f1a\u4f9d\u6b21\u5b8c\u6210：<\/p>\n
1. \u83b7\u53d6\u5f53\u524d\u9f20\u6807\u4f4d\u7f6e；
\n2. \u8ba1\u7b97\u60c5\u7eea\u5f3a\u5ea6；
\n3. \u5224\u65ad\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u662f\u5426\u9700\u8981\u79fb\u52a8；
\n4. \u66f4\u65b0\u7231\u5fc3\u4f4d\u7f6e；
\n5. \u8c03\u7528 `update()` \u91cd\u65b0\u7ed8\u5236\u7a97\u53e3\u3002<\/p>\n
```python
\ndef animate(self):
\n\u00a0 \u00a0 self.tick_count += 1
\n\u00a0 \u00a0 if not self.accepted:
\n\u00a0 \u00a0 \u00a0 \u00a0 self.update_intensity()
\n\u00a0 \u00a0 \u00a0 \u00a0 self.move_no_button_if_needed()
\n\u00a0 \u00a0 else:
\n\u00a0 \u00a0 \u00a0 \u00a0 self.float_hearts()
\n\u00a0 \u00a0 self.update()
\n```<\/p>\n
\u8fd9\u79cd\u7ed3\u6784\u4e0e\u6e38\u620f\u4e2d\u7684\u201c\u66f4\u65b0\u72b6\u6001 + \u7ed8\u5236\u753b\u9762\u201d\u5faa\u73af\u975e\u5e38\u76f8\u4f3c\u3002<\/p>\n<\/p>\n
6.2 \u6839\u636e\u9f20\u6807\u8ddd\u79bb\u8ba1\u7b97\u201c\u751f\u6c14\u7a0b\u5ea6\u201d<\/p>\n
\u7a0b\u5e8f\u4f1a\u8ba1\u7b97\u9f20\u6807\u4e0e\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u4e2d\u5fc3\u70b9\u4e4b\u95f4\u7684\u6b27\u6c0f\u8ddd\u79bb：<\/p>\n
```python
\ncursor = self.mapFromGlobal(QCursor.pos())
\ncenter = self.no_button.geometry().center()
\ndx = cursor.x() – center.x()
\ndy = cursor.y() – center.y()
\ndistance = math.hypot(dx, dy)
\n```<\/p>\n
\u968f\u540e\u5c06\u8ddd\u79bb\u6620\u5c04\u4e3a 0～1 \u4e4b\u95f4\u7684\u60c5\u7eea\u503c：<\/p>\n
```python
\ntarget = clamp(1 – (distance – 25) \/ 160)
\nself.intensity += (target – self.intensity) * 0.18
\n```<\/p>\n
\u5176\u4e2d：<\/p>\n
– \u9f20\u6807\u8ddd\u79bb\u8d8a\u8fdc，`intensity` \u8d8a\u63a5\u8fd1 0；
\n– \u9f20\u6807\u8ddd\u79bb\u8d8a\u8fd1，`intensity` \u8d8a\u63a5\u8fd1 1；
\n– \u4f7f\u7528\u63d2\u503c\u800c\u4e0d\u662f\u76f4\u63a5\u8d4b\u503c，\u53ef\u4ee5\u8ba9\u8868\u60c5\u53d8\u5316\u66f4\u52a0\u5e73\u6ed1\u3002<\/p>\n
\u8fd9\u91cc\u7684\u66f4\u65b0\u516c\u5f0f\u53ef\u4ee5\u5199\u6210：<\/p>\n
```text
\n\u5f53\u524d\u503c = \u5f53\u524d\u503c + (\u76ee\u6807\u503c – \u5f53\u524d\u503c) \u00d7 \u5e73\u6ed1\u7cfb\u6570
\n```<\/p>\n
\u5b83\u662f\u4e00\u79cd\u975e\u5e38\u5e38\u7528\u7684\u7f13\u52a8\u65b9\u6cd5\u3002<\/p>\n<\/p>\n
6.3 \u9f20\u6807\u9760\u8fd1\u201c\u613f\u610f\u201d\u6309\u94ae\u65f6\u53d8\u5f00\u5fc3<\/p>\n
\u7a0b\u5e8f\u8fd8\u4f1a\u5355\u72ec\u8ba1\u7b97\u9f20\u6807\u4e0e\u201c\u613f\u610f\u201d\u6309\u94ae\u4e4b\u95f4\u7684\u8ddd\u79bb：<\/p>\n
```python
\nyes_center = self.yes_button.geometry().center()
\nyes_distance = math.hypot(
\n\u00a0 \u00a0 cursor.x() – yes_center.x(),
\n\u00a0 \u00a0 cursor.y() – yes_center.y()
\n)<\/p>\n
happy_target = clamp(1 – (yes_distance – 20) \/ 150)
\n```<\/p>\n
\u5f53\u9f20\u6807\u9760\u8fd1\u5de6\u4fa7\u6309\u94ae\u65f6，`happiness` \u4f1a\u589e\u52a0\u3002\u5634\u5df4\u7684\u4e8c\u6b21\u8d1d\u585e\u5c14\u66f2\u7ebf\u63a7\u5236\u70b9\u4f1a\u968f\u4e4b\u4e0b\u79fb，\u4ece\u800c\u5f62\u6210\u7b11\u8138\u3002<\/p>\n<\/p>\n
6.4 \u8ba9\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u8eb2\u5f00\u9f20\u6807<\/p>\n
\u9996\u5148\u6269\u5927\u6309\u94ae\u7684\u68c0\u6d4b\u533a\u57df：<\/p>\n
```python
\nrect = self.no_button.geometry().adjusted(-90, -70, 90, 70)
\n```<\/p>\n
\u5f53\u9f20\u6807\u8fdb\u5165\u8be5\u8303\u56f4\u65f6，\u7a0b\u5e8f\u4f1a\u51c6\u5907\u591a\u4e2a\u5019\u9009\u4f4d\u7f6e：<\/p>\n
```python
\ncandidates = [
\n\u00a0 \u00a0 QPointF(286, 300),
\n\u00a0 \u00a0 QPointF(330, 350),
\n\u00a0 \u00a0 QPointF(378, 302),
\n\u00a0 \u00a0 QPointF(250, 350),
\n\u00a0 \u00a0 QPointF(358, 334),
\n]
\n```<\/p>\n
\u968f\u540e\u9009\u62e9\u8ddd\u79bb\u9f20\u6807\u6700\u8fdc\u7684\u4f4d\u7f6e：<\/p>\n
```python
\nself.target_no_pos = max(
\n\u00a0 \u00a0 candidates,
\n\u00a0 \u00a0 key=lambda p: math.hypot(
\n\u00a0 \u00a0 \u00a0 \u00a0 p.x() + 55 – cursor.x(),
\n\u00a0 \u00a0 \u00a0 \u00a0 p.y() + 23 – cursor.y()
\n\u00a0 \u00a0 )
\n)
\n```<\/p>\n
\u8fd9\u6837\u53ef\u4ee5\u907f\u514d\u6309\u94ae\u968f\u673a\u79fb\u52a8\u5230\u9f20\u6807\u9644\u8fd1，\u4f7f\u8eb2\u907f\u6548\u679c\u66f4\u52a0\u81ea\u7136\u3002<\/p>\n
\u4e3a\u4e86\u8ba9\u6309\u94ae\u4e0d\u662f\u77ac\u95f4\u8df3\u8dc3，\u7a0b\u5e8f\u518d\u6b21\u4f7f\u7528\u63d2\u503c：<\/p>\n
```python
\nnext_pos = current + (self.target_no_pos – current) * 0.55
\nself.no_button.move(round(next_pos.x()), round(next_pos.y()))
\n```<\/p>\n
\u5f53\u9f20\u6807\u975e\u5e38\u63a5\u8fd1\u65f6，\u6309\u94ae\u4f1a\u76f4\u63a5\u79fb\u52a8\u5230\u76ee\u6807\u4f4d\u7f6e，\u4ee5\u514d\u88ab\u5feb\u901f\u70b9\u51fb\u3002<\/p>\n<\/p>\n
6.5 \u4f7f\u7528 QPainter \u7ed8\u5236\u52a8\u6001\u8868\u60c5<\/p>\n
\u6574\u4e2a\u5361\u901a\u8138\u5e76\u4e0d\u662f\u56fe\u7247，\u800c\u662f\u901a\u8fc7 `QPainter` \u5b9e\u65f6\u7ed8\u5236\u7684：<\/p>\n
```python
\ndef paintEvent(self, _event):
\n\u00a0 \u00a0 painter = QPainter(self)
\n\u00a0 \u00a0 painter.setRenderHint(QPainter.Antialiasing)
\n\u00a0 \u00a0 self.draw_background(painter)
\n\u00a0 \u00a0 self.draw_face(painter)
\n\u00a0 \u00a0 self.draw_hearts(painter)
\n```<\/p>\n
\u7ed8\u5236\u5185\u5bb9\u5305\u62ec：<\/p>\n
– \u6e10\u53d8\u80cc\u666f；
\n– \u692d\u5706\u5f62\u8138\u90e8；
\n– \u7709\u6bdb；
\n– \u773c\u775b\u548c\u9ad8\u5149；
\n– \u816e\u7ea2；
\n– \u5634\u5df4\u66f2\u7ebf；
\n– \u63a5\u53d7\u540e\u7684\u7231\u5fc3\u3002<\/p>\n
\u8868\u60c5\u4e3a\u4ec0\u4e48\u4f1a\u201c\u751f\u6c14\u201d？<\/p>\n
\u968f\u7740 `intensity` \u589e\u52a0：<\/p>\n
– \u8138\u90e8\u989c\u8272\u9010\u6e10\u53d8\u6df1；
\n– \u7709\u6bdb\u5185\u4fa7\u5411\u4e0b\u79fb\u52a8；
\n– \u773c\u775b\u9ad8\u5ea6\u7f29\u5c0f；
\n– \u816e\u7ea2\u900f\u660e\u5ea6\u589e\u52a0；
\n– \u5634\u5df4\u4ece\u5fae\u7b11\u53d8\u5e73，\u518d\u53d8\u6210\u5411\u4e0b\u5f2f\u66f2；
\n– \u5f3a\u5ea6\u8d85\u8fc7\u9608\u503c\u540e\u51fa\u73b0\u989d\u5916\u6587\u5b57\u63d0\u793a\u3002<\/p>\n
\u4f8b\u5982\u7709\u6bdb\u4f4d\u7f6e\u7684\u8ba1\u7b97：<\/p>\n
```python
\nbrow_outer_y = 78 + anger * 2
\nbrow_inner_y = 78 + anger * 18
\n```<\/p>\n
\u5f53 `anger` \u589e\u5927\u65f6，\u7709\u6bdb\u5185\u4fa7\u53d8\u5316\u66f4\u660e\u663e，\u56e0\u6b64\u4f1a\u5f62\u6210\u751f\u6c14\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n<\/p>\n
6.6 \u8ba9\u773c\u775b\u8ddf\u968f\u9f20\u6807<\/p>\n
\u7a0b\u5e8f\u8ba1\u7b97\u9f20\u6807\u76f8\u5bf9\u4e8e\u8138\u90e8\u4e2d\u5fc3\u7684\u65b9\u5411：<\/p>\n
```python
\ndx = cursor.x() – cx
\ndy = cursor.y() – cy
\ndistance = max(1, math.hypot(dx, dy))<\/p>\n
eye_dx = dx \/ distance * (5 – anger * 2)
\neye_dy = dy \/ distance * (4 – anger * 1.5)
\n```<\/p>\n
\u8fd9\u91cc\u5148\u5bf9\u65b9\u5411\u5411\u91cf\u8fdb\u884c\u5f52\u4e00\u5316，\u518d\u4e58\u4ee5\u4e00\u4e2a\u8f83\u5c0f\u7684\u79fb\u52a8\u8ddd\u79bb\u3002\u8fd9\u6837\u773c\u7403\u53ea\u4f1a\u5728\u6709\u9650\u8303\u56f4\u5185\u79fb\u52a8，\u4e0d\u4f1a\u8dd1\u51fa\u773c\u7736\u3002<\/p>\n<\/p>\n
6.7 \u70b9\u51fb\u6309\u94ae\u540e\u7684\u4ea4\u4e92<\/p>\n
\u70b9\u51fb\u201c\u613f\u610f\u201d<\/p>\n
```python
\ndef say_yes(self):
\n\u00a0 \u00a0 self.accepted = True
\n\u00a0 \u00a0 self.intensity = 0.0
\n\u00a0 \u00a0 self.title.setText("\u563f\u563f，\u90a3\u5c31\u8bf4\u597d\u5566！")
\n\u00a0 \u00a0 self.tip.setText("\u4eca\u5929\u5f00\u59cb\u5c31\u662f\u6700\u7279\u522b\u7684\u4eba")
\n\u00a0 \u00a0 self.no_button.hide()
\n\u00a0 \u00a0 self.yes_button.setText("\u559c\u6b22\u4f60")
\n\u00a0 \u00a0 self.hearts = []
\n```<\/p>\n
\u786e\u8ba4\u540e\u4f1a\u9690\u85cf\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae，\u5e76\u8fdb\u5165\u7231\u5fc3\u52a8\u753b\u72b6\u6001\u3002<\/p>\n
\u70b9\u51fb\u201c\u4e0d\u613f\u610f\u201d<\/p>\n
```python
\ndef say_no(self):
\n\u00a0 \u00a0 self.intensity = 1.0
\n\u00a0 \u00a0 self.tip.setText("\u70b9\u9519\u4e86，\u91cd\u6765！")
\n\u00a0 \u00a0 self.shake()
\n```<\/p>\n
\u7a97\u53e3\u6296\u52a8\u4f7f\u7528\u591a\u4e2a\u5ef6\u8fdf\u4efb\u52a1\u5b9e\u73b0：<\/p>\n
```python
\noffsets = [8, -8, 6, -6, 3, -3, 0]
\nfor index, offset in enumerate(offsets):
\n\u00a0 \u00a0 QTimer.singleShot(
\n\u00a0 \u00a0 \u00a0 \u00a0 index * 35,
\n\u00a0 \u00a0 \u00a0 \u00a0 lambda o=offset: self.move(start.x() + o, start.y())
\n\u00a0 \u00a0 )
\n```<\/p>\n
\u8fd9\u91cc\u5728 `lambda` \u53c2\u6570\u4e2d\u5199 `o=offset` \u5f88\u91cd\u8981，\u53ef\u4ee5\u907f\u514d\u5faa\u73af\u53d8\u91cf\u5ef6\u8fdf\u7ed1\u5b9a\u5bfc\u81f4\u6240\u6709\u4efb\u52a1\u4f7f\u7528\u540c\u4e00\u4e2a\u503c\u3002<\/p>\n<\/p>\n
6.8 \u7231\u5fc3\u4e0a\u6d6e\u52a8\u753b<\/p>\n
\u63a5\u53d7\u540e，\u7a0b\u5e8f\u5b9a\u671f\u521b\u5efa\u65b0\u7684\u7231\u5fc3：<\/p>\n
```python
\nself.hearts.append([
\n\u00a0 \u00a0 random.randint(160, 360),
\n\u00a0 \u00a0 185,
\n\u00a0 \u00a0 random.uniform(-0.8, 0.8),
\n\u00a0 \u00a0 random.randint(18, 28)
\n])
\n```<\/p>\n
\u6bcf\u6b21\u5237\u65b0\u65f6\u4fee\u6539\u7231\u5fc3\u7684\u4f4d\u7f6e\u548c\u5c3a\u5bf8：<\/p>\n
```python
\nheart[0] += heart[2]
\nheart[1] -= 1.8
\nheart[3] -= 0.18
\n```<\/p>\n
\u8fd9\u5206\u522b\u8868\u793a：<\/p>\n
– \u6c34\u5e73\u65b9\u5411\u4ea7\u751f\u8f7b\u5fae\u6f02\u79fb；
\n– \u7eb5\u5750\u6807\u4e0d\u65ad\u51cf\u5c0f，\u5b9e\u73b0\u5411\u4e0a\u79fb\u52a8；
\n– \u5b57\u53f7\u9010\u6e10\u51cf\u5c0f；
\n– \u8d85\u51fa\u8303\u56f4\u540e\u4ece\u5217\u8868\u4e2d\u5220\u9664\u3002<\/p>\n<\/p>\n
6.9 \u963b\u6b62\u5173\u95ed\u548c\u6700\u5c0f\u5316<\/p>\n
\u684c\u9762\u7248\u91cd\u5199\u4e86 `closeEvent`：<\/p>\n
```python
\ndef closeEvent(self, event):
\n\u00a0 \u00a0 if self.accepted:
\n\u00a0 \u00a0 \u00a0 \u00a0 event.accept()
\n\u00a0 \u00a0 \u00a0 \u00a0 return<\/p>\n
\u00a0 \u00a0 event.ignore()
\n\u00a0 \u00a0 self.intensity = 1.0
\n\u00a0 \u00a0 self.tip.setText("\u5148\u70b9\u613f\u610f\u624d\u53ef\u4ee5\u5173\u95ed")
\n\u00a0 \u00a0 self.shake()
\n```<\/p>\n
\u5728\u7528\u6237\u70b9\u51fb\u201c\u613f\u610f\u201d\u4e4b\u524d，\u5173\u95ed\u8bf7\u6c42\u4f1a\u88ab\u5ffd\u7565\u3002<\/p>\n
\u9879\u76ee\u8fd8\u76d1\u542c\u7a97\u53e3\u72b6\u6001\u53d8\u5316，\u5728\u6700\u5c0f\u5316\u65f6\u6062\u590d\u7a97\u53e3\u3002\u8fd9\u4e2a\u8bbe\u8ba1\u9002\u5408\u7528\u4e8e\u8da3\u5473\u6f14\u793a，\u4f46\u5b9e\u9645\u5206\u4eab\u65f6\u5e94\u63d0\u524d\u544a\u77e5\u5bf9\u65b9，\u5e76\u4fdd\u7559\u660e\u786e\u7684\u9000\u51fa\u65b9\u5f0f，\u907f\u514d\u5f71\u54cd\u6b63\u5e38\u4f7f\u7528\u3002<\/p>\n<\/p>\n
\u4e03\u3001HTML \u7248\u672c\u7684\u5b9e\u73b0\u5dee\u5f02<\/p>\n
\u7f51\u9875\u7248\u672c\u4e0e\u684c\u9762\u7248\u7684\u4ea4\u4e92\u903b\u8f91\u57fa\u672c\u4e00\u81f4，\u4f46\u5b9e\u73b0\u65b9\u5f0f\u4e0d\u540c：<\/p>\n
| \u529f\u80fd | PySide6 \u7248\u672c | HTML \u7248\u672c |
\n|—|—|—|
\n| \u56fe\u5f62\u7ed8\u5236 | QPainter | Canvas 2D |
\n| \u52a8\u753b\u5237\u65b0 | QTimer | requestAnimationFrame |
\n| \u9f20\u6807\u4f4d\u7f6e | QCursor | mousemove \u4e8b\u4ef6 |
\n| \u6309\u94ae\u79fb\u52a8 | QWidget.move | \u4fee\u6539 CSS left\/top |
\n| \u7231\u5fc3\u52a8\u753b | QPainter \u7ed8\u5236 | \u52a8\u6001\u521b\u5efa DOM \u5143\u7d20 |
\n| \u5173\u95ed\u63d0\u793a | closeEvent | beforeunload |<\/p>\n
HTML \u52a8\u753b\u5faa\u73af\u5982\u4e0b：<\/p>\n
```javascript
\nfunction loop() {
\n\u00a0 updateEmotion();
\n\u00a0 moveNoButton();
\n\u00a0 draw();
\n\u00a0 requestAnimationFrame(loop);
\n}<\/p>\n
loop();
\n```<\/p>\n
`requestAnimationFrame` \u4f1a\u5728\u6d4f\u89c8\u5668\u51c6\u5907\u4e0b\u4e00\u5e27\u753b\u9762\u65f6\u8c03\u7528\u56de\u8c03\u51fd\u6570，\u6bd4\u56fa\u5b9a\u65f6\u95f4\u95f4\u9694\u66f4\u9002\u5408\u7f51\u9875\u52a8\u753b\u3002<\/p>\n
\u9700\u8981\u6ce8\u610f：\u4e0d\u540c\u6d4f\u89c8\u5668\u5bf9\u79bb\u5f00\u9875\u9762\u63d0\u793a\u7684\u5904\u7406\u65b9\u5f0f\u4e0d\u540c，\u6d4f\u89c8\u5668\u53ef\u80fd\u53ea\u663e\u793a\u7edf\u4e00\u63d0\u793a，\u800c\u4e0d\u4f1a\u663e\u793a\u4ee3\u7801\u4e2d\u81ea\u5b9a\u4e49\u7684\u6587\u5b57\u3002<\/p>\n<\/p>\n
\u516b\u3001\u5e38\u89c1\u95ee\u9898<\/p>\n
1. \u63d0\u793a `No module named 'PySide6'`<\/p>\n
\u8bf4\u660e\u5f53\u524d Python \u73af\u5883\u6ca1\u6709\u5b89\u88c5 PySide6：<\/p>\n
```bash
\npython -m pip install PySide6
\n```<\/p>\n
\u5b89\u88c5\u540e\u91cd\u65b0\u8fd0\u884c\u3002<\/p>\n
2. \u5df2\u5b89\u88c5 PySide6，\u8fd0\u884c\u65f6\u4ecd\u7136\u62a5\u9519<\/p>\n
\u53ef\u80fd\u662f `pip` \u548c `python` \u5bf9\u5e94\u7684\u4e0d\u662f\u540c\u4e00\u4e2a\u73af\u5883\u3002\u6267\u884c：<\/p>\n
```bash
\npython -m pip show PySide6
\n```<\/p>\n
\u5982\u679c\u6ca1\u6709\u8f93\u51fa，\u518d\u6267\u884c：<\/p>\n
```bash
\npython -m pip install PySide6
\n```<\/p>\n
3. \u53cc\u51fb Python \u6587\u4ef6\u4e00\u95ea\u800c\u8fc7<\/p>\n
\u4e0d\u8981\u76f4\u63a5\u53cc\u51fb，\u5efa\u8bae\u5728\u7ec8\u7aef\u8fd0\u884c：<\/p>\n
```bash
\npython confession_reactive_window.py
\n```<\/p>\n
\u8fd9\u6837\u53ef\u4ee5\u770b\u5230\u5177\u4f53\u62a5\u9519\u4fe1\u606f\u3002<\/p>\n
4. \u4e2d\u6587\u5b57\u4f53\u663e\u793a\u5f02\u5e38<\/p>\n
\u9879\u76ee\u9ed8\u8ba4\u4f7f\u7528\u201cMicrosoft YaHei UI\u201d\u3002\u5982\u679c\u7cfb\u7edf\u4e2d\u6ca1\u6709\u8be5\u5b57\u4f53，\u53ef\u4ee5\u6539\u4e3a：<\/p>\n
```python
\nQFont("SimHei", 18, QFont.Bold)
\n```<\/p>\n
Linux \u4e0b\u4e5f\u53ef\u4ee5\u6539\u6210\u7cfb\u7edf\u4e2d\u5df2\u5b89\u88c5\u7684\u4e2d\u6587\u5b57\u4f53\u3002<\/p>\n
5. HTML \u9875\u9762\u53ef\u4ee5\u76f4\u63a5\u53d1\u7ed9\u522b\u4eba\u5417？<\/p>\n
\u53ef\u4ee5\u3002HTML \u6587\u4ef6\u5df2\u7ecf\u5305\u542b CSS \u548c JavaScript，\u4e0d\u4f9d\u8d56\u5176\u4ed6\u672c\u5730\u6587\u4ef6\u3002\u5bf9\u65b9\u4e0b\u8f7d\u540e\u53cc\u51fb\u5373\u53ef\u6253\u5f00\u3002<\/p>\n
6. \u53ef\u4ee5\u6253\u5305\u6210 EXE \u5417？<\/p>\n
\u53ef\u4ee5\u4f7f\u7528 PyInstaller：<\/p>\n
```bash
\npip install pyinstaller
\npyinstaller –onefile –windowed confession_reactive_window.py
\n```<\/p>\n
\u751f\u6210\u7ed3\u679c\u4f4d\u4e8e：<\/p>\n
```text
\ndist\/confession_reactive_window.exe
\n```<\/p>\n
\u5982\u679c\u60f3\u8bbe\u7f6e\u56fe\u6807：<\/p>\n
```bash
\npyinstaller –onefile –windowed –icon=app.ico confession_reactive_window.py
\n```<\/p>\n<\/p>\n
\u4e5d\u3001\u53ef\u4ee5\u7ee7\u7eed\u6269\u5c55\u7684\u529f\u80fd<\/p>\n
\u8fd9\u4e2a\u9879\u76ee\u8fd8\u53ef\u4ee5\u7ee7\u7eed\u52a0\u5165：<\/p>\n
1. \u80cc\u666f\u97f3\u4e50\u4e0e\u97f3\u6548；
\n2. \u81ea\u5b9a\u4e49\u59d3\u540d\u548c\u544a\u767d\u6587\u5b57；
\n3. \u8f93\u5165\u6846\u751f\u6210\u4e13\u5c5e\u7248\u672c；
\n4. \u66f4\u591a\u8868\u60c5\u72b6\u6001，\u4f8b\u5982\u5bb3\u7f9e\u3001\u60ca\u8bb6\u3001\u59d4\u5c48；
\n5. \u7c92\u5b50\u70df\u82b1\u52a8\u753b；
\n6. \u8bb0\u5f55\u6309\u94ae\u88ab\u8eb2\u907f\u7684\u6b21\u6570；
\n7. \u624b\u673a\u7aef\u89e6\u6478\u9002\u914d；
\n8. PyInstaller \u4e00\u952e\u6253\u5305；
\n9. \u5c06 HTML \u90e8\u7f72\u5230 GitHub Pages；
\n10. \u751f\u6210\u4e8c\u7ef4\u7801\u4f9b\u624b\u673a\u626b\u7801\u6253\u5f00\u3002<\/p>\n<\/p>\n
\u5341\u3001\u9879\u76ee\u603b\u7ed3<\/p>\n
\u8fd9\u4e2a\u9879\u76ee\u867d\u7136\u4f53\u91cf\u4e0d\u5927，\u4f46\u6db5\u76d6\u4e86 GUI \u548c\u524d\u7aef\u52a8\u753b\u4e2d\u7684\u591a\u4e2a\u57fa\u7840\u77e5\u8bc6\u70b9：<\/p>\n
– \u9f20\u6807\u4ea4\u4e92；
\n– \u52a8\u753b\u5faa\u73af；
\n– \u8ddd\u79bb\u8ba1\u7b97；
\n– \u5e73\u6ed1\u63d2\u503c；
\n– \u81ea\u5b9a\u4e49\u7ed8\u56fe；
\n– \u7a97\u53e3\u4e8b\u4ef6；
\n– DOM \u64cd\u4f5c；
\n– Canvas \u7ed8\u56fe；
\n– \u7b80\u5355\u72b6\u6001\u673a\u8bbe\u8ba1\u3002<\/p>\n
\u76f8\u6bd4\u53ea\u4f7f\u7528\u9759\u6001\u56fe\u7247，\u8fd9\u79cd\u5b8c\u5168\u901a\u8fc7\u4ee3\u7801\u7ed8\u5236\u5e76\u5b9e\u65f6\u53d8\u5316\u7684\u8868\u60c5\u66f4\u6709\u4e92\u52a8\u611f，\u4e5f\u5f88\u9002\u5408\u4f5c\u4e3a Python GUI\u3001PySide6 \u6216 JavaScript Canvas \u7684\u5165\u95e8\u7ec3\u4e60\u3002<\/p>\n
\u5982\u679c\u8fd9\u7bc7\u6587\u7ae0\u5bf9\u4f60\u6709\u5e2e\u52a9，\u6b22\u8fce\u70b9\u8d5e\u3001\u6536\u85cf\u548c\u8bc4\u8bba\u3002\u540e\u7eed\u8fd8\u53ef\u4ee5\u7ee7\u7eed\u5c1d\u8bd5\u589e\u52a0\u97f3\u4e50\u3001\u914d\u7f6e\u9875\u9762\u3001EXE \u6253\u5305\u548c\u5728\u7ebf\u90e8\u7f72\u529f\u80fd\u3002<\/p>\n<\/p>\n
\u9644\u5f55：<\/p>\n
-\u9879\u76ee\u5b8c\u6574\u4ee3\u7801<\/p>\n
import math
\nimport random
\nimport sys<\/p>\n
from PySide6.QtCore import QEvent, QPointF, QRectF, Qt, QTimer
\nfrom PySide6.QtGui import QColor, QCursor, QFont, QLinearGradient, QPainter, QPainterPath, QPen, QRadialGradient
\nfrom PySide6.QtWidgets import QApplication, QLabel, QPushButton, QWidget<\/p>\n
def clamp(value, low=0.0, high=1.0):
\n return max(low, min(high, value))<\/p>\n
class ReactiveConfessionWindow(QWidget):
\n def __init__(self):
\n super().__init__()
\n self.setWindowTitle("\u4e00\u4e2a\u5c0f\u95ee\u9898")
\n self.setFixedSize(520, 420)
\n self.setStyleSheet("background: #fff4f8;")<\/p>\n
self.intensity = 0.0
\n self.happiness = 0.0
\n self.target_no_pos = QPointF(314, 328)
\n self.hearts = []
\n self.accepted = False
\n self.tick_count = 0<\/p>\n
self.title = QLabel("\u53ef\u4ee5\u5ac1\u7ed9\u6211\u561b？", self)
\n self.title.setGeometry(0, 210, 520, 38)
\n self.title.setAlignment(Qt.AlignCenter)
\n self.title.setStyleSheet("color: #3a2830; background: transparent;")
\n self.title.setFont(QFont("Microsoft YaHei UI", 18, QFont.Bold))<\/p>\n
self.tip = QLabel("\u4e0d\u8981\u9760\u8fd1\u53f3\u8fb9，\u8868\u60c5\u4f1a\u751f\u6c14", self)
\n self.tip.setGeometry(0, 250, 520, 28)
\n self.tip.setAlignment(Qt.AlignCenter)
\n self.tip.setStyleSheet("color: #9b5a70; background: transparent;")
\n self.tip.setFont(QFont("Microsoft YaHei UI", 10))<\/p>\n
self.yes_button = QPushButton("\u613f\u610f", self)
\n self.yes_button.setGeometry(120, 318, 110, 46)
\n self.yes_button.clicked.connect(self.say_yes)
\n self.yes_button.setStyleSheet(
\n """
\n QPushButton {
\n border: 0;
\n border-radius: 20px;
\n background: #ff7fa3;
\n color: white;
\n font: bold 15px "Microsoft YaHei UI";
\n }
\n QPushButton:hover { background: #ff5f8e; }
\n """
\n )<\/p>\n
self.no_button = QPushButton("\u4e0d\u613f\u610f", self)
\n self.no_button.setGeometry(314, 318, 110, 46)
\n self.no_button.clicked.connect(self.say_no)
\n self.no_button.setStyleSheet(
\n """
\n QPushButton {
\n border: 2px solid #ffc3d2;
\n border-radius: 20px;
\n background: white;
\n color: #6a3e4d;
\n font: bold 15px "Microsoft YaHei UI";
\n }
\n QPushButton:hover { background: #fff0f5; }
\n """
\n )<\/p>\n
self.timer = QTimer(self)
\n self.timer.timeout.connect(self.animate)
\n self.timer.start(16)<\/p>\n
def animate(self):
\n self.tick_count += 1
\n if not self.accepted:
\n self.update_intensity()
\n self.move_no_button_if_needed()
\n else:
\n self.float_hearts()
\n self.update()<\/p>\n
def update_intensity(self):
\n cursor = self.mapFromGlobal(QCursor.pos())
\n center = self.no_button.geometry().center()
\n dx = cursor.x() – center.x()
\n dy = cursor.y() – center.y()
\n distance = math.hypot(dx, dy)
\n target = clamp(1 – (distance – 25) \/ 160)
\n self.intensity += (target – self.intensity) * 0.18<\/p>\n
yes_center = self.yes_button.geometry().center()
\n yes_distance = math.hypot(cursor.x() – yes_center.x(), cursor.y() – yes_center.y())
\n happy_target = clamp(1 – (yes_distance – 20) \/ 150)
\n if self.intensity > 0.15:
\n happy_target *= 0.25
\n self.happiness += (happy_target – self.happiness) * 0.16<\/p>\n
if self.intensity > 0.78:
\n self.tip.setText("\u4e0d\u8bb8\u9760\u8fd1\u90a3\u4e2a\u6309\u94ae！")
\n self.tip.setStyleSheet("color: #b00020; background: transparent;")
\n elif self.intensity > 0.35:
\n self.tip.setText("\u4f60\u662f\u4e0d\u662f\u60f3\u70b9\u53f3\u8fb9？")
\n self.tip.setStyleSheet("color: #d9480f; background: transparent;")
\n else:
\n self.tip.setText("\u4e0d\u51c6\u9760\u8fd1\u53f3\u8fb9，\u8868\u60c5\u4f1a\u751f\u6c14\u751f\u6c14")
\n self.tip.setStyleSheet("color: #9b5a70; background: transparent;")<\/p>\n
def move_no_button_if_needed(self):
\n cursor = self.mapFromGlobal(QCursor.pos())
\n rect = self.no_button.geometry().adjusted(-90, -70, 90, 70)
\n if rect.contains(cursor):
\n candidates = [
\n QPointF(286, 300),
\n QPointF(330, 350),
\n QPointF(378, 302),
\n QPointF(250, 350),
\n QPointF(358, 334),
\n ]
\n self.target_no_pos = max(candidates, key=lambda p: math.hypot(p.x() + 55 – cursor.x(), p.y() + 23 – cursor.y()))<\/p>\n
current = QPointF(self.no_button.x(), self.no_button.y())
\n distance_to_cursor = math.hypot(current.x() + 55 – cursor.x(), current.y() + 23 – cursor.y())
\n if distance_to_cursor < 95:
\n next_pos = self.target_no_pos
\n else:
\n next_pos = current + (self.target_no_pos – current) * 0.55
\n self.no_button.move(round(next_pos.x()), round(next_pos.y()))<\/p>\n
def say_yes(self):
\n self.accepted = True
\n self.intensity = 0.0
\n self.title.setText("\u563f\u563f，\u90a3\u5c31\u8bf4\u597d\u5566！")
\n self.tip.setText("\u4eca\u5929\u5f00\u59cb\u5c31\u662f\u6700\u7279\u522b\u7684\u4eba")
\n self.tip.setStyleSheet("color: #d6336c; background: transparent;")
\n self.no_button.hide()
\n self.yes_button.setText("\u559c\u6b22\u4f60")
\n self.hearts = []<\/p>\n
def say_no(self):
\n self.intensity = 1.0
\n self.tip.setText("\u70b9\u9519\u4e86，\u91cd\u6765！")
\n self.shake()<\/p>\n
def shake(self):
\n start = self.pos()
\n offsets = [8, -8, 6, -6, 3, -3, 0]
\n for index, offset in enumerate(offsets):
\n QTimer.singleShot(index * 35, lambda o=offset: self.move(start.x() + o, start.y()))<\/p>\n
def float_hearts(self):
\n if self.tick_count % 8 == 0:
\n self.hearts.append([random.randint(160, 360), 185, random.uniform(-0.8, 0.8), random.randint(18, 28)])
\n next_hearts = []
\n for heart in self.hearts:
\n heart[0] += heart[2]
\n heart[1] -= 1.8
\n heart[3] -= 0.18
\n if heart[1] > 20 and heart[3] > 4:
\n next_hearts.append(heart)
\n self.hearts = next_hearts<\/p>\n
def paintEvent(self, _event):
\n painter = QPainter(self)
\n painter.setRenderHint(QPainter.Antialiasing)
\n self.draw_background(painter)
\n self.draw_face(painter)
\n self.draw_hearts(painter)<\/p>\n
def draw_background(self, p):
\n gradient = QLinearGradient(0, 0, 0, self.height())
\n gradient.setColorAt(0, QColor("#fff7fb"))
\n gradient.setColorAt(1, QColor("#ffeaf1"))
\n p.fillRect(self.rect(), gradient)<\/p>\n
def draw_face(self, p):
\n anger = self.intensity
\n cx, cy = 260, 116
\n face_w = 154 + anger * 8
\n face_h = 142 – anger * 4<\/p>\n
face_color = QColor(
\n int(255),
\n int(222 – anger * 42),
\n int(138 – anger * 38),
\n )
\n face_gradient = QRadialGradient(QPointF(cx – 26, cy – 36), 145)
\n face_gradient.setColorAt(0, QColor("#fff4b8"))
\n face_gradient.setColorAt(1, face_color)
\n p.setBrush(face_gradient)
\n p.setPen(QPen(QColor("#2b2424"), 4))
\n p.drawEllipse(QRectF(cx – face_w \/ 2, cy – face_h \/ 2, face_w, face_h))<\/p>\n
cursor = self.mapFromGlobal(QCursor.pos())
\n dx = cursor.x() – cx
\n dy = cursor.y() – cy
\n distance = max(1, math.hypot(dx, dy))
\n eye_dx = dx \/ distance * (5 – anger * 2)
\n eye_dy = dy \/ distance * (4 – anger * 1.5)<\/p>\n
p.setPen(QPen(QColor("#2b2424"), 5, Qt.SolidLine, Qt.RoundCap))
\n brow_outer_y = 78 + anger * 2
\n brow_inner_y = 78 + anger * 18
\n brow_outer_offset = 15
\n brow_inner_offset = 15
\n left_brow_center = 217
\n right_brow_center = 303
\n p.drawLine(
\n QPointF(left_brow_center – brow_outer_offset, brow_outer_y),
\n QPointF(left_brow_center + brow_inner_offset, brow_inner_y),
\n )
\n p.drawLine(
\n QPointF(right_brow_center – brow_inner_offset, brow_inner_y),
\n QPointF(right_brow_center + brow_outer_offset, brow_outer_y),
\n )<\/p>\n
self.draw_eye(p, 218, 103, eye_dx, eye_dy, anger)
\n self.draw_eye(p, 302, 103, eye_dx, eye_dy, anger)<\/p>\n
blush = QColor("#ff8fab")
\n blush.setAlphaF(0.45 + anger * 0.35)
\n p.setPen(Qt.NoPen)
\n p.setBrush(blush)
\n p.drawEllipse(QRectF(172, 120, 38 + anger * 8, 22))
\n p.drawEllipse(QRectF(310, 120, 38 + anger * 8, 22))<\/p>\n
p.setPen(QPen(QColor("#2b2424"), 5, Qt.SolidLine, Qt.RoundCap))
\n p.setBrush(Qt.NoBrush)
\n self.draw_mouth(p, anger, self.happiness)<\/p>\n
if anger > 0.55:
\n p.setFont(QFont("Microsoft YaHei UI", 20, QFont.Bold))
\n p.setPen(QColor("#b00020"))
\n p.drawText(QRectF(238, 38, 44, 34), Qt.AlignCenter, "No")<\/p>\n
def draw_eye(self, p, cx, cy, dx, dy, anger):
\n eye_w = 24 – anger * 3
\n eye_h = 31 – anger * 7
\n p.setPen(QPen(QColor("#2b2424"), 3))
\n p.setBrush(QColor("#1f1f1f"))
\n p.drawEllipse(QRectF(cx – eye_w \/ 2 + dx, cy – eye_h \/ 2 + dy, eye_w, eye_h))
\n p.setPen(Qt.NoPen)
\n p.setBrush(QColor("#ffffff"))
\n p.drawEllipse(QRectF(cx – 5 + dx, cy – 10 + dy, 9, 8))
\n p.drawEllipse(QRectF(cx + 2 + dx, cy + 4 + dy, 6, 5))<\/p>\n
def draw_mouth(self, p, anger, happiness):
\n left = QPointF(222, 136)
\n right = QPointF(298, 136)
\n smile_control = QPointF(260, 140 + happiness * 24)
\n flat_control = QPointF(260, 137)
\n frown_control = QPointF(260, 116)<\/p>\n
if anger < 0.45:
\n amount = anger \/ 0.45
\n control = QPointF(
\n smile_control.x() + (flat_control.x() – smile_control.x()) * amount,
\n smile_control.y() + (flat_control.y() – smile_control.y()) * amount,
\n )
\n else:
\n amount = (anger – 0.45) \/ 0.55
\n control = QPointF(
\n flat_control.x() + (frown_control.x() – flat_control.x()) * amount,
\n flat_control.y() + (frown_control.y() – flat_control.y()) * amount,
\n )<\/p>\n
mouth = QPainterPath()
\n mouth.moveTo(left)
\n mouth.quadTo(control, right)
\n p.drawPath(mouth)<\/p>\n
def draw_hearts(self, p):
\n if not self.accepted:
\n return
\n p.setFont(QFont("Arial", 22, QFont.Bold))
\n p.setPen(QColor("#ff4d6d"))
\n for x, y, _speed, size in self.hearts:
\n p.setFont(QFont("Arial", int(size), QFont.Bold))
\n p.drawText(QPointF(x, y), "\u2665")<\/p>\n
def closeEvent(self, event):
\n if self.accepted:
\n event.accept()
\n return
\n event.ignore()
\n self.intensity = 1.0
\n self.tip.setText("\u5148\u70b9\u613f\u610f\u624d\u53ef\u4ee5\u5173\u95ed")
\n self.tip.setStyleSheet("color: #b00020; background: transparent;")
\n self.shake()<\/p>\n
def changeEvent(self, event):
\n if event.type() == QEvent.WindowStateChange and not self.accepted:
\n if self.windowState() & Qt.WindowMinimized:
\n QTimer.singleShot(0, self.restore_from_minimize)
\n super().changeEvent(event)<\/p>\n
def restore_from_minimize(self):
\n self.setWindowState(self.windowState() & ~Qt.WindowMinimized)
\n self.showNormal()
\n self.raise_()
\n self.activateWindow()
\n self.intensity = 1.0
\n self.tip.setText("\u5148\u70b9\u613f\u610f\u624d\u53ef\u4ee5\u6700\u5c0f\u5316")
\n self.tip.setStyleSheet("color: #b00020; background: transparent;")
\n self.shake()<\/p>\n
def main():
\n app = QApplication(sys.argv)
\n window = ReactiveConfessionWindow()
\n window.show()
\n sys.exit(app.exec())<\/p>\n
if __name__ == "__main__":
\n main()<\/p>\n
-HTML \u7248\u5b8c\u6574\u4ee3\u7801<\/p>\n
<!doctype html>
\n<html lang="zh-CN">
\n<head>
\n <meta charset="utf-8" \/>
\n <meta name="viewport" content="width=device-width, initial-scale=1" \/>
\n <title>\u4e00\u4e2a\u5c0f\u95ee\u9898<\/title>
\n <style>
\n * { box-sizing: border-box; }
\n body {
\n min-height: 100vh;
\n margin: 0;
\n display: grid;
\n place-items: center;
\n overflow: hidden;
\n background: linear-gradient(180deg, #fff8fb 0%, #ffeaf1 100%);
\n font-family: "Microsoft YaHei UI", system-ui, sans-serif;
\n color: #2b2424;
\n }
\n .card {
\n width: min(520px, calc(100vw – 28px));
\n padding: 22px 24px 28px;
\n border-radius: 28px;
\n background: rgba(255, 255, 255, 0.72);
\n box-shadow: 0 26px 80px rgba(255, 117, 156, 0.24);
\n text-align: center;
\n user-select: none;
\n }
\n canvas { width: 100%; height: 190px; display: block; }
\n h1 { margin: 4px 0 8px; font-size: 26px; }
\n .tip { height: 26px; margin: 0 0 22px; color: #9b5a70; font-weight: 600; }
\n .buttons { position: relative; height: 78px; }
\n button {
\n position: absolute;
\n top: 14px;
\n width: 118px;
\n height: 48px;
\n border-radius: 24px;
\n font: 700 16px "Microsoft YaHei UI", system-ui, sans-serif;
\n cursor: pointer;
\n }
\n #yesBtn {
\n left: 88px;
\n border: 0;
\n color: #fff;
\n background: #ff7fa3;
\n box-shadow: 0 12px 22px rgba(255, 95, 142, 0.28);
\n }
\n #yesBtn:hover { background: #ff5f8e; }
\n #noBtn {
\n left: 296px;
\n border: 2px solid #ffc3d2;
\n color: #6a3e4d;
\n background: #fff;
\n }
\n .shake { animation: shake 260ms linear; }
\n @keyframes shake {
\n 0%, 100% { transform: translateX(0); }
\n 20% { transform: translateX(8px); }
\n 40% { transform: translateX(-8px); }
\n 60% { transform: translateX(5px); }
\n 80% { transform: translateX(-5px); }
\n }
\n .heart {
\n position: fixed;
\n color: #ff4d6d;
\n font: 800 24px Arial, sans-serif;
\n pointer-events: none;
\n animation: floatUp 1.8s ease-out forwards;
\n }
\n @keyframes floatUp {
\n from { transform: translateY(0) scale(0.8); opacity: 1; }
\n to { transform: translateY(-120px) scale(1.35); opacity: 0; }
\n }
\n <\/style>
\n<\/head>
\n<body>
\n <main class="card" id="card">
\n <canvas id="face" width="520" height="190"><\/canvas>
\n <h1 id="title">\u53ef\u4ee5\u548c\u6211\u5728\u4e00\u8d77\u5417？<\/h1>
\n <p class="tip" id="tip">\u9f20\u6807\u8d8a\u9760\u8fd1\u53f3\u8fb9，\u8868\u60c5\u8d8a\u751f\u6c14<\/p>
\n <div class="buttons" id="buttonArea">
\n <button id="yesBtn">\u613f\u610f<\/button>
\n <button id="noBtn">\u4e0d\u613f\u610f<\/button>
\n <\/div>
\n <\/main><\/p>\n
<script>
\n const canvas = document.getElementById("face");
\n const ctx = canvas.getContext("2d");
\n const card = document.getElementById("card");
\n const title = document.getElementById("title");
\n const tip = document.getElementById("tip");
\n const buttonArea = document.getElementById("buttonArea");
\n const yesBtn = document.getElementById("yesBtn");
\n const noBtn = document.getElementById("noBtn");<\/p>\n
const mouse = { x: 260, y: 95, pageX: innerWidth \/ 2, pageY: innerHeight \/ 2 };
\n let anger = 0, happiness = 0, accepted = false;
\n let noTarget = { x: 296, y: 14 };<\/p>\n
window.addEventListener("mousemove", (event) => {
\n mouse.pageX = event.clientX;
\n mouse.pageY = event.clientY;
\n const rect = canvas.getBoundingClientRect();
\n mouse.x = (event.clientX – rect.left) * (canvas.width \/ rect.width);
\n mouse.y = (event.clientY – rect.top) * (canvas.height \/ rect.height);
\n });<\/p>\n
window.addEventListener("beforeunload", (event) => {
\n if (!accepted) {
\n event.preventDefault();
\n event.returnValue = "\u5148\u70b9\u613f\u610f\u624d\u53ef\u4ee5\u79bb\u5f00\u54e6";
\n }
\n });<\/p>\n
yesBtn.onclick = () => {
\n accepted = true;
\n anger = 0;
\n title.textContent = "\u563f\u563f，\u90a3\u5c31\u8bf4\u597d\u5566！";
\n tip.textContent = "\u4eca\u5929\u5f00\u59cb\u5c31\u662f\u7279\u522b\u7684\u4eba";
\n tip.style.color = "#d6336c";
\n yesBtn.textContent = "\u559c\u6b22\u4f60";
\n noBtn.style.display = "none";
\n for (let i = 0; i < 18; i++) setTimeout(spawnHeart, i * 90);
\n };<\/p>\n
noBtn.onclick = () => {
\n anger = 1;
\n tip.textContent = "\u70b9\u9519\u4e86，\u91cd\u6765！";
\n tip.style.color = "#b00020";
\n card.classList.remove("shake");
\n void card.offsetWidth;
\n card.classList.add("shake");
\n dodgeNoButton(true);
\n };<\/p>\n
function clamp(v, lo = 0, hi = 1) { return Math.max(lo, Math.min(hi, v)); }
\n function center(el) {
\n const r = el.getBoundingClientRect();
\n return { x: r.left + r.width \/ 2, y: r.top + r.height \/ 2 };
\n }<\/p>\n
function updateEmotion() {
\n if (accepted) {
\n happiness += (1 – happiness) * 0.08;
\n anger += (0 – anger) * 0.16;
\n return;
\n }
\n const nc = center(noBtn);
\n const nd = Math.hypot(mouse.pageX – nc.x, mouse.pageY – nc.y);
\n const angerTarget = clamp(1 – (nd – 18) \/ 170);
\n anger += (angerTarget – anger) * 0.18;<\/p>\n
const yc = center(yesBtn);
\n const yd = Math.hypot(mouse.pageX – yc.x, mouse.pageY – yc.y);
\n let happyTarget = clamp(1 – (yd – 18) \/ 150);
\n if (anger > 0.15) happyTarget *= 0.25;
\n happiness += (happyTarget – happiness) * 0.16;<\/p>\n
if (anger > 0.78) {
\n tip.textContent = "\u4e0d\u8bb8\u9760\u8fd1\u90a3\u4e2a\u6309\u94ae！";
\n tip.style.color = "#b00020";
\n } else if (anger > 0.35) {
\n tip.textContent = "\u4f60\u662f\u4e0d\u662f\u60f3\u70b9\u53f3\u8fb9？";
\n tip.style.color = "#d9480f";
\n } else {
\n tip.textContent = "\u9f20\u6807\u8d8a\u9760\u8fd1\u53f3\u8fb9，\u8868\u60c5\u8d8a\u751f\u6c14";
\n tip.style.color = "#9b5a70";
\n }
\n }<\/p>\n
function dodgeNoButton(force = false) {
\n if (accepted) return;
\n const area = buttonArea.getBoundingClientRect();
\n const r = noBtn.getBoundingClientRect();
\n const near = r.left – 105 < mouse.pageX && mouse.pageX < r.right + 105 &&
\n r.top – 78 < mouse.pageY && mouse.pageY < r.bottom + 78;
\n if (!force && !near) return;
\n const lx = mouse.pageX – area.left, ly = mouse.pageY – area.top;
\n const candidates = [
\n { x: 246, y: 3 }, { x: 312, y: 26 }, { x: 366, y: 4 },
\n { x: 222, y: 28 }, { x: 334, y: 8 }
\n ];
\n noTarget = candidates.reduce((best, item) => {
\n const bd = Math.hypot(best.x + 59 – lx, best.y + 24 – ly);
\n const id = Math.hypot(item.x + 59 – lx, item.y + 24 – ly);
\n return id > bd ? item : best;
\n }, candidates[0]);
\n }<\/p>\n
function moveNoButton() {
\n if (accepted) return;
\n dodgeNoButton(false);
\n const x0 = parseFloat(noBtn.style.left || "296");
\n const y0 = parseFloat(noBtn.style.top || "14");
\n const nc = center(noBtn);
\n const d = Math.hypot(mouse.pageX – nc.x, mouse.pageY – nc.y);
\n const speed = d < 98 ? 1 : 0.58;
\n noBtn.style.left = `${x0 + (noTarget.x – x0) * speed}px`;
\n noBtn.style.top = `${y0 + (noTarget.y – y0) * speed}px`;
\n }<\/p>\n
function draw() {
\n ctx.clearRect(0, 0, canvas.width, canvas.height);
\n const cx = 260, cy = 92;
\n const faceW = 154 + anger * 8, faceH = 142 – anger * 4;
\n const grad = ctx.createRadialGradient(cx – 26, cy – 36, 4, cx, cy, 145);
\n grad.addColorStop(0, "#fff4b8");
\n grad.addColorStop(1, `rgb(255, ${Math.round(222 – anger * 42)}, ${Math.round(138 – anger * 38)})`);
\n ctx.lineWidth = 4; ctx.strokeStyle = "#2b2424"; ctx.fillStyle = grad;
\n ellipse(cx, cy, faceW \/ 2, faceH \/ 2); ctx.fill(); ctx.stroke();<\/p>\n
const dx = mouse.x – cx, dy = mouse.y – cy;
\n const dist = Math.max(1, Math.hypot(dx, dy));
\n const eyeDx = dx \/ dist * (5 – anger * 2);
\n const eyeDy = dy \/ dist * (4 – anger * 1.5);
\n drawBrows(); drawEye(218, 100, eyeDx, eyeDy); drawEye(302, 100, eyeDx, eyeDy);
\n drawBlush(); drawMouth();
\n if (anger > 0.55) {
\n ctx.fillStyle = "#b00020";
\n ctx.font = "bold 24px 'Microsoft YaHei UI'";
\n ctx.textAlign = "center";
\n ctx.fillText("\u6012", cx, 52);
\n }
\n }<\/p>\n
function ellipse(cx, cy, rx, ry) { ctx.beginPath(); ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2); }
\n function line(x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }<\/p>\n
function drawBrows() {
\n const outerY = 56 + anger * 2, innerY = 56 + anger * 18;
\n ctx.strokeStyle = "#2b2424"; ctx.lineWidth = 5; ctx.lineCap = "round";
\n line(187, outerY, 232, innerY);
\n line(288, innerY, 333, outerY);
\n }<\/p>\n
function drawEye(cx, cy, dx, dy) {
\n const w = 24 – anger * 3, h = 31 – anger * 7;
\n ctx.strokeStyle = "#2b2424"; ctx.lineWidth = 3; ctx.fillStyle = "#1f1f1f";
\n ellipse(cx + dx, cy + dy, w \/ 2, h \/ 2); ctx.fill(); ctx.stroke();
\n ctx.fillStyle = "white";
\n ellipse(cx – 5 + dx, cy – 10 + dy, 4.5, 4); ctx.fill();
\n ellipse(cx + 4 + dx, cy + 4 + dy, 3, 2.5); ctx.fill();
\n }<\/p>\n
function drawBlush() {
\n ctx.fillStyle = `rgba(255, 143, 171, ${0.45 + anger * 0.35})`;
\n ellipse(191, 120, 19 + anger * 4, 11); ctx.fill();
\n ellipse(329, 120, 19 + anger * 4, 11); ctx.fill();
\n }<\/p>\n
function drawMouth() {
\n const smileY = 139 + happiness * 25, flatY = 136, frownY = 115;
\n let controlY;
\n if (anger < 0.45) controlY = smileY + (flatY – smileY) * (anger \/ 0.45);
\n else controlY = flatY + (frownY – flatY) * ((anger – 0.45) \/ 0.55);
\n ctx.strokeStyle = "#2b2424"; ctx.lineWidth = 5; ctx.lineCap = "round";
\n ctx.beginPath(); ctx.moveTo(222, 135); ctx.quadraticCurveTo(260, controlY, 298, 135); ctx.stroke();
\n }<\/p>\n
function spawnHeart() {
\n const h = document.createElement("div");
\n h.className = "heart"; h.textContent = "\u2665";
\n h.style.left = `${innerWidth \/ 2 + (Math.random() – 0.5) * 190}px`;
\n h.style.top = `${innerHeight \/ 2 – 10 + (Math.random() – 0.5) * 60}px`;
\n document.body.appendChild(h); setTimeout(() => h.remove(), 1900);
\n }<\/p>\n
function loop() { updateEmotion(); moveNoButton(); draw(); requestAnimationFrame(loop); }
\n loop();
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
\u672c\u9879\u76ee\u4f7f\u7528 Python PySide6 \u5236\u4f5c\u4e86\u4e00\u4e2a\u5177\u6709\u4e92\u52a8\u6548\u679c\u7684\u544a\u767d\u7a97\u53e3\u3002\u5f53\u9f20\u6807\u9760\u8fd1\u201c\u4e0d\u613f\u610f\u201d\u6309\u94ae\u65f6，\u6309\u94ae\u4f1a\u81ea\u52a8\u8eb2\u5f00，\u5361\u901a\u8868\u60c5\u4e5f\u4f1a\u9010\u6e10\u751f\u6c14；\u5f53\u9f20\u6807\u9760\u8fd1\u201c\u613f\u610f\u201d\u6309\u94ae\u65f6，\u8868\u60c5\u4f1a\u53d8\u5f00\u5fc3\u3002\u70b9\u51fb\u201c\u613f\u610f\u201d\u540e，\u7a97\u53e3\u4f1a\u663e\u793a\u7231\u5fc3\u52a8\u753b\u3002\u9879\u76ee\u540c\u65f6\u63d0\u4f9b\u4e00\u4e2a\u65e0\u9700\u5b89\u88c5\u4f9d\u8d56\u3001\u53cc\u51fb\u5373\u53ef\u8fd0\u884c\u7684 HTML \u7248\u672c\u3002\u4e00\u3001\u9879\u76ee\u6548\u679c\u8fd9\u4e2a\u5c0f\u9879\u76ee\u5e76\u4e0d\u662f\u4e00\u4e2a\u666e\u901a\u7684\u9759\u6001\u5f39\u7a97，\u800c\u662f\u52a0\u5165\u4e86\u591a\u79cd\u5b9e\u65f6\u4ea4\u4e92\u6548\u679c：- \u773c\u775b\u4f1a\u8ddf\u968f\u9f20\u6807\u79fb\u52a8&<\/p>\n","protected":false},"author":2,"featured_media":88789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[567,187,81,87,190],"topic":[],"class_list":["post-88792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-html","tag-javascript","tag-python","tag-87","tag-190"],"yoast_head":"\n