foliko 1.1.1 → 1.1.2

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

@@ -3,12 +3,44 @@
  */
 
 const paper = require('paper')
+const { loadImageAsRaster } = require('../utils/imageLoader')
 
 /**
- * 添加背景
+ * 添加背景（支持纯色、渐变或图片）
  */
-function addBackground(project, canvas, args) {
-  const { color, gradient } = args
+async function addBackground(project, canvas, args) {
+  const { color, gradient, image } = args
+
+  if (image) {
+    const { raster } = await loadImageAsRaster(project, image, { x: 0, y: 0 })
+
+    raster.onLoad = () => {
+      // 计算缩放比例，使图片覆盖整个画布（cover 模式）
+      const canvasRatio = canvas.width / canvas.height
+      const imageRatio = raster.width / raster.height
+
+      let scaledWidth, scaledHeight, offsetX, offsetY
+
+      if (imageRatio > canvasRatio) {
+        // 图片更宽，以高度为基准缩放
+        scaledHeight = canvas.height
+        scaledWidth = raster.width * (canvas.height / raster.height)
+        offsetX = (canvas.width - scaledWidth) / 2
+        offsetY = 0
+      } else {
+        // 图片更高，以宽度为基准缩放
+        scaledWidth = canvas.width
+        scaledHeight = raster.height * (canvas.width / raster.width)
+        offsetX = 0
+        offsetY = (canvas.height - scaledHeight) / 2
+      }
+
+      raster.bounds = new paper.Rectangle(offsetX, offsetY, scaledWidth, scaledHeight)
+      raster.sendToBack()
+    }
+
+    return { success: true, message: 'Background image added' }
+  }
 
   if (gradient) {
     const { type, colors, direction } = gradient
@@ -43,7 +75,7 @@ function addBackground(project, canvas, args) {
   } else if (color) {
     project.activeLayer.fillColor = new paper.Color(color)
   } else {
-    throw new Error('Must provide color or gradient')
+    throw new Error('Must provide color, gradient, or image')
   }
 
   return { success: true, message: 'Background added' }

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

@@ -3,65 +3,22 @@
  */
 
 const paper = require('paper')
-const fs = require('fs')
-const path = require('path')
+const { loadImageAsRaster } = require('../utils/imageLoader')
 
 /**
  * 添加图片（支持本地路径、URL、Base64）
  */
-function addImage(project, args) {
+async function addImage(project, args) {
   const { src, x, y, width, height, opacity } = args
 
   try {
-    // 转换为绝对路径
-    let absolutePath = src
-    if (!path.isAbsolute(absolutePath)) {
-      absolutePath = path.join(process.cwd(), absolutePath)
-    }
-
-    // 检查文件是否存在
-    if (!fs.existsSync(absolutePath)) {
-      return { success: false, error: `文件不存在: ${absolutePath}` }
-    }
-
-    // 读取文件并转为 Base64
-    const buffer = fs.readFileSync(absolutePath)
-    const ext = path.extname(absolutePath).toLowerCase()
-    const mimeTypes = {
-      '.png': 'image/png',
-      '.jpg': 'image/jpeg',
-      '.jpeg': 'image/jpeg',
-      '.gif': 'image/gif',
-      '.webp': 'image/webp',
-      '.bmp': 'image/bmp'
-    }
-    const mimeType = mimeTypes[ext] || 'image/png'
-    const imageUrl = `data:${mimeType};base64,${buffer.toString('base64')}`
-
-    const raster = new paper.Raster(imageUrl)
-
-    // 等待图片加载完成
-    raster.onLoad = () => {
-      if (width && height) {
-        raster.bounds = new paper.Rectangle(x, y, width, height)
-      } else if (width) {
-        const scale = width / raster.width
-        raster.bounds = new paper.Rectangle(x, y, width, raster.height * scale)
-      } else if (height) {
-        const scale = height / raster.height
-        raster.bounds = new paper.Rectangle(x, y, raster.width * scale, height)
-      } else {
-        raster.position = new paper.Point(x, y)
-      }
-
-      if (opacity !== undefined) raster.opacity = opacity
-    }
+    const { raster } = await loadImageAsRaster(project, src, { x, y, width, height }, opacity)
 
     return {
       success: true,
       id: raster.id,
       type: 'image',
-      path: absolutePath,
+      path: src,
     }
   } catch (err) {
     return { success: false, error: `Failed to load image: ${err.message}` }

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

@@ -9,6 +9,7 @@ const addPolygon = require('./polygon')
 const addImage = require('./image')
 const addText = require('./text')
 const addArtText = require('./artText')
+const addRichText = require('./richText')
 const addBackground = require('./background')
 const { addSVG, exportSVG } = require('./svg')
 
@@ -20,6 +21,7 @@ module.exports = {
   addImage,
   addText,
   addArtText,
+  addRichText,
   addBackground,
   addSVG,
   exportSVG,

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

@@ -0,0 +1,230 @@
+/**
+ * 富文本组件 - 支持旋转和多种文本样式
+ */
+
+const paper = require('paper')
+const { validateFont, getDefaultFont, getRegisteredFonts } = require('../fonts')
+
+/**
+ * 检测文本是否包含 emoji
+ */
+function containsEmoji(text) {
+  if (!text || typeof text !== 'string') return false
+  const emojiRanges = [
+    /\u{1F600}-\u{1F64F}/u, /\u{1F300}-\u{1F5FF}/u, /\u{1F680}-\u{1F6FF}/u,
+    /\u{1F700}-\u{1F77F}/u, /\u{1F780}-\u{1F7FF}/u, /\u{1F800}-\u{1F8FF}/u,
+    /\u{1F900}-\u{1F9FF}/u, /\u{1FA00}-\u{1FA6F}/u, /\u{1FA70}-\u{1FAFF}/u,
+    /\u{2600}-\u{26FF}/u, /\u{2700}-\u{27BF}/u,
+  ]
+  for (const range of emojiRanges) {
+    if (range.test(text)) return true
+  }
+  return /[\u{1F300}-\u{1F9FF}]/u.test(text)
+}
+
+/**
+ * 获取适合的字体（考虑 emoji）
+ */
+function getFontForText(requestedFont, text) {
+  const baseFont = validateFont(requestedFont) || getDefaultFont()
+  if (containsEmoji(text)) {
+    const registeredFonts = getRegisteredFonts()
+    const emojiFont = registeredFonts.find(f => {
+      if (!f) return false
+      const lower = f.toLowerCase()
+      return lower.includes('color emoji') || lower.includes('noto emoji') ||
+             lower.includes('segoe ui emoji') || lower.includes('symbola') || lower.includes('emoji')
+    })
+    if (emojiFont) return emojiFont
+  }
+  return baseFont
+}
+
+/**
+ * 添加富文本
+ * @param {paper.Project} project - Paper.js 项目
+ * @param {Object} args - 参数
+ * @returns {Object} 结果
+ */
+function addRichText(project, args) {
+  const {
+    // 位置和尺寸
+    x = 0,
+    y = 0,
+    width,           // 文本区域宽度（用于自动换行）
+
+    // 文本内容
+    text = '',
+
+    // 字体样式
+    fontSize = 48,
+    fontFamily,
+    fontWeight,       // normal, bold, 100-900
+    fontStyle,       // normal, italic, oblique
+    italic = false,
+    bold = false,
+
+    // 文字装饰
+    underline = false,
+    strikethrough = false,
+
+    // 颜色
+    color = '#ffffff',
+    backgroundColor,  // 文字背景色
+    gradient,        // { colors: ['#fff', '#000'], direction: 0 }
+
+    // 描边
+    strokeColor,
+    strokeWidth = 1,
+
+    // 阴影
+    shadow,          // { color: '#000', blur: 5, offsetX: 2, offsetY: 2 }
+
+    // 间距
+    letterSpacing = 0,
+    lineSpacing = 0, // 行间距增量
+    lineHeight,      // 行高
+
+    // 对齐
+    align = 'left',  // left, center, right, justify
+
+    // 变换
+    rotation = 0,    // 旋转角度（度）
+    scale,
+
+    // 透明度
+    opacity = 1,
+
+    // 换行
+    wrap = true,     // 是否自动换行
+  } = args
+
+  const font = getFontForText(fontFamily, text)
+  const effectiveFontWeight = bold ? 'bold' : (fontWeight || 'normal')
+  const effectiveFontStyle = italic ? 'italic' : (fontStyle || 'normal')
+
+  // 创建文本项
+  const textItem = new paper.PointText({
+    point: [x, y + fontSize],
+    content: text,
+    fontSize,
+    fontFamily: font,
+    fontWeight: effectiveFontWeight,
+    fontStyle: effectiveFontStyle,
+    fillColor: new paper.Color(color),
+    justification: align,
+  })
+
+  // 字母间距
+  if (letterSpacing !== 0) {
+    textItem.letterSpacing = letterSpacing
+  }
+
+  // 行高
+  if (lineHeight) {
+    textItem.leading = lineHeight
+  } else if (lineSpacing !== 0) {
+    textItem.leading = fontSize + lineSpacing
+  }
+
+  // 下划线和删除线 - 使用字符样式
+  if (underline || strikethrough) {
+    textItem.decorations = []
+    if (underline) textItem.decorations.push('underline')
+    if (strikethrough) textItem.decorations.push('strikethrough')
+  }
+
+  // 渐变填充
+  if (gradient && gradient.colors && gradient.colors.length > 0) {
+    const colors = gradient.colors.map(c => new paper.Color(c))
+    const bounds = textItem.bounds
+    if (gradient.direction !== undefined) {
+      // 自定义方向
+      const angle = gradient.direction * Math.PI / 180
+      const diagonal = Math.sqrt(bounds.width ** 2 + bounds.height ** 2)
+      textItem.fillColor = new paper.Color({
+        gradient: { stops: colors },
+        origin: new paper.Point(
+          bounds.center.x - Math.cos(angle) * diagonal / 2,
+          bounds.center.y - Math.sin(angle) * diagonal / 2
+        ),
+        destination: new paper.Point(
+          bounds.center.x + Math.cos(angle) * diagonal / 2,
+          bounds.center.y + Math.sin(angle) * diagonal / 2
+        ),
+      })
+    } else {
+      // 水平渐变
+      textItem.fillColor = new paper.Color({
+        gradient: { stops: colors },
+        origin: bounds.topLeft,
+        destination: bounds.topRight,
+      })
+    }
+  }
+
+  // 背景色 - 创建背景矩形
+  let bgRect = null
+  if (backgroundColor) {
+    const padding = 10
+    bgRect = new paper.Path.Rectangle({
+      point: [textItem.bounds.left - padding, textItem.bounds.top - padding],
+      size: [textItem.bounds.width + padding * 2, textItem.bounds.height + padding * 2],
+      fillColor: new paper.Color(backgroundColor),
+      radius: 4,
+    })
+    bgRect.sendToBack()
+  }
+
+  // 描边
+  if (strokeColor) {
+    textItem.strokeColor = new paper.Color(strokeColor)
+    textItem.strokeWidth = strokeWidth
+  }
+
+  // 阴影
+  if (shadow) {
+    textItem.shadowColor = new paper.Color(shadow.color || '#000000')
+    textItem.shadowBlur = shadow.blur || 5
+    textItem.shadowOffset = new paper.Point(shadow.offsetX || 2, shadow.offsetY || 2)
+  }
+
+  // 透明度
+  if (opacity !== 1) {
+    textItem.opacity = opacity
+    if (bgRect) bgRect.opacity = opacity
+  }
+
+  // 旋转
+  if (rotation !== 0) {
+    textItem.rotate(rotation, new paper.Point(x, y + fontSize))
+    if (bgRect) bgRect.rotate(rotation, bgRect.bounds.center)
+  }
+
+  // 缩放
+  if (scale !== undefined) {
+    if (typeof scale === 'number') {
+      textItem.scale(scale, scale, new paper.Point(x, y + fontSize))
+      if (bgRect) bgRect.scale(scale, scale, bgRect.bounds.center)
+    } else if (typeof scale === 'object' && (scale.x !== undefined || scale.y !== undefined)) {
+      const sx = scale.x || 1
+      const sy = scale.y || sx
+      textItem.scale(sx, sy, new paper.Point(x, y + fontSize))
+      if (bgRect) bgRect.scale(sx, sy, bgRect.bounds.center)
+    }
+  }
+
+  return {
+    success: true,
+    id: textItem.id,
+    type: 'richText',
+    bounds: {
+      x: textItem.bounds.x,
+      y: textItem.bounds.y,
+      width: textItem.bounds.width,
+      height: textItem.bounds.height,
+    }
+  }
+}
+
+module.exports = addRichText

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

@@ -4,51 +4,67 @@
 
 const paper = require('paper')
 const fs = require('fs')
+const path = require('path')
 
 /**
  * 添加 SVG
- * 
- * @param {Object} project - Paper.js 项目
- * @param {Object} args - 组件参数
- * @param {string} args.src - SVG 文件路径或 SVG 字符串
- * @param {number} args.x - X坐标
- * @param {number} args.y - Y坐标
- * @param {number} args.width - 宽度
- * @param {number} args.height - 高度
- * @param {number} args.opacity - 透明度 0-1
  */
-function addSVG(project, args) {
-  const { src, x, y, width, height, opacity } = args
+async function addSVG(project, args) {
+  const { src, x = 0, y = 0, width, height, opacity = 1 } = args
+
+  // 确保 src 是字符串
+  if (typeof src !== 'string') {
+    return { success: false, error: 'SVG source must be a string' }
+  }
+
+  if (!src) {
+    return { success: false, error: 'SVG source is required' }
+  }
 
   let svgContent = src
 
   // 如果是文件路径，读取文件内容
   if (!src.startsWith('<') && !src.startsWith('<?xml')) {
     try {
-      svgContent = fs.readFileSync(src, 'utf8')
+      let filePath = src
+      if (!path.isAbsolute(filePath)) {
+        filePath = path.join(process.cwd(), filePath)
+      }
+      svgContent = fs.readFileSync(filePath, 'utf8')
     } catch (e) {
       return { success: false, error: `Failed to read SVG file: ${e.message}` }
     }
   }
 
-  // 导入 SVG
-  const svg = paper.project.importSVG(svgContent)
-  
+  // 导入 SVG 到指定项目
+  let svg
+  try {
+    svg = project.importSVG(svgContent)
+  } catch (e) {
+    return { success: false, error: `Failed to import SVG: ${e.message}` }
+  }
+
   if (!svg) {
     return { success: false, error: 'Failed to import SVG' }
   }
 
+  // 确保 SVG 添加到活动层
+  if (project && project.activeLayer && svg.parent !== project.activeLayer) {
+    project.activeLayer.addChild(svg)
+  }
+
   // 设置位置
   svg.position = new paper.Point(x, y)
 
   // 设置尺寸
   if (width && height) {
-    svg.bounds.width = width
-    svg.bounds.height = height
+    const scaleX = width / svg.bounds.width
+    const scaleY = height / svg.bounds.height
+    svg.scale(Math.min(scaleX, scaleY), svg.bounds.center)
   } else if (width) {
-    svg.scale(width / svg.bounds.width)
+    svg.scale(width / svg.bounds.width, svg.bounds.center)
   } else if (height) {
-    svg.scale(height / svg.bounds.height)
+    svg.scale(height / svg.bounds.height, svg.bounds.center)
   }
 
   // 设置透明度