foliko 1.1.7 → 1.1.8

package/.agent/plugins/poster-plugin/src/composer.js

@@ -16,6 +16,7 @@ const createRibbon = require('./components/ribbon')
 const createSeal = require('./components/seal')
 const createHighlightText = require('./components/highlightText')
 const createBarcode = require('./components/barcode')
+const createQuote = require('./components/quote')
 const { loadImageAsRaster } = require('./utils/imageLoader')
 
 // 组件包装函数
@@ -46,6 +47,9 @@ async function createHighlightTextComponent(project, canvas, args) {
 async function createBarcodeComponent(project, canvas, args) {
   return await createBarcode(project, args)
 }
+async function createQuoteComponentWrapper(project, canvas, args) {
+  return await createQuote(project, canvas, args)
+}
 
 /**
  * 辅助函数：将元素添加到活跃层
@@ -178,6 +182,8 @@ async function createComponent(project, canvas, config) {
       return createTextElement(project, args)
     case 'artText':
       return await createArtTextElement(project, args)
+    case 'richText':
+      return await createRichTextElement(project, args)
     case 'image':
       return await createImageElement(project, args)
     case 'svg':
@@ -225,7 +231,7 @@ async function createComponent(project, canvas, config) {
     case 'rating':
       return await createRatingComponent(project, canvas, args)
     case 'quote':
-      return await createQuoteComponent(project, canvas, args)
+      return await createQuoteComponentWrapper(project, canvas, args)
     case 'statCard':
       return await createStatCardComponent(project, canvas, args)
     case 'tagCloud':
@@ -452,15 +458,38 @@ function createPolygonElement(project, { cx, cy, radius, sides, fill, stroke, st
 }
 
 function createTextElement(project, { text, x, y, fontSize, fontFamily, color, align, shadow }) {
-  const { validateFont, getDefaultFont } = require('./fonts')
+  const { validateFont, getDefaultFontFamily, getFontFallbackChain } = require('./fonts')
+
+  const fontSizeVal = fontSize || 48
+  const textColor = color || '#ffffff'
+  const alignment = align || 'left'
+
+  // 计算文字宽度用于居中/右对齐
+  let offsetX = 0
+  if (alignment === 'center' || alignment === 'right') {
+    // 估算文字宽度：中文约 1.0 倍字体大小，英文约 0.5 倍
+    const chineseChars = (text.match(/[\u4e00-\u9fa5]/g) || []).length
+    const otherChars = text.length - chineseChars
+    const textWidth = chineseChars * fontSizeVal * 1.0 + otherChars * fontSizeVal * 0.5
+
+    if (alignment === 'center') {
+      offsetX = -textWidth / 2
+    } else if (alignment === 'right') {
+      offsetX = -textWidth
+    }
+  }
+
+  // 获取字体链（支持 @napi-rs/canvas 字体回退）
+  const chain = getFontFallbackChain(fontFamily, text)
+  const finalFontFamily = chain.length === 1 ? chain[0] : chain.join(', ')
 
   const textItem = new paper.PointText({
-    point: [x, y],
+    point: [x + offsetX, y],
     content: text,
-    fontSize: fontSize || 48,
-    fontFamily: validateFont(fontFamily) || getDefaultFont(),
-    fillColor: new paper.Color(color || '#ffffff'),
-    justification: align || 'left',
+    fontSize: fontSizeVal,
+    fontFamily: finalFontFamily,
+    fillColor: new paper.Color(textColor),
+    justification: alignment,
   })
 
   if (shadow) {
@@ -477,13 +506,17 @@ function createTextElement(project, { text, x, y, fontSize, fontFamily, color, a
 }
 
 function createArtTextElement(project, { text, x, y, fontSize, fontFamily, gradient, strokeColor, strokeWidth, shadow }) {
-  const { validateFont, getDefaultFont } = require('./fonts')
+  const { getFontFallbackChain } = require('./fonts')
+
+  // 获取字体链
+  const chain = getFontFallbackChain(fontFamily, text)
+  const finalFont = chain.length === 1 ? chain[0] : chain.join(', ')
 
   const textItem = new paper.PointText({
     point: [x, y],
     content: text,
     fontSize: fontSize || 120,
-    fontFamily: validateFont(fontFamily) || getDefaultFont(),
+    fontFamily: finalFont,
     fillColor: gradient ? new paper.Color(gradient.colors[0]) : new paper.Color('#ffffff'),
     justification: 'center',
   })
@@ -529,6 +562,135 @@ async function createImageElement(project, { src, x = 0, y = 0, width, height, o
   }
 }
 
+/**
+ * 创建富文本元素（支持多行文本和自动换行）
+ */
+function createRichTextElement(project, {
+  x = 0,
+  y = 0,
+  width,
+  text = '',
+  fontSize = 48,
+  fontFamily = 'sans-serif',
+  color = '#ffffff',
+  align = 'left',
+  lineHeight = fontSize * 1.4,
+  letterSpacing = 0,
+  opacity = 1,
+  rotation = 0,
+  shadow = null,
+}) {
+  const { getFontFallbackChain } = require('./fonts')
+
+  // 获取字体链
+  const chain = getFontFallbackChain(fontFamily, text)
+  const finalFontFamily = chain.length === 1 ? chain[0] : chain.join(', ')
+
+  // 估算字符宽度（中文约等于 fontSize，英文约等于 fontSize * 0.5）
+  const getCharWidth = (char) => {
+    return /[\u4e00-\u9fa5]/.test(char) ? fontSize : fontSize * 0.5
+  }
+
+  // 计算文本宽度
+  const calcTextWidth = (str) => {
+    let width = 0
+    for (const char of str) {
+      width += getCharWidth(char)
+    }
+    return width + (str.length - 1) * letterSpacing
+  }
+
+  // 处理自动换行
+  const lines = []
+  if (width) {
+    const paragraphs = text.split('\n')
+    for (const paragraph of paragraphs) {
+      if (!paragraph) {
+        lines.push('')
+        continue
+      }
+      let currentLine = ''
+      let currentWidth = 0
+      for (const char of paragraph) {
+        const charWidth = getCharWidth(char) + letterSpacing
+        if (currentWidth + charWidth > width && currentLine) {
+          lines.push(currentLine)
+          currentLine = char
+          currentWidth = charWidth
+        } else {
+          currentLine += char
+          currentWidth += charWidth
+        }
+      }
+      if (currentLine) {
+        lines.push(currentLine)
+      }
+    }
+  } else {
+    lines.push(text)
+  }
+
+  // 创建文本元素组
+  const group = new paper.Group()
+  const textItems = []
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const lineY = y + i * lineHeight
+
+    // 计算对齐偏移
+    let offsetX = 0
+    if (align === 'center' && width) {
+      offsetX = (width - calcTextWidth(line)) / 2
+    } else if (align === 'right' && width) {
+      offsetX = width - calcTextWidth(line)
+    }
+
+    const textItem = new paper.PointText({
+      point: [x + offsetX, lineY + fontSize],
+      content: line,
+      fontSize: fontSize,
+      fontFamily: finalFontFamily,
+      fillColor: new paper.Color(color),
+      justification: align,
+    })
+
+    if (letterSpacing !== 0) {
+      textItem.letterSpacing = letterSpacing
+    }
+
+    if (opacity !== 1) {
+      textItem.opacity = opacity
+    }
+
+    if (rotation !== 0) {
+      textItem.rotate(rotation, new paper.Point(x, y))
+    }
+
+    if (shadow) {
+      textItem.shadowColor = new paper.Color(shadow.color || 'rgba(0,0,0,0.5)')
+      textItem.shadowBlur = shadow.blur || 5
+      textItem.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+    }
+
+    textItems.push(textItem)
+    group.addChild(textItem)
+  }
+
+  // 添加到项目
+  if (project && project.activeLayer) {
+    project.activeLayer.addChild(group)
+  }
+
+  return {
+    success: true,
+    id: group.id,
+    type: 'richText',
+    lines: lines.length,
+    height: lines.length * lineHeight,
+  }
+}
+
 const fs = require('fs')
 
 async function createSVGElement(project, { src, x = 0, y = 0, width, height, opacity = 1 }) {
@@ -1777,15 +1939,15 @@ function createGridComponent(project, canvas, {
  * 创建星形组件
  */
 function createStarComponent(project, canvas, {
-  cx, cy, points = 5, innerRadius: providedInnerRadius, outerRadius,
+  cx, cy, points = 5, innerRadius, outerRadius,
   fill, stroke, strokeWidth = 1, opacity = 1, rotation = 0
 }) {
-  const innerRadius = providedInnerRadius || outerRadius * 0.4
+  const actualInnerRadius = innerRadius || outerRadius * 0.4
   const path = new paper.Path()
   const angleStep = Math.PI / points
 
   for (let i = 0; i < points * 2; i++) {
-    const radius = i % 2 === 0 ? outerRadius : innerRadius
+    const radius = i % 2 === 0 ? outerRadius : actualInnerRadius
     const angle = i * angleStep - Math.PI / 2 + (rotation * Math.PI / 180)
     const x = cx + radius * Math.cos(angle)
     const y = cy + radius * Math.sin(angle)
@@ -2042,11 +2204,17 @@ function createWatermarkComponent(project, canvas, {
   text, cx, cy, color = 'rgba(0,0,0,0.1)', fontSize = 48,
   fontFamily = 'sans-serif', opacity = 0.1, rotation = 0, align = 'center'
 }) {
+  const { getFontFallbackChain } = require('./fonts')
+
+  // 获取字体链
+  const chain = getFontFallbackChain(fontFamily, text)
+  const finalFont = chain.length === 1 ? chain[0] : chain.join(', ')
+
   const label = new paper.PointText({
     point: [cx, cy],
     content: text,
     fontSize: fontSize,
-    fontFamily: fontFamily,
+    fontFamily: finalFont,
     fillColor: new paper.Color(color),
     justification: align,
     opacity: opacity

package/.agent/plugins/poster-plugin/src/elements/artText.js

@@ -1,9 +1,13 @@
 /**
- * 艺术文字元素
+ * 艺术文字元素 - 使用 @napi-rs/canvas 原生字体 API
  */
 
 const paper = require('paper')
-const { validateFont, getDefaultFont } = require('../fonts')
+const {
+  validateFont,
+  getDefaultFontFamily,
+  getFontFallbackChain
+} = require('../fonts')
 
 /**
  * 添加艺术文字
@@ -20,18 +24,23 @@ function addArtText(project, args) {
     shadow,
   } = args
 
+  // 获取字体
+  const baseFont = validateFont(fontFamily) || getDefaultFontFamily()
+  const chain = getFontFallbackChain(fontFamily || baseFont, text)
+  const font = chain.length === 1 ? chain[0] : chain.join(', ')
+
   const textItem = new paper.PointText({
     point: [x, y],
     content: text,
     fontSize: fontSize || 120,
-    fontFamily: validateFont(fontFamily) || getDefaultFont(),
+    fontFamily: font,
     fillColor: gradient
       ? new paper.Color(gradient.colors[0])
       : new paper.Color('#ffffff'),
     justification: 'center',
   })
 
-  // 应用渐变
+  // 渐变填充
   if (gradient && gradient.colors.length > 0) {
     const colors = gradient.colors.map(c => new paper.Color(c))
     textItem.fillColor = new paper.Color({
@@ -41,15 +50,15 @@ function addArtText(project, args) {
     })
   }
 
-  // 应用描边
+  // 描边
   if (strokeColor) {
     textItem.strokeColor = new paper.Color(strokeColor)
     textItem.strokeWidth = strokeWidth || 2
   }
 
-  // 应用阴影
+  // 阴影
   if (shadow) {
-    textItem.shadowColor = new paper.Color(shadow.color)
+    textItem.shadowColor = new paper.Color(shadow.color || '#000000')
     textItem.shadowBlur = shadow.blur || 10
     textItem.shadowOffset = new paper.Point(shadow.offsetX || 3, shadow.offsetY || 3)
   }

package/.agent/plugins/poster-plugin/src/elements/background.js

@@ -46,6 +46,7 @@ async function addBackground(project, canvas, args) {
     const { type, colors, direction } = gradient
     const paperColors = colors.map(c => new paper.Color(c))
 
+    let gradientConfig
     if (type === 'linear') {
       const angle = (direction || 45) * Math.PI / 180
       const diagonal = Math.sqrt(canvas.width ** 2 + canvas.height ** 2)
@@ -57,23 +58,37 @@ async function addBackground(project, canvas, args) {
         canvas.width / 2 + Math.cos(angle) * diagonal / 2,
         canvas.height / 2 + Math.sin(angle) * diagonal / 2
       )
-      project.activeLayer.fillColor = new paper.Color({
+      gradientConfig = {
         gradient: { stops: paperColors },
         origin: start,
         destination: stop,
-      })
+      }
     } else {
       // radial
       const center = new paper.Point(canvas.width / 2, canvas.height / 2)
       const radius = Math.max(canvas.width, canvas.height) / 2
-      project.activeLayer.fillColor = new paper.Color({
+      gradientConfig = {
         gradient: { stops: paperColors },
         origin: center,
         destination: center.add(new paper.Point(radius, 0)),
-      })
+      }
     }
+
+    // 创建矩形背景元素（确保导出时能正确渲染渐变）
+    const bg = new paper.Path.Rectangle({
+      point: [0, 0],
+      size: [canvas.width, canvas.height],
+      fillColor: new paper.Color(gradientConfig),
+    })
+    bg.sendToBack()
   } else if (color) {
-    project.activeLayer.fillColor = new paper.Color(color)
+    // 创建矩形背景元素（确保导出时能正确渲染）
+    const bg = new paper.Path.Rectangle({
+      point: [0, 0],
+      size: [canvas.width, canvas.height],
+      fillColor: new paper.Color(color),
+    })
+    bg.sendToBack()
   } else {
     throw new Error('Must provide color, gradient, or image')
   }