PosterBuilder 海报生成器

圆角功能使用说明

功能概述

PosterBuilder 组件现在支持为生成的海报添加圆角效果。您可以通过配置参数来控制海报的圆角样式。

配置参数

1. 统一圆角 (borderRadius)

为海报四个角设置相同的圆角半径：

const config = {
  width: 600,
  height: 800,
  backgroundColor: '#4F46E5',
  borderRadius: 30, // 统一圆角半径
  // ... 其他配置
}

2. 自定义圆角 (borderRadiusGroup)

为海报四个角分别设置不同的圆角半径：

const config = {
  width: 600,
  height: 800,
  backgroundColor: '#4F46E5',
  borderRadiusGroup: [50, 20, 50, 20], // [左上, 右上, 右下, 左下]
  // ... 其他配置
}

3. 无圆角（默认）

如果不设置 borderRadius 或 borderRadiusGroup，海报将保持原有的直角样式：

const config = {
  width: 600,
  height: 800,
  backgroundColor: '#4F46E5',
  // 不设置圆角参数，保持直角
  // ... 其他配置
}

使用示例

<template>
  <PosterBuilder
    :config="posterConfig"
    :show-loading="true"
    @success="onPosterSuccess"
    @fail="onPosterFail"
  />
</template>

<script>
import { ref } from 'vue'
import PosterBuilder from '@/components/PosterBuilder/index.vue'

export default {
  components: {
    PosterBuilder
  },
  setup() {
    const posterConfig = ref({
      width: 600,
      height: 800,
      backgroundColor: '#4F46E5',
      borderRadius: 30, // 添加圆角
      texts: [
        {
          text: '圆角海报标题',
          x: 300,
          y: 100,
          fontSize: 32,
          color: '#FFFFFF',
          textAlign: 'center'
        }
      ]
    })

    const onPosterSuccess = (result) => {
      console.log('海报生成成功:', result.tempFilePath)
    }

    const onPosterFail = (error) => {
      console.error('海报生成失败:', error)
    }

    return {
      posterConfig,
      onPosterSuccess,
      onPosterFail
    }
  }
}
</script>

注意事项

1. 优先级：如果同时设置了 borderRadius 和 borderRadiusGroup，将优先使用 borderRadiusGroup
2. 数组格式：borderRadiusGroup 必须是包含4个数字的数组，分别对应 [左上, 右上, 右下, 左下] 四个角的圆角半径
3. 单位：圆角半径的单位与画布尺寸单位一致
4. 兼容性：该功能向下兼容，不设置圆角参数时保持原有行为

重要修复说明

问题：之前版本中，即使设置了 borderRadius 或 borderRadiusGroup，生成的海报四个角仍然是直角。

原因：圆角背景被后续绘制的图片（特别是背景图）覆盖，导致圆角效果失效。

解决方案：使用 Canvas 的 clip() 方法设置全局裁剪路径，确保所有绘制内容都在圆角范围内。

测试页面

项目中提供了测试页面 src/pages/TestPoster/index.vue，您可以通过该页面测试不同的圆角效果。

技术实现细节

1. 裁剪路径设置：在绘制任何内容之前，先根据圆角配置创建裁剪路径
2. 全局生效：裁剪路径对后续所有绘制操作（图片、文字、块等）都生效
3. 上下文管理：使用 ctx.save() 和 ctx.restore() 正确管理画布上下文