低代码概念为自己做一款辅助开发工具。
接上文【Pixi初体验,记录一次游戏类H5开发过程。】
场景:有一内段时间经常开发活动H5,都需要通过海报完成分享:所以出现了大量Pixi或html2cavas开发海报的重复工作。所以根据自己的开发习惯,做一个帮助我开发的小工具。
我通常都是拿到设计稿后自己导素材上传CDN或者图床,然后再拿到项目里面用
预览地址 目前还是比较粗糙有空慢慢优化(github page,没有梯子可能慢
)
代码产物预览
代码产物效果
考虑简化活动海报定制开发、以及方便二次补充交互:决定拖拽设置海报并输出源代码:
参考了经常使用的Zeplin或Figma的布局和交互,规划出初版草稿:
分析海报所需的元素:文字、图片、二维码等
// 细分后、标记为六种
export enum TemplateType {
BACKGROUND = 'background',
CONTAINER = 'container',
TEXT = 'text',
HEAD = 'head',
IMAGE = 'image',
QRCODE = 'qrcode',
}
- 1、拖拽和进入判定使用的是drag和drop,在需要渲染的列表比追加组件
- 2、开发一层UI预览组件: 通当前拖入的列表渲染
- 3、开发一套产出代码的模板字符串:
// 头像组件模板字符串
export const getHeadTpl = (params: CompItem) => {
const { type, compId, point, width, height, url } = params;
const { x, y } = point;
const compName = type + compId;
const radio = width / 2;
return {
PIXI: `
const ${compName}: PIXI.Container = new PIXI.Container();
${compName}.x = ${x};
${compName}.y = ${y};
const userHead${compId} = createSprite('${url}', {
width: ${width},
height: ${width},
});
const graphics${compId} = new PIXI.Graphics();
graphics${compId}.beginFill(0xe20d3f);
graphics${compId}.drawCircle(${radio + x},${radio + y}, ${radio});
graphics${compId}.endFill();
${compName}.mask = graphics${compId};
${compName}.addChild(userHead${compId});`,
DOM: `
<img class="${compName}" src="${url}">`,
CSS: `
.${compName} {
position: absolute;
left: ${x}px;
top: ${y}px;
width: ${width}px;
height: ${height}px;
border-radius: 50px;
}`,
};
};
当前未完成的编辑可以暂存到本地 另外还预设了两个海报模板作为示例
可以输出Pixi代码和html2canvas代码 粘贴以及用
解析PSD输出代码结构
处理psd用的是psd.js,下面实现上比较粗糙,无脑递归把所有的图层转化为图片,待优化
转载自:https://juejin.cn/post/7224007334514425911