Update visual_renderer.py

visual_renderer.py

@@ -5,17 +5,8 @@ import os
 def draw_glossing_card(data, output_path):
     """
     將四行分析畫在畫布上
-    data 包含: line1, line2, line3, translation
+    包含動態寬度計算，防止長句被截斷
     """
-    # 畫布設定
-    width, height = 1200, 450 # 💡 高度微調，讓版面更緊湊
-    bg_color = (253, 248, 241) # 米白色紙張感
-    
-    # 💡 修正錯誤：使用 Image.new 而不是 Image.Image.new
-    img = Image.new('RGB', (width, height), color=bg_color)
-    draw = ImageDraw.Draw(img)
-    
-    # 💡 字體設定 (強烈建議要有中文字型檔，否則中文會變方塊)
     font_path = "NotoSansTC-Regular.ttf" 
     font_size = 32
     try:
@@ -24,29 +15,58 @@ def draw_glossing_card(data, output_path):
         print(f"⚠️ 找不到中文字型或載入失敗: {e}")
         font = ImageFont.load_default()
 
+    # 建立一個臨時畫布來精準測量文字寬度 (相容不同版本的 Pillow)
+    temp_img = Image.new('RGB', (1, 1))
+    temp_draw = ImageDraw.Draw(temp_img)
+
+    def get_text_width(text, font):
+        if hasattr(temp_draw, 'textlength'):
+            return temp_draw.textlength(text, font=font)
+        elif hasattr(temp_draw, 'textbbox'):
+            return temp_draw.textbbox((0,0), text, font=font)[2]
+        else:
+            return font.getsize(text)[0]
+
+    # 💡 1. 動態計算畫布所需的總寬度
     x_offset = 80
-    y_start = 80
-    line_spacing = 60 # 四行等距
+    for i in range(len(data['glossing']['line1'])):
+        w1_len = get_text_width(data['glossing']['line1'][i], font)
+        w2_len = get_text_width(data['glossing']['line2'][i], font)
+        w3_len = get_text_width(data['glossing']['line3'][i], font)
+        x_offset += max(w1_len, w2_len, w3_len) + 50 # 每個單詞群組保留 50px 間距
+    
+    # 計算第四行(翻譯)的寬度
+    trans_w = get_text_width(data['translation'], font)
+    
+    # 決定最終畫布寬度 (至少 1200，若更長則取實際寬度加上右側邊距 80)
+    canvas_width = int(max(1200, x_offset + 80, trans_w + 160))
+    canvas_height = 500 # 固定高度
+    
+    bg_color = (253, 248, 241) # 米白色紙張感
+    img = Image.new('RGB', (canvas_width, canvas_height), color=bg_color)
+    draw = ImageDraw.Draw(img)
+
+    # 💡 2. 開始繪製
+    curr_x = 80
+    y_start = 100
+    line_spacing = 80 # 四行等距
     
-    # 畫出前三行 (對齊單詞)
     for i in range(len(data['glossing']['line1'])):
         w1 = data['glossing']['line1'][i]
         w2 = data['glossing']['line2'][i]
         w3 = data['glossing']['line3'][i]
         
-        draw.text((x_offset, y_start), w1, fill=(0,0,0), font=font)
-        draw.text((x_offset, y_start + line_spacing), w2, fill=(139,0,0), font=font) # 暗紅色
-        draw.text((x_offset, y_start + line_spacing * 2), w3, fill=(85,85,85), font=font) # 深灰色
-        
-        # 計算下一個單詞的間距 (取三行中最長者 + 緩衝)
-        bbox1 = draw.textbbox((0,0), w1, font=font)
-        bbox2 = draw.textbbox((0,0), w2, font=font)
-        bbox3 = draw.textbbox((0,0), w3, font=font)
+        draw.text((curr_x, y_start), w1, fill=(0,0,0), font=font)
+        draw.text((curr_x, y_start + line_spacing), w2, fill=(139,0,0), font=font) # 暗紅色
+        draw.text((curr_x, y_start + line_spacing * 2), w3, fill=(85,85,85), font=font) # 深灰色
         
-        max_w = max(bbox1[2] - bbox1[0], bbox2[2] - bbox2[0], bbox3[2] - bbox3[0])
-        x_offset += max_w + 40 # 單詞之間的間距
+        # 推進 X 座標到下一個單詞的起點
+        bbox_w1 = get_text_width(w1, font)
+        bbox_w2 = get_text_width(w2, font)
+        bbox_w3 = get_text_width(w3, font)
+        curr_x += max(bbox_w1, bbox_w2, bbox_w3) + 50
 
-    # 畫出第四行 (整句意譯) - 無橫線，等距 (拉開半行的距離區隔)
+    # 畫出第四行 (整句意譯) - 無橫線，等距
     draw.text((80, y_start + line_spacing * 3.5), data['translation'], fill=(0,0,0), font=font)
     
     img.save(output_path)