likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 31

接上文【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,下面实现上比较粗糙,无脑递归把所有的图层转化为图片,待优化

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

参考 github.com/woai3c/visu…

转载自:https://juejin.cn/post/7224007334514425911
评论
请登录