leafer-x-effect-text

一个功能强大的 Leafer UI 特效文字插件，支持多层文字特效叠加，实现描边、阴影、渐变等丰富的视觉效果。

✨ 特性

• 🎨 多层特效叠加 - 支持无限层文字特效组合
• 📐 响应式偏移 - 特效偏移随字体大小自动缩放
• 🎯 精确控制 - 独立控制每层的填充、描边、偏移
• 🚀 高性能渲染 - 优化的渲染机制，流畅的交互体验
• 🔧 完全可配置 - 支持纯色、渐变、描边等丰富配置
• 📦 轻量无依赖 - 仅依赖 Leafer UI 核心库

📦 安装

# npm
npm install leafer-x-effect-text

# pnpm
pnpm add leafer-x-effect-text

# yarn
yarn add leafer-x-effect-text

🚀 快速开始

基础使用

import { App } from 'leafer-ui'
import { EffectText } from 'leafer-x-effect-text'

const app = new App({ view: 'app' })

const text = new EffectText({
  text: '特效文字',
  fontSize: 48,
  x: 100,
  y: 100,
  fill: '#ff4400',
  textEffects: [
    {
      visible: true,
      offset: { x: 3, y: 3 },
      fill: '#000000',
      stroke: {
        type: 'solid',
        color: '#ffffff',
        style: { strokeWidth: 2 }
      }
    }
  ]
})

app.tree.add(text)

渐变填充特效

const text = new EffectText({
  text: '渐变文字',
  fontSize: 64,
  fill: '#f40',
  textEffects: [
    {
      visible: true,
      offset: { x: 0, y: 10 },
      fill: {
        type: 'linear',
        from: { x: 0, y: 0.5, type: 'percent' },
        to: { x: 1, y: 0.5, type: 'percent' },
        stops: [
          { offset: 0, color: '#ff0000' },
          { offset: 1, color: '#ffff00' }
        ]
      },
      stroke: {
        type: 'solid',
        color: '#ffffff',
        style: { strokeWidth: 3, strokeJoin: 'round' }
      }
    }
  ],
  editable: true
})

多层特效叠加

const text = new EffectText({
  text: '多层特效',
  fontSize: 72,
  fill: '#ff4400',
  textEffects: [
    // 底层阴影
    {
      visible: true,
      offset: { x: 5, y: 5 },
      fill: 'rgba(0, 0, 0, 0.5)'
    },
    // 外描边
    {
      visible: true,
      offset: { x: 0, y: 0 },
      stroke: {
        type: 'solid',
        color: '#ffffff',
        style: { strokeWidth: 8 }
      }
    },
    // 内描边
    {
      visible: true,
      offset: { x: 0, y: 0 },
      stroke: {
        type: 'solid',
        color: '#000000',
        style: { strokeWidth: 4 }
      }
    }
  ]
})

📖 API 文档

EffectText 属性

继承自 Leafer UI 的 Text 组件，拥有所有 Text 属性，并额外支持：

| 属性 | 类型 | 说明 | |---------------|-----------------|--------| | textEffects | ITextEffect[] | 特效配置数组 |

ITextEffect 配置

| 属性 | 类型 | 默认值 | 说明 | |-----------|-----------------|--------|----------------| | visible | boolean | true | 是否显示该特效层 | | offset | IEffectOffset | - | 偏移配置 | | fill | IPaint | - | 填充配置（支持纯色、渐变等） | | stroke | IStrokePaint | - | 描边配置 |

IEffectOffset 配置

| 属性 | 类型 | 默认值 | 说明 | |-----------|-----------|--------|----------| | visible | boolean | true | 是否启用偏移 | | x | number | 0 | 水平偏移（像素） | | y | number | 0 | 垂直偏移（像素） |

🎯 核心特性

响应式偏移

特效偏移会根据字体大小自动缩放，保持视觉比例一致：

const text = new EffectText({
  text: '响应式特效',
  fontSize: 36, // 基准字体大小
  textEffects: [
    { offset: { x: 10, y: 10 } } // 基于 fontSize: 36 的偏移
  ]
})

// 改变字体大小时，offset 会自动缩放
text.fontSize = 72 // offset 自动变为 { x: 20, y: 20 }
text.fontSize = 18 // offset 自动变为 { x: 5, y: 5 }

视图变换支持

完美支持视图滚动、缩放、旋转、翻折等变换的渲染，支持默认的文本编辑

💡 使用场景

• 🎮 游戏标题文字
• 🎨 艺术设计海报
• 📱 应用界面装饰
• 🎬 视频封面文字
• 🏷️ 品牌 Logo 文字
• 📊 数据可视化标注

🔗 相关链接

• 在线演示
• Leafer UI 文档

🤝 贡献

欢迎提交 Issue 和 Pull Request！

License

MIT License © 2024-PRESENT XiaDeYu