思否猫拼接怪编辑器

思否猫拼接怪编辑器
前言

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

demo

PC在线体验 :https://wangzc.wang/sf/

效果图


实现思路

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

  • 准备工作

  • 用到的拖拽库moveable (https://www.npmjs.com/package/react-moveable)
  • 导出图片使用html2canvas (https://html2canvas.hertzen.com/)
  • 系统架子直接使用了ant design pro的基础架子

  • 核心代码

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

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

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

  • 节点拖拽
    这个功能依赖了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}
    />

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

  • 导出图片
  •  
     
    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标签

  • 导出gif
    正在开发,使用gif.js进行渲染导出