直接点工具地址直接点我>>painter-custom-poster由于github页面挂载，打开速度会比较慢，请耐心等待或自行解决git网速问题。背景在制作小程序的时候，我们经常会有分享小程序到朋友圈的需求，但是朋友圈是不允许直接分享小程序的，那么我们还有其他的解决方案吗？答案肯定是肯定的，就是在canvas中生成图片生成个性海报，分享图片到朋友圈分析小程序的需求非常多，但是用过canvas的人会发现一些难以预料的问题>>关于小程序直接在画布上绘制图形。对于普通的开发者来说，代码会特别乱，很难维护。优化不同环境下渲染的代码往往需要很长时间。真机解决图片不显示，位置不对应等问题。你能开发一个生成海报的插件库吗？首先，你只需要提供一个简单的参数配置文件，就可以解决Canvas这个小程序遇到的问题。一些大大小小的坑都有严格的测试环节，解决各种环境、各种机型遇到的问题，并提供稳定的在线版本长期维护，并有专人更新迭代更新的功能。当然有可能。以前也想尝试开发一个，后来试了几个现成的工具就放弃了。毕竟轮子是需要不断维护和更新的。此外，已经有这么多优秀的现成工具。一个插件，我为什么要费心去写呢？贡献代码不是更美吗？程序组件-小程序海报组件>>wxa-plugin-canvas微信小程序：一个json帮你分享朋友圈图片>>mp_canvas_drawer我要做什么？..想去是不可能的。为了做出更酷的海报，想了很久。虽然我有插件，只需要提供配置代码就可以做海报了，但是发现还是有些问题。海报的效率还是不够高。微调一个元素的大小和位置，需要不断修改和保存代码，稍等片刻，查看效果。一个小小的位置调整可能需要来回调整无数次，这真是令人恼火。这就是最简单的机械化劳动，这辈子都不可能手握一份完美的手稿，传给设计师，这个位置不对，这个线太粗，这个颜色太重……信不信我打死你。对于一些精致复杂的海报，实现起来真的很不现实，那我需要怎么办呢？，请点击此链接体验>>painter-custom-poster点击左侧示例展示中的任意一个示例，然后导入代码即可查看效果图。现在你应该能猜到我的想法了。本来想用简单的html和css加拖拽功能，简单尝试后就放弃了，因为这个功能实在是太复杂了，简单的工具肯定不够用。找到了这个库fabric.js，真的是太棒了，赞不绝口，唯一的缺点就是中文教程太少了，得学英文和谷歌翻译fabric介绍，可以轻松创建任何简单的形状、复杂形状、图像；将它们添加到画布并以您想要的任何方式修改它们：位置、大小、角度、颜色、描边、不透明度等。如何使用当前的工具分为4个部分。示例显示屏用于展示用户设计的一些精美的海报。通过点击相应的例子，将代码导入到画布区，可以显示真实的海报效果，画布中添加的元素可以直接用鼠标进行拖动、旋转、缩放操作区第一行的四个按钮复制将canvas的显示效果转换成小程序海报插件库需要的json配置代码的代码。目前我使用的是Painter库，默认会转换成这个插件的配置代码。直接复制到card.js中查看代码。是否使用此功能无关紧要。可以直观的看到生成的代码导出为json。canvas转fabric所需的json代码方便将自己设计的海报代码保存并导入json。导入3步导出的json代码，设计好的海报样式就会显示在画布上添加图片的属性参数详见下方二维码。添加二维码的属性参数详见下方第三行各元素的详细设置。当对象被激活时，您可以执行拖动、旋转和缩放等操作。激活区域只有在对象被激活时才会出来。用于设置激活对象的各种配置参数。修改值后，当前激活会实时更新。物体对应状态，点击其他区域，本模块会隐藏快捷键'←'向左移动一个像素'→'向右移动一个像素'↑'移动一个像素'↓'向下移动一个像素'ctrl+z'撤销'ctrl+y'恢复'delete'删除'['增加元素层级']'减少元素层级，按顺时针旋转度数0width,heightview宽高top,left,如css中绝对布局的作用0background背景色rgba(0,0,0,0)borderRadius边框圆角0borderWidth边框宽度0borderColor边框颜色#000000shadowshadow''shadow可以修改image、rect、text等修改text时，相当于text-shadow；修改image和rect时，相当于box-shadow使用方法：shadow:'h-shadowv-shadowblurcolor';h-shadow:必填。水平阴影的位置。允许负值。v-shadow：必需。垂直阴影的位置。允许负值。模糊：必填。模糊的距离。颜色：必填。阴影的颜色。例如：shadow:10105#888888渐变色支持可以在canvas的background属性中使用以下方法实现CSS3渐变色，其中radial-gradient渐变的中心点为圆心，半径为是最长的边，目前不支持自己设置。线性渐变(-135deg,blue0%,rgba(18,52,86,1)20%,#98780%)径向渐变(rgba(0,0,0,0)5%,#0ff15%,#f0f60%)!！！注意：颜色后面一定要写百分比。CanvasAttributes属性说明默认times控制生成插件代码的宽度，例如canvas宽度为100，times为2，生成值为2001行数不限，根据width，lineHeight行高（文本基线上下行之间的距离）1.3fontSize字体大小30color字体颜色#000000fontWeight字体粗细。只支持normal,boldnormaltextDecoration文字修饰,支持noneunderline,overline,linethroughnonetextStylefill:填充样式,stroke:空心样式fillfontFamilyfontsans-seriftextAlign文本对齐方式,分为left,center,rightleft备注:fontFamily,工具中第一个实例支持文本字体，但为什么在导入小程序时看不到它们？小程序官网加载网页字体的方法>>加载字体教程>>文字高度是maxLineslineHeight2字段一起计算的Imageattribute属性描述Defaulturl图片路径modeimage裁剪缩放方式aspectFillmode参数详解scaleToFill缩放图片到固定宽高aspectFill图片裁剪显示对应的宽高自动填充宽度和满显示高度自适应居中显示Tips（必读~）本工具不考虑兼容性，如果发现不兼容请使用google浏览器。Painter只支持这几种图形，所以不支持圆、线等。如果编辑时某个元素被遮挡无法操作，请选中该对象，使用[]快捷键增加或减少层级文字一个元素不支持直接缩放操作，因为文本大小和元素高度不容易计算，可以通过修改active列中的maxLineslineHeightfontSize值来动态改变元素。如果您发现导出的代码中有一个元素被另一个元素遮挡，请手动调整该元素的位置。json数组中的元素显示的越远，层级越高。由于painter没有提供level参数，所以目前只能做这个。这个工具的导出码都是以px为单位的。为什么不支持rpx，因为painter在rpx单位下，对于阴影和边框宽度会有尺寸计算问题。由于原例没有提供px图片生成方案，可以在这里下载修改后的demo>>Painter，解决文字宽度随字数动态变化的问题。根据文本区域的长度，在文本后面添加一个图标进行布局。请参考Painter文档教程直接修改源码。由于这个工具的开发有些难度，如果在使用中有BUG、建议或者问题，请提issue，源码地址>>painter-custom-poster海报投稿如果你设计的海报好看并且愿意为开源做贡献，你可以提供您的海报代码和缩略图。示例代码文件在示例中是按顺序排列的。比如库中的例子是example2.js，那么你添加example3.js和example3.jpg图片。示例请参考文件夹中的源码，然后在index.js中导出导出代码。不要格式化代码，会报错。请将原始模型复制到json字段中生成缩略图。一开始我想直接在这个工具里面生成图片，但是因为浏览器图片跨域的问题导致报错失败，所以请到小程序生成并保存图片，图片质量设置为0.2，然后去tinypng压缩图片，找到painter.js，替换下面的方法生成一张质量为0.2的图片，代码如下saveImgToLocal(){constthat=this;setTimeout(()=>{wx.canvasToTempFilePath({canvasId:'k-canvas',fileType:'jpg',quality:0.2,success:function(res){that.getImageInfo(res.tempFilePath);},失败：function(error){console.error(`canvasToTempFilePathfailed,${JSON.stringify(error)}`);that.triggerEvent('imgErr',{error:error});}},this);},300);}TODO[]颜色值选择支持调色板工具[]文本填充支持[]缩放位置弹跳优化[]如果需求量大，支持生成其他几个插件库代码~制作不易，如果你说得对如果对你有帮助请给个star吧??谢谢~
