跳到主要内容

T 恤设计器

很多电商 / 印花业务只需要一个极简的画布 + 一个下载按钮：用户在 T 恤设计区域里加点文字或图片，点击下载得到可印刷的透明底图，订单系统再把这张图合到真实 T 恤效果图上展示。

这一节展示如何用 Ydesign 只保留画布、其他所有 UI 都不要。

整体思路​

  1. 画布尺寸设为印花实际像素（比如 600 × 800）
  2. 背景设为透明（rgba(0,0,0,0)），Ydesign 会自动渲染棋盘格提示
  3. 只用 <Workspace /> 组件，不挂 <Toolbar /> / <SidePanel />
  4. 自定义一个"添加文字"和"下载"按钮
  5. 导出 PNG 时用 multiplier: 2 保证印刷清晰度

实现代码​

import { observer } from 'mobx-react-lite';
import { Button } from 'antd';
import { createStore } from '@ydesign/react-editor';
import Workspace from '@ydesign/react-editor/canvas/workspace';
import '@ydesign/react-editor/style.css';

const store = createStore({ key: 'YOUR_API_KEY' });

// 关键配置：尺寸 + 透明背景
store.setSize({ width: 600, height: 800 });
store.setBackgroundColor('rgba(0, 0, 0, 0)');

// 默认放一段文字
store.addElement({
  type: 'Textbox',
  text: '印你想印',
  left: 100,
  top: 360,
  width: 400,
  fontSize: 72,
  fontFamily: 'Roboto',
  fill: '#000000',
  textAlign: 'center',
});

const App = observer(() => {
  const handleAddText = () => {
    store.addElement({
      type: 'Textbox',
      text: '新文字',
      left: 100,
      top: 100,
      width: 400,
      fontSize: 48,
      fill: '#111',
    });
  };

  const handleDownload = async () => {
    // multiplier=2 输出 1200×1600 高清印花图
    await store.saveAsImage({
      multiplier: 2,
      format: 'png',           // 透明背景必须用 png
      fileName: 'my-t-shirt.png',
    });
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div style={{ padding: 12, display: 'flex', gap: 8 }}>
        <Button onClick={handleAddText}>添加文字</Button>
        <Button type="primary" onClick={handleDownload}>下载印花图</Button>
      </div>
      <div style={{ flex: 1 }}>
        <Workspace store={store} />
      </div>
    </div>
  );
});

export default App;

关键点​

  • 透明背景：Workspace 会自动显示棋盘格，用户能看见"哪里是透明"，下载的 PNG 同样是透明底图
  • multiplier：印花推荐 2× ~ 4×，平衡体积与清晰度；印刷级 300dpi 取 4×
  • 只保留 Workspace：把 Toolbar / SidePanel 拿掉，省下屏幕空间给画布本身

扩展思路​

  • 加一个"选颜色"按钮：调 store.set({ fill: color }, selectedElement)
  • 加"上传图片"：用 setUploadFunc 对接你的 OSS
  • 预览在真实 T 恤上的效果：导出图 + 叠加在 T 恤模板图上（CSS background-blend-mode 或服务端合成）

相关文档​