低代码概念为自己做一款辅助开发工具。

场景：有一内段时间经常开发活动H5，都需要通过海报完成分享：所以出现了大量Pixi或html2cavas开发海报的重复工作。所以根据自己的开发习惯，做一个帮助我开发的小工具。

我通常都是拿到设计稿后自己导素材上传CDN或者图床，然后再拿到项目里面用

预览地址 目前还是比较粗糙有空慢慢优化

代码产物预览

考虑简化活动海报定制开发、以及方便二次补充交互：决定拖拽设置海报并输出源代码：

参考了经常使用的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，下面实现上比较粗糙，无脑递归把所有的图层转化为图片，待优化

参考 github.com/woai3c/visu…