Painter 项目点子征集贴
CPPAlien opened this issue · comments
如果你有任何想到用 Painter 可以实现的点子，欢迎留言分享，我们一起让 Painter 更强大好用。
可以出个wepy版的吗？
可以增加一个基于圆心点绘制图片的功能么，用户上传的图片具有不确定性，此时无法确定坐标，能确定的是圆心点和图片宽高
背景可以来点儿纹理。
@jerryzhoujw 纹理，你可以通过设置背景为图片来实现
canvas用绘制图片的时候需要下载图片 加载网络图片如果很慢或者出现意外没下载下来 能不能提供loading 或者对外的回调 方便提供友好的等待交互 比如view里面url写网络图片地址 如果没加载到 我有个地方能执行wx.showloading
@GPPoseidon999 这个你在 setData 的时候进行 showloading，接收到 imgOk 或 imgErr 的时候停止就好了，目前 下载失败会打印错误日志，导致某个网络图片出无法绘制，但不影响整体绘制
如果能支持简单的markdown语法就太棒了
@CPPAlien image中的aspectFill 模式和微信小程序中的图片的aspectFill 模式他们的行为好像不一致。有时候不能在保持比例的情况下整个填满我设置的绘制区域。我想要微信小程序的image标签的aspectFill 模式的效果。
文字字数不确定，导致海报高度不固定。目前还没用这个框架，请问下可以用文字把框撑开吗？ 目前我们在用的另一个框架实现不了，找不到您的联系方式，只能在这里给你留言了
@houyanchao
我就是用这个来画海报，同样高度不确定。文字把画框撑开是不行的，只有自己写json，
自己计算这个画框的高度
let painterTemplate = { background: '#ffffff', width: '750rpx', height: '2200rpx', views: [] }
向这个views中Push要画的东西，自己手动计算好高度
最后再修改下高度painterTemplate.height = xxx
啥时候文字也支持background呀，文字有background就可以支持更多样式了
@CPPAlien 做了一个wepy版本，希望可以帮助到其他开发者 https://github.com/hjyue1/painter-wepy
canvas的高度可以自适应吗?
想问一下 通过接口获取的数据是json数据格式 ，怎么把其中的name age 属性绘制在图片上？？？
canvas的高度可以自适应吗?
自己去代码计算高度不就oK了么
是否可以不展示图片，直接获取生成的图片路径吗
我就是用Painter来生成海报的，在在此感谢 @CPPAlien ,嘻嘻我的项目是WeHalo
https://github.com/aquanlerou/WeHalo
图片圆角还是有点问题，设置了圆角，生成的图片没有圆角
最外围的圆角在有些机型上确实有些问题
号外，Painter 的画布背景 和 rect 的 color 已可以设置 css3 的渐变色，欢迎试用
写了一个小程序春联对联，使用Painter进行横批和上下联排版，暂未开源，感谢作者。
@donly 这个小程序做的非常清晰，老哥什么时候开个源啊，现在一头雾水
号外，Painter 全面支持了 shadow 属性。具体用法请看 readme。
nice
写了个小程序，用Painter生成名片，挺棒的。感谢作者。
写了一个 任天堂 switch 游戏的比价小程序「SwitchDog」，生成海报图片用的是 Painter，感谢作者👍
海报例图😳：
mpvue 版引入一直不成功，页面出不来，我的扣扣是 841388779，请问可以加一下，沟通一下吗？
@liulangdejiamao 可以看看mpvue官方文档，有写怎么引入原生开发的。或者可以用下mpvue-entry，这个引入更简洁
@nciefeiniu 你好，我回去研究一下mpvue-entry，但是我现在有个问题，https://github.com/Kujiale-Mobile/Painter/wiki/mpvue-%E6%8E%A5%E5%85%A5%E6%96%B9%E5%BC%8F 这里面最下边有个demo，这个demo，我这边跑是报错的，想问一下，是有更新还是？
假如数据更新，如何让绘制的canvas的数据实时更新（就是painter的数据缓存问题）
@xiaoshuoyiyi url 变了就行
解决了，谢谢！
@CPPAlien 问题已经都解决了，非常感谢！
大佬，我问下，同一个页面可以使用多个painter的实例嘛
@xiaoshuoyiyi 可以啊
@CPPAlien 我现在同一个页面用到了多个实例额，但是每次只显示一个，这个是哪里的问题呀？
多张图片根据鼠标移动位置旋转的时候卡顿怎么办
应该可以做到facebook的彩色文字效果吧。
文字上下居中排列如何做？
调试了一个，还不错。
感谢作者，做了一个小程序【小确幸】使用了你的组件
生成样式如下
号外：目前 Painter 支持了获取文字宽度，终于可以在文字后面跟上图标啦！
用法：
1，给自己的 text 文本 view 加个id，如：id: 'my-text-id',
2，后面的 view 的 left 和 right 属性则可使用，如 left: ['10rpx', 'my-text-id', 比例]
则实际的 left 为：10rpx + my-text-id 文本宽度 x 比例
生成的图片模糊 怎么控制
是否支持生成2倍图之类的
@lisaiqi123 @yoder 图片的像素目前根据你绘图时的外框的的大小决定，当前你可以用把你的整个绘制乘以一个数着的方式来起到放大图片像素的作用。
什么时候支持设置文字间距呢？
请问现在是否支持文字垂直居中呢,如果支持请问是怎么控制垂直居中啊
请问现在是否支持文字垂直居中呢,如果支持请问是怎么控制垂直居中啊
我是根据字数长度大概计算的位置
@CPPAlien 意思是如果绘制的大小是500678 想要像素大 用成2倍10001356吗 我试过再缩小painter组件，但是scale（0.5）用不了，这样的话在手机上canvas画布太大了
号外！！！目前文字已支持换行符
使用 Painter 可以轻松实现竖排文字展示效果
能不能考虑参照fabricjs参数和展示效果修改一下代码,我在用fabricjs写一个生成代码的工具
请问现在是否支持文字垂直居中呢,如果支持请问是怎么控制垂直居中啊
canvas用绘制图片的时候需要下载图片 加载网络图片如果很慢或者出现意外没下载下来 能不能提供loading 或者对外的回调 方便提供友好的等待交互 比如view里面url写网络图片地址 如果没加载到 我有个地方能执行wx.showloading
在回调 imgok 之前就是图片的加载时间
同问 现在是否支持文字垂直居中呢,如果支持请问是怎么控制垂直居中呢？ 另外请教文字背景色能否类似于 rect 或 background撑开宽高呢？
号外号外！！！Painter 现支持可以直接设置生成的图片分辨率大小，使用 widthPixels 设置完宽度后，可以在不同手机上都生成该像素宽度的图片。
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>
多行文字时,避免标点符号出现在行首
如何获取绘制的图片的高度？如果多张图片绘制，宽度固定，高度设置auto。需要计算高度，动态设置画布的高度。
可以设置id来相对布局 @QiangZhanghaha
正在给一个1500万粉丝的大号做小程序，遇到两个需求，有一个绕不过去：
1、多层级的支持，用户想把复杂结点做成海报，有嵌套结构，现在的方法是平面化，然后按照层级贴上去，覆盖；
2、在某些类似图表的需求，例如结构中“圆形+遮挡=扇形”，用到了结点的overflow：hidden；但是刚才说的（1）中，平面化会导致上层覆盖下层，所以还是没辙；
所以期望增加两个功能支持：
views可以多层，支持overFlow的特性，类似绘画容器，超出部分不会覆盖；
感谢开发出非常方便的工具，简化了很多开发难度。
和大家分享用 Painter 做的小程序《极简文章分享》。可以将公众号推送生成带有二维码的图片，方便在朋友圈中分享，区别于原生的链接样式，更加引人注目。
感谢Painter，再次分享我的另一个小程序，依然利用Painter，这次用了元素之间的相对位置沿着向下绘图，根据不同图片大小，自动向下计算位置。
《产品笔记｜发现优秀产品细节》
作者您好，我有三个横向排列的文本，但第三个文本只能获取第二个文本的宽度，不能加上第一个文本的宽度。这样就没有办法将第三个文本放在第二个文本的右边了，请问有解决方法么？万分感谢
并发生成多张海报有时候有些有些海报生成不完整。场景：一个商品下有5个商品主图片，需要生成对应商品主图的分享海报（也就是5张），有些时候图片没有画出来
多个text一行显示，如何控制left？
感谢Painter，分享我的一个小程序——萌荐。
利用Painter生成商品海报/邀请好友海报，分别在商品详情页-分享赚-生成海报；活动-邀请好友。
再次感谢！
组件很强大,感谢开源,封装基本交互后使用mini-share
小程序：源创智造
类型：工具箱、博客(hexo)
已对painter进行开源声明
作者您好，我有三个横向排列的文本，但第三个文本只能获取第二个文本的宽度，不能加上第一个文本的宽度。这样就没有办法将第三个文本放在第二个文本的右边了，请问有解决方法么？万分感谢
可以查看源码，自定义你想要的这个需求，pen.js里可以处理，具体可以自己看看。
同问 请问现在是否支持文字垂直居中呢,如果支持请问是怎么控制垂直居中啊
感觉三角形好像难搞
怎么处理base64呢
请问有考虑加上镜像功能吗，水平/垂直翻转
Painter组件功能强大，自己的入门项目使用Painter生成海报，十分感谢，我的项目——https://github.com/dateolive/halo-dream
你好，遇到在切换背景图片生成的时候，iphone12下无法替换背景图片，始终为第一次生成时的背景图片
文字字数不确定，导致海报高度不固定。目前还没用这个框架，请问下可以用文字把框撑开吗？ 目前我们在用的另一个框架实现不了，找不到您的联系方式，只能在这里给你留言了
手动计算文字字数、行数，而算出高度，再设置海报高度。或者看源码，里面有提供globalHeight的对象，从中获取文字高度。
感觉三角形好像难搞
建议使用图片处理，不然可能需要多个rect旋转叠加才能作出复杂的三角形
怎么处理base64呢
可以通过wx的base64ToArrayBuffer转为二进制，然后写文件FileSystemManager.writeFile生成图片
请问有考虑加上镜像功能吗，水平/垂直翻转
rotate应该能解决大部分问题
如果同一个页面里面有两个painter，把第二个设置scaleRatio=0.2 ，第一个居然也变了。。
动态模板能不能再详细一些呢？因为在demo里面没有看到动态模板的效果，拜托感谢
能不能实现类似wxml-to-canvas的模版 + 类css的用法，感觉对前端来说理解起来会更方便一点。
动态模板怎么用啊?是还没完善吗
动态模板怎么用啊?是还没完善吗
就是没有动态模板的demo，不知道怎么传值，代码跑不通，没法移动view
动态模板怎么用啊?是还没完善吗
就是没有动态模板的demo，不知道怎么传值，代码跑不通，没法移动view
当前样例，把 pages/example/example.wxml 里 painter 组件的 palette 属性改成 dancePalette 就可以移动了。
动态模板怎么用啊?是还没完善吗
就是没有动态模板的demo，不知道怎么传值，代码跑不通，没法移动view
当前样例，把 pages/example/example.wxml 里 painter 组件的 palette 属性改成 dancePalette 就可以移动了。
改完报错 ：Cannot read property 'forceUpdate' of undefined，然后还是没法拖动，有没动态模板样例看看的，感觉好难用
动态模板怎么用啊?是还没完善吗
就是没有动态模板的demo，不知道怎么传值，代码跑不通，没法移动view
当前样例，把 pages/example/example.wxml 里 painter 组件的 palette 属性改成 dancePalette 就可以移动了。
我错了，可以用了，哈哈，要点击一下后才能移动
动态模板怎么用啊?是还没完善吗
就是没有动态模板的demo，不知道怎么传值，代码跑不通，没法移动view
当前样例，把 pages/example/example.wxml 里 painter 组件的 palette 属性改成 dancePalette 就可以移动了。
大佬，再问个问题，改为动态之后可以动了，但是 onImgOK 这个函数不执行了，怎么获取到画布图片的路径
如果你有任何想到用 Painter 可以实现的点子，欢迎留言分享，我们一起让 Painter 更强大好用。
大佬，问个问题， painter 组件的 palette 属性改成 dancePalette 就可以移动了，但是 onImgOK 这个函数不执行了，获取不到画布图片的路径
如果你有任何想到用 Painter 可以实现的点子，欢迎留言分享，我们一起让 Painter 更强大好用。
大佬，问个问题， painter 组件的 palette 属性改成 dancePalette 就可以移动了，但是 onImgOK 这个函数不执行了，获取不到画布图片的路径
是的，动态模版因为是分层渲染的，所以没法合成一整张图片。目前的做法是通过动态的方法编辑模版，然后set到静态模版里出图
如果你有任何想到用 Painter 可以实现的点子，欢迎留言分享，我们一起让 Painter 更强大好用。
大佬，问个问题， painter 组件的 palette 属性改成 dancePalette 就可以移动了，但是 onImgOK 这个函数不执行了，获取不到画布图片的路径
是的，动态模版因为是分层渲染的，所以没法合成一整张图片。目前的做法是通过动态的方法编辑模版，然后set到静态模版里出图
怎么set的，有没具体参考的，给个提示啊大佬