PosterKit：跨框架海报生成工具

引言

为什么需要它？

因为我的团队里面有用vue也有react，而我需要管理一些功能的实现，原来一个同意登录就写了2份。于是开始思考是否有一个跨平台库可以做到write once run anywhere

首先想到的是taro，于是去到taro寻找答案，于是发现了我想要的stenciljs

stenciljs

"Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere."

框架将编写的代码转换成浏览器可识别的Web Components，所以只要是浏览器支持，那就能跑。

PosterKit

这是一个使用stenciljs来开发的海报生成工具

安装

shell 复制代码

npm i poster-kit

关于使用

这里就不直接贴代码了，直接上例子

在线体验

API

init()

如果需要批量的修改卡片的信息（width、height、x，y等），可以使用init()

一般情况下在数据回显的时候用

如果是一个空海报可以不执行init()

接收一个数组，数组内部是卡片的信息，卡片详细信息见下面add()

add()

在数组末尾插入一个元素

如果想在中间插入某个元素，请自行定义并修改数组结构，然后使用init()

传入一个对象，可传入图片类型或者文本类型

~~如果插入元素到指定位置的需求多，也不是不能加~~

// 图片类型

ts 复制代码

{
    id: new Date().getTime(),
    width: 300,
    height: 300,
    x: 0,
    y: 0,
    image,
    type: 'image',
}

// 文字类型

ts 复制代码

{
    id: new Date().getTime() + 1,
    width: 300,
    height: 200,
    x: 0,
    y: 0,
    text: '你好世界你好世界1234567890🤔abcdefghijklmnopqrstuvwxyz',
    type: 'text',
    fontSize: 32,
    fontFamily: 'cursive',
    color: '#db3f9178',
    fontWeight: 'bold',
    fontStyle: 'italic',
    decoration: 'line-through',
}

color最后是传入给svg标签的fill字段，只要是fill支持的格式就都可以

记住定义id，并且保证唯一性

updateCurrentData()

手动更新卡片信息

传入卡片对象

内部会通过id来匹配并更新信息

currentDataChange()

当前选中卡片的数据更新后的回调

如果是使用html来使用插件，需要使用DOMContentLoaded来监听元素的响应

js 复制代码

document.addEventListener('DOMContentLoaded', function () {
  const kitBox = document.querySelector('#kitBox')
  kitBox.addEventListener('currentDataChange', function (event) {
    currentDataChange(event.detail)
  })
})

vue和react的用户直接在KitBox元素中传入你的监听方法就好

tsx 复制代码

<KitBox
  ref={kitBoxRef}
  width={1080}
  height={1920}
  onCurrentDataChange={(e) => currentDataChange(e.detail)}
/>

html 复制代码

<kit-box
  ref="kitBoxRef"
  :width="1080"
  :height="1920"
  @currentDataChange="currentDataChange"
/>

这里注意下vue和react使用的元素写法不同

再讲几点

react和vue在使用的时候需要安装对应的库，具体可以查看上面的例子
需要用一个div来包裹元素来包裹KitBox，并且需要设置div元素宽高，定义你的编辑区域最大有多大
KitBox需要传入width和height两个属性，这用来定义你的海报实际的大小。并且也会根据父级元素来调整自己在页面中的大小，根据传入的这个属性按比例调整，保证最后输出的海报所见即所得
如果对象是iamge，那么需要传入一个Image对象，关于这一点其实我还是在纠结，最先的想法是用户自己去处理跨域什么的，那么工具可以直接用这个Image来画进画布。但是传入一个src地址也可以工具自己来处理（好吧，我后面会对这块做调整，尽可能减少用户的心智负担）

项目地址: github.com/Fairfarren/...

文档地址: fairfarren.github.io/PosterKit-d...

大家有什么需求或者优化点可以提issue，也可以点一个start再走，谢谢🙏