思否猫拼接怪编辑器

前言

1024程序员节马上就要来了，我们借着这个机会实现一个社区的吉祥物思否猫的编辑器，暂时起名【思否猫拼接怪】,唯一的遗憾就是素材不是精确到胳膊腿的

demo

PC在线体验

效果图

实现思路

1. 左侧面板提供一些思否猫的零件（耳朵、鼻子等等）[正在抠图中]
2. 用户可以在左侧面板点击零件，然后零件会出现在右侧的编辑区域
3. 编辑区域用户可以对零件进行位置、大小、图层的调整，然后设计出自己喜爱的思否猫

准备工作

1. 用到的拖拽库moveable
2. 导出图片使用html2canvas
3. 系统架子直接使用了ant design pro的基础架子

核心代码

详细的实现细节比如页面布局等就不在这里进行阐述了，我们只列举下核心的一些相关代码

1. 左侧面板图片上传并转为base64

   const getBase64 = (img: RcFile, callback: (url: string) => void) => {
     const reader = new FileReader();
     reader.addEventListener('load', () => callback(reader.result as string));
     reader.readAsDataURL(img);
   };

2. 节点拖拽
   这个功能依赖了moveable这个插件

    <Moveable
      target={target}
      container={null}
      flushSync={flushSync}
      edge={false}
      draggable={true}
      throttleDrag={0}
      snappable={true}
      snapCenter={true}
      origin={false}
      resizable={true}
      throttleResize={0}
      rotatable={true}
      rotationAtCorner={false}
      scrollable={true}
      pinchable={true}
   />

3. 图层管理
   图层用了简单的实现方式，用css的zindex来粗暴的进行实现

4. 导出图片

   const clipImgBase64: any = canvas.toDataURL(); // 生成图片url
   const link: any = document.createElement('a');
   link.href = clipImgBase64; //下载链接
   link.setAttribute('download', new Date().toLocaleString() + 'sf_截图.png');
   link.style.display = 'none'; //a标签隐藏
   document.body.appendChild(link);
   link.click(); // 点击下载
   document.body.removeChild(link); // 移除a标签

5. 导出gif
   正在开发，使用gif.js进行渲染导出

本文参与了1024程序员节，欢迎正在阅读的你也加入。