乐趣区

关于javascript:思否猫拼接怪编辑器

jiezi

前言

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 程序员节，欢送正在浏览的你也退出。

交换群

退出移动版