那可不可以开发一款生成海报的插件库呢
以上的要求当然是可以的,曾经的我也想尝试开发一款出来,但是后来尝试了几款现成的工具之后就放弃了,毕竟轮子这个东西,是需要不断维护更新的,另外已经有这么多优秀现成的插件了,我为何还要费力去写呢,贡献代码岂不更美哉,以下是我收集的几款
唠了这么多,好像提供给大家插件就没我什么事情了...想走是不可能的为了能够制作出更酷炫的海报,我思考了许久虽然有了插件后,只需要提供配置代码就能够制作出一款海报来,但是我发现还是有些许问题
目前工具一共分成4部分
用来将一些用户设计的精美海报显示出来,通过点击对应的例子并将代码导入画布中
显示真实的海报效果,画布里添加的元素,都可以直接用鼠标进行拖动,旋转,缩放操作
第一排四个按钮
第二排五个按钮
第三排
各种元素的详细设置参数
激活对象是指鼠标点击画布上的元素,该对象会被蓝色的边框覆盖,此时该对象被激活,可以执行拖动旋转缩放等操作激活区只有对象被激活才会出来,用来设置激活对象的各种配置参数,修改value值后,实时更新当前激活对象的对应状态,点击其他区域,此模块将隐藏
可以同时修饰image、rect、text等。在修饰text时则相当于text-shadow;修饰image和rect时相当于box-shadow
使用方法:
shadow:'h-shadowv-shadowblurcolor';h-shadow:必需。水平阴影的位置。允许负值。v-shadow:必需。垂直阴影的位置。允许负值。blur:必需。模糊的距离。color:必需。阴影的颜色。举例:shadow:10105#888888渐变色支持你可以在画布的background属性中使用以下方式实现css3的渐变色,其中radial-gradient渐变的圆心为中点,半径为最长边,目前不支持自己设置。
linear-gradient(-135deg,blue0%,rgba(18,52,86,1)20%,#98780%)radial-gradient(rgba(0,0,0,0)5%,#0ff15%,#f0f60%)!!!注意:颜色后面的百分比一定得写。
备注:
mode参数详解
如果你设计的海报很好看,并且愿意开源贡献,可以贡献你的海报代码和缩略图,例子代码文件在example中,按顺序排列,例如现在库里例子是example2.js,那你添加example3.js和example3.jpg图片,事例可以参考一下文件夹中源码,然后在index.js中导出一下
代码不要格式化,会报错,请原模原样复制到json字段里
saveImgToLocal(){constthat=this;setTimeout(()=>{wx.canvasToTempFilePath({canvasId:'k-canvas',fileType:'jpg',quality:0.2,success:function(res){that.getImageInfo(res.tempFilePath);},fail:function(error){console.error(`canvasToTempFilePathfailed,${JSON.stringify(error)}`);that.triggerEvent('imgErr',{error:error});}},this);},300);}