Upload public.js

backend/src/routes/public.js

@@ -739,29 +739,86 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
   }
 });
 
-// 辅助函数：生成SVG
+// 辅助函数：生成SVG - 改进版，支持更精确的PPT渲染
 function generateSlideSVG(slide, pptData, options = {}) {
   const { width = 1000, height = 562 } = options;
   
-  const backgroundStyle = slide.background?.color || '#ffffff';
+  // 处理背景
+  let backgroundStyle = '#ffffff';
+  if (slide.background) {
+    if (slide.background.type === 'solid') {
+      backgroundStyle = slide.background.color || '#ffffff';
+    } else if (slide.background.type === 'gradient' && slide.background.gradient) {
+      // SVG渐变处理
+      const colors = slide.background.gradient.colors || [];
+      if (colors.length > 0) {
+        backgroundStyle = colors[0].color || '#ffffff';
+      }
+    }
+  }
+  
+  // 生成渐变定义（如果需要）
+  let gradientDefs = '';
+  if (slide.background?.type === 'gradient' && slide.background.gradient?.colors) {
+    const colors = slide.background.gradient.colors;
+    const gradientId = 'bg-gradient';
+    if (slide.background.gradient.type === 'linear') {
+      gradientDefs = `
+        <defs>
+          <linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="0%"> 
+            ${colors.map((color, index) => 
+              `<stop offset="${(index / (colors.length - 1)) * 100}%" style="stop-color:${color.color};stop-opacity:1" />`
+            ).join('')}
+          </linearGradient>
+        </defs>
+      `;
+      backgroundStyle = `url(#${gradientId})`;
+    }
+  }
   
+  // 渲染元素
   const elementsHTML = slide.elements.map(element => {
     const x = element.left || 0;
     const y = element.top || 0;
     const w = element.width || 100;
     const h = element.height || 100;
+    const rotation = element.rotate || 0;
+    
+    // 变换属性
+    const transform = rotation !== 0 ? `transform="rotate(${rotation} ${x + w/2} ${y + h/2})"` : '';
     
     if (element.type === 'text') {
       const fontSize = element.fontSize || 16;
-      const fontFamily = element.fontName || 'Arial';
+      const fontFamily = element.fontName || 'Arial, sans-serif';
       const color = element.defaultColor || element.color || '#000000';
+      const fontWeight = element.bold ? 'bold' : 'normal';
+      const fontStyle = element.italic ? 'italic' : 'normal';
+      const textDecoration = element.underline ? 'underline' : 'none';
+      const textAnchor = element.align === 'center' ? 'middle' : element.align === 'right' ? 'end' : 'start';
+      
+      // 计算文本位置
+      let textX = x + 10;
+      if (element.align === 'center') textX = x + w/2;
+      else if (element.align === 'right') textX = x + w - 10;
+      
+      // 处理多行文本
       const content = (element.content || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      const lines = content.split('\n');
       
-      return `<text x="${x + 10}" y="${y + fontSize}" 
-                font-family="${fontFamily}" font-size="${fontSize}" 
-                fill="${color}" font-weight="${element.bold ? 'bold' : 'normal'}"
-                font-style="${element.italic ? 'italic' : 'normal'}"
-                text-decoration="${element.underline ? 'underline' : 'none'}">${content}</text>`;
+      return `
+        <g ${transform}>
+          ${lines.map((line, index) => `
+            <text x="${textX}" y="${y + fontSize + (index * fontSize * 1.2)}" 
+                  font-family="${fontFamily}" 
+                  font-size="${fontSize}" 
+                  fill="${color}" 
+                  font-weight="${fontWeight}"
+                  font-style="${fontStyle}" 
+                  text-decoration="${textDecoration}"
+                  text-anchor="${textAnchor}">${line}</text>
+          `).join('')}
+        </g>
+      `;
     }
     
     if (element.type === 'shape') {
@@ -774,25 +831,34 @@ function generateSlideSVG(slide, pptData, options = {}) {
         const cy = y + h/2;
         const rx = w/2;
         const ry = h/2;
-        return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+        return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
       }
       
-      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+      // 默认矩形
+      const borderRadius = element.borderRadius || 0;
+      if (borderRadius > 0) {
+        return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${borderRadius}" ry="${borderRadius}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
+      }
+      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
     }
     
     if (element.type === 'image' && element.src) {
-      return `<image x="${x}" y="${y}" width="${w}" height="${h}" href="${element.src}"/>`;
+      // 检查是否是base64图片
+      if (element.src.startsWith('data:image/')) {
+        return `<image x="${x}" y="${y}" width="${w}" height="${h}" href="${element.src}" ${transform}/>`;
+      }
+      // 外部图片 - 在SVG中可能有跨域问题，显示占位符
+      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="#f0f0f0" stroke="#ccc" stroke-width="1" ${transform}/>
+              <text x="${x + w/2}" y="${y + h/2}" text-anchor="middle" font-size="12" fill="#666">图片</text>`;
     }
     
     return '';
-  }).join('');
+  }).filter(Boolean).join('');
   
-  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    ${gradientDefs}
     <rect width="100%" height="100%" fill="${backgroundStyle}"/>
     <g>${elementsHTML}</g>
-    <text x="${width-10}" y="${height-10}" text-anchor="end" font-family="Arial" font-size="10" fill="#999" opacity="0.7">
-      ${pptData.title || 'PPTist'} - Generated at ${new Date().toISOString()}
-    </text>
   </svg>`;
 }