跳到主要内容

书籍封面编辑器

书籍封面是一个典型的"编辑一张图 + 实时在 3D 书本预览里展示"场景。思路是：

  1. 编辑器负责扁平的平面设计（标题、作者、背景图）
  2. 监听画布变化，实时导出 dataURL
  3. 把 dataURL 贴到一张静态的 3D 书本样机图上，给用户"所见即所得"的感觉

画布部分​

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' });

// 典型书籍封面比例：210 × 297（A4 竖版，单位 mm @ 300dpi）
store.setSize({ width: 2480, height: 3508 });

store.addElement({
  type: 'Image',
  src: 'https://images.unsplash.com/photo-1543002588-bfa74002ed7e?w=2480',
  left: 0,
  top: 0,
  width: 2480,
  height: 3508,
});

store.addElement({
  type: 'Textbox',
  text: '一本好书',
  left: 200,
  top: 600,
  width: 2080,
  fontSize: 240,
  fontFamily: 'AlibabaPuHuiTi_2_115_Black',
  fill: '#ffffff',
  textAlign: 'center',
});

响应式预览​

用 mobx 的 reaction 监听画布变化，每 500ms 重新生成 dataURL：

import { useEffect, useState } from 'react';
import { reaction } from 'mobx';
import Workspace from '@ydesign/react-editor/canvas/workspace';

export default function BookCoverApp({ store }) {
  const [preview, setPreview] = useState<string | null>(null);

  useEffect(() => {
    // 延迟 500ms 生成预览，避免高频拖拽时性能问题
    const dispose = reaction(
      () => store.toJSON(),
      async () => {
        const dataUrl = await store.toDataURL({ multiplier: 0.3, format: 'jpeg' });
        setPreview(dataUrl);
      },
      { delay: 500 },
    );
    return dispose;
  }, [store]);

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      {/* 左侧：编辑器 */}
      <div style={{ flex: 1 }}>
        <Workspace store={store} />
      </div>

      {/* 右侧：3D 书本样机预览 */}
      <div style={{ width: 400, padding: 24, background: '#f5f5f5' }}>
        <div style={{ position: 'relative', width: 280, margin: '0 auto' }}>
          {/* 静态的书本样机图 —— 可以用 Mockup 设计资源 */}
          <img src="/img/book-mockup.png" style={{ width: '100%' }} />

          {/* 把编辑器输出的平面封面贴到样机的封面区域 */}
          {preview && (
            <img
              src={preview}
              style={{
                position: 'absolute',
                top: '6%',
                left: '28%',
                width: '60%',
                height: '88%',
                objectFit: 'cover',
                transform: 'perspective(800px) rotateY(-18deg)',  // 简单的 3D 倾斜
                transformOrigin: 'left center',
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
}

关键点​

  • multiplier: 0.3：预览不需要高清，缩小倍数能大幅加快生成速度
  • reaction({ delay: 500 })：500ms 节流，避免用户拖拽时每秒生成几十次预览
  • CSS transform：快速实现一个"伪 3D"效果。如果想要真实的 3D 书本，可以接入 Three.js 或 CSS 3D 贴图

扩展思路​

  • 多角度预览：平、翘起、合上的书本，在 UI 提供切换
  • 商品导出：点"生成商品图"时用 multiplier: 2 生成真正高清的封面图给印刷厂

相关文档​