共计 1183 个字符,预计需要花费 3 分钟才能阅读完成。
前言
1024 程序员节马上就要来了,咱们借着这个机会实现一个社区的吉祥物思否猫的编辑器,临时起名【思否猫拼接怪】,惟一的遗憾就是素材不是准确到胳膊腿的
demo
PC 在线体验
效果图
实现思路
- 左侧面板提供一些思否猫的整机(耳朵、鼻子等等)
[正在抠图中]
- 用户能够在左侧面板点击整机,而后整机会呈现在右侧的编辑区域
- 编辑区域用户能够对整机进行地位、大小、图层的调整,而后设计出本人青睐的思否猫
筹备工作
- 用到的拖拽库 moveable
- 导出图片应用 html2canvas
- 零碎架子间接应用了 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
进行渲染导出
本文参加了 1024 程序员节,欢送正在浏览的你也退出。
交换群
正文完
发表至: javascript
2022-10-17