海报画板 - 更新日志

1.9.6.5（2024-04-14）

fix: 修复nvue无法生图的问题

1.9.6.4（2024-03-10）

fix: 修复代理ctx导致H5不能使用ctx.save

1.9.6.3（2024-03-08）

fix: 修复支付宝真机无法使用的问题

1.9.6.2（2024-02-22）

fix: 修复使用render函数报错的问题

1.9.6（2023-12-06）

fix: 修复背景图受padding影响
fix: 修复因字节报错改了代理实现导致微信报错
1.9.5.8（2023-11-16）
fix: 修复margin问题
fix: 修复borderWidth问题
fix: 修复textBox问题
fix: 修复字节开发工具报could not be cloned.问题

1.9.5.7（2023-07-27）

fix: 去掉多余的方法
chore: 更新文档，增加自定义字体说明

1.9.5.6（2023-07-21）

feat: 有限的支持富文本
feat: H5和APP 增加 hidpi prop，主要用于大尺寸无法生成图片时用
fix: 修复钉钉小程序缺少 measureText 方法
chore: 由于微信小程序 pc 端的 canvas 2d 时不时抽风，故不使用canvas 2d

1.9.5.4（2023-06-05）

fix: 修复因canvasToTempFilePathSync监听导致重复调用

1.9.5.3（2023-05-23）

fix: 因isPc错写成了isPC导致小程序PC不能生成图片

1.9.5.2（2023-05-22）

feat: 删除多余文件

1.9.5.1（2023-05-22）

fix: 修复文字行数与line-clamp相同但不满一行时也加了省略号的问题

1.9.5（2023-05-15）

feat: 增加 text-indent 和 calc 方法
feat: 优化布局时间

1.9.4.4（2023-04-15）

fix: 修复无法匹配负值
fix: 修复 Nvue IOS getImageInfo useCORS 为 undefined

1.9.4.3（2023-04-01）

feat: 增加支持文字描边 text-stroke: '5rpx #fff'

1.9.4.2（2023-03-30）

fix: 修复支付宝小程序 isPC 在手机也为true的问题
feat: 由微信开发工具 3060 版无法获取图片尺寸，现微信开发工具 3220 版修复该问题，故还原上一版的获取图片方式。

1.9.4.1（2023-03-28）

fix: 修复固定高度不正确问题

1.9.4（2023-03-17）

fix: nvue ios getImageInfo缺少this报错
fix: pathType 非2d无效问题
fix: 修复小米9se 可能会存在多次init 导致画面多次放大
fix: 修复 border 分开写 width style无效问题
fix: 修复支付宝小程序IOS 再次进入不渲染的问题
fix: 修复支付宝小程序安卓Zindex排序错乱问题
fix: 修复微信开发工具 3060 版无法获取图片的问题
feat: 把 for in 改为 forEach
feat: 增加 hidden
feat: 根节点 box-sizing 默认 border-box
feat: 增加支持 vw wh
chore: pathType 取消默认值，因为字节开发工具不能显示
chore: 支付宝小程序开发工具不支持生成图片请以真机调试为准
bug: 企业微信 2.20.3无法使用

1.9.3.5（2022-06-29）

feat: justifyContent 增加 space-around、space-between
feat: canvas 2d 也使用getImageInfo
fix: 修复 text的 text-decoration错位

1.9.3.4（2022-06-20）

fix: 修复因创建节点速度问题导致顺序出错。
fix: 修复微信小程序 PC 无法显示本地图片
fix: 修复 flex-box 对齐问题
feat: 增加 text-shadow
feat: 重写 text 对齐方式
chore: 更新文档

1.9.3.3（2022-06-17）

fix: 修复支付宝小程序 canvas 2d 存在ctx.draw问题导致报错
fix: 修复支付宝小程序 toDataURL 存在权限问题改用 toTempFilePath
fix: 修复支付宝小程序 image size 问题导致 objectFit 无效

1.9.3.2（2022-06-14）

fix: 修复 image 设置背景色不生效问题
fix: 修复 nvue 环境判断缺少参数问题

1.9.3.1（2022-06-14）

fix: 修复 bottom 定位不对问题
fix: 修复因小数导致计算出错换行问题
feat: 增加 useCORS h5端图片跨域在设置请求头无效果后试一下设置这个值
chore: 更新文档

1.9.3（2022-06-13）

feat: 增加 zIndex
feat: 增加 flex-box 该功能处于原始阶段，非常简陋。
tips: QQ小程序 vue3 不支持, 为 uni 官方BUG

1.9.2.8（2022-06-10）

fix: 修复 Nvue canvasToTempFilePathSync 不生效问题

1.9.2.7（2022-06-10）

fix: 修复 margin及padding的bug
fix: 修复 Nvue isCanvasToTempFilePath 不生效问题

1.9.2.6（2022-06-09）

fix: 修复 Nvue 不显示

feat: 增加支持字体渐变

<l-painter-text 
text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
css="background: linear-gradient(,#ff971b 0%, #1989fa 100%); background-clip: text" />

1.9.2.5（2022-06-09）

chore: 更变获取父级宽度的设定
chore: pathType 在canvas 2d 默认为 url

1.9.2.4（2022-06-08）

fix: 修复 pathType 不生效问题

1.9.2.3（2022-06-08）

fix: 修复 canvasToTempFilePath 漏写 success 参数

1.9.2.2（2022-06-07）

chore: 更新文档

1.9.2.1（2022-06-07）

fix: 修复 vue3 赋值给this再传入导致image无法绘制
fix: 修复 canvasToTempFilePathSync 时机问题
feat: canvas 2d 更改图片生成方式 toDataURL

1.9.2（2022-05-30）

fix: 修复 canvasToTempFilePathSync 在 vue3 下只生成一次

1.9.1.7（2022-05-28）

fix: 修复 qrcode显示不全问题

1.9.1.6（2022-05-28）

fix: 修复 canvasToTempFilePathSync 会重复多次问题
fix: 修复 view css backgroundImage 图片下载失败导致子节点不渲染

1.9.1.5（2022-05-27）

fix: 修正支付宝小程序 canvas 2d版本号 2.7.15

1.9.1.4（2022-05-22）

fix: 修复字节小程序无法使用xml方式
fix: 修复字节小程序无法使用base64(非2D情况下工具上无法显示)
fix: 修复支付宝小程序 canvasToTempFilePath 报错

1.9.1.3（2022-04-29）

fix: 修复vue3打包后uni对象为空后的报错

1.9.1.2（2022-04-25）

fix: 删除多余文件

1.9.1.1（2022-04-25）

fix: 修复图片不显示问题

1.9.1（2022-04-16）

fix: 因四舍五入导致有些机型错位
fix: 修复无views报错
chore: nvue下因ios无法读取插件内static文件，改由下载方式

1.9.0（2022-03-20）

fix: 因无法固定尺寸导致生成图片不全
fix: 特定情况下text判断无效
chore: 本地化APP Nvue webview

1.8.9（2022-02-20）

fix: 修复小程序下载最多10次并发的问题
fix: 修复 APP端无法获取本地图片
fix: 修复 APP Nvue端不执行问题
chore: 增加图片缓存机制

1.8.8.8（2022-01-27）

fix: 修复主动调用尺寸问题

1.8.8.6（2022-01-26）

fix: 修复 nvue 下无宽度时获取父级宽度
fix: 修复 ios app 无法渲染问题

1.8.8（2022-01-23）

fix: 修复主动调用时无节点问题
fix: 修复 box-shadow 颜色问题
fix: 修复 transform:rotate 角度位置问题
feat: 增加 overflow:hidden

1.8.7（2022-01-07）

fix: 修复 image 方向为 right 时原始宽高问题
feat: 支持 view 设置背景色 background-image: url(xxx)
chore: 去掉可选链

1.8.6（2021-11-28）

feat: 支持view对inline-block的子集使用text-align

1.8.5.5（2021-08-17）

chore: 更新文档，删除 replace
fix: 修复 text 值为 number时报错

1.8.5.4（2021-08-16）

fix: 字节小程序兼容

1.8.5.3（2021-08-15）

fix: 修复线性渐变与css现实效果不一致的问题
chore: 更新文档

1.8.5.2（2021-08-13）

chore: 增加background-image、background-repeat 能力，主要用于背景纹理的绘制，并不是代替image。例如：大面积的重复平铺的水印
注意：这个功能H5暂时无法使用，因为官方的API有BUG，待官方修复！！！

1.8.5.1（2021-08-10）

fix: 修复因margin报错问题

1.8.5（2021-08-09）

chore: 增加margin支持auto,以达到居中效果

1.8.4（2021-08-06）

chore: 增加判断缓存文件条件
fix: 修复css 多余空格报错问题

1.8.3（2021-08-04）

tips: 1.6.x 以下的版本升级到1.8.x后要为每个元素都加上定位：position: 'absolute'
fix: 修复只有一个view子元素时不计算高度的问题

1.8.2（2021-08-03）

fix: 修复 path-type 为 url 无效问题
fix: 修复 qrcode text 为空时报错问题
fix: 修复 image src 动态设置时不生效问题
feat: 增加 css 属性 min-width max-width

1.8.1（2021-08-02）

fix: 修复无法加载本地图片

1.8.0（2021-08-02）

chore 文档更新
使用旧版的同学不要升级！

1.8.0-beta（2021-07-30）

全新布局方式不兼容旧版！

chore: 布局方式变更
tips: 微信canvas 2d 不支持真机调试

1.6.6（2021-07-09）

chore: 统一命名规范，无须主动引入组件

1.6.5（2021-06-08）

chore: 去掉console

1.6.4（2021-06-07）

fix: 修复数字为纯字符串时不转换的BUG

1.6.3（2021-06-06）

fix: 修复 PC 端放大的BUG

1.6.2（2021-05-31）

fix: 修复报adaptor is not a function错误
fix: 修复 text 多行高度
fix: 优化默认文字的基准线
feat: @progress事件，监听绘制进度

1.6.1（2021-02-28）

删除多余节点

1.6.0（2021-02-26）

调整为uni_modules目录规范
修复：transform的rotate不能为负数问题
新增：pathType指定生成图片返回的路径类型,可选值有base64、url

1.5.9.7　（2021-01-11）

无

1.5.9.7（2021-01-11）

1、兼容：因ios 微信7.0.20 图片无法加载的bug导致无法绘制（微信的bug） 2、修复：rules在textAlign非left情况错位的问题 3、修复：shadow

1.5.9.2（2020-11-28）

1、修复rules遗漏参数的问题
2、修复border多线问题
3、修复text高度问题

1.5.9.1（2020-11-23）

1、优化微信小程序模拟器的报非2d黄色警示，虽然无伤大雅，但有的同学就是有强迫证。。。

1.5.9（2020-11-22）

1、增加sleep参数，默认为33毫秒，增加此参数是为解决图片渲染时不按JSON层次前后渲染。若有此情况请增大数值。
2、增强文本
3、增加支持二维码，但是考虑到不是所有人都需要，所以请自行去下载并覆盖：https://gitee.com/liangei/lime-painter/blob/master/qrcode.js
4、增强自定义，通过ref获取内容方法custom回调使用原生方式绘制、single单独单个或多个封装好的元素text、image、view等。

只更新了版本号，把更新内容版整齐点。。要怪就怪uni，无法更改更新日志。。。。

1.5.8.5（2020-11-22）

1、增加sleep参数，默认为33毫秒，增加此参数是为解决图片渲染时不按JSON层次前后渲染。若有此情况请增大数值。 2、增强文本 3、增加支持二维码，但是考虑到不是所有人都需要，所以请自行去下载并覆盖：https://gitee.com/liangei/lime-painter/blob/master/qrcode.js 4、自强自定义，通过ref获取内容方法custom回调使用原生方式绘制、single单独单个或多个封装好的元素text、image、view等。

<l-painter ref="painter" width="686rpx"  height="500rpx" />
<image :src="path" />

export default {
    data() {
        return {
            path: '',
        }
    },
    methods: {
        async onCustom() {
            const p = this.$refs.custom
            // 自定义，使用原生和内部方法生成更个性的图形
            await p.custom(async (ctx, draw) => {
                // 原生方法的单位为px，如果想用rpx,请使用uni.upx2px(150)
                // 绘制背景颜色
                ctx.setFillStyle('#ff976a')
                ctx.setShadow(5, 5, 50, '#ff976a')
                ctx.beginPath()
                ctx.arc(150, 150, 20, Math.PI, Math.PI * 1.5)
                ctx.lineTo(150, 20)
                ctx.arc(150, 0, 20, Math.PI * 0.5, Math.PI * 1)
                ctx.lineTo(5, 0)
                ctx.arc(0, 0, 20, Math.PI * 0, Math.PI * 0.5)
                ctx.lineTo(0, 130)
                ctx.arc(0, 150, 20, Math.PI * 1.5, Math.PI * 2)
                ctx.lineTo(130, 150)
                ctx.closePath()
                ctx.fill()
                // 绘制好形状后，调用draw的drawImage方法填充图片，图片会下载完成后绘制。无需自己下载。
                await draw.drawImage('../../static/avatar-1.jpeg', {left: 0, top: 0, width:150, height:150})
            })
            await p.custom((ctx) => {
                // 绘制背景颜色
                ctx.setFillStyle('#07c160')
                ctx.beginPath()
                // 右下角
                ctx.arc(280, 50, 50, 0, Math.PI * 2)
                ctx.closePath()
                ctx.fill()
            })
            // 单独绘制单个或多个元素的内部方法，
            // 多个是是数组，单个是为对象
            // 绘制二维码，由于二维码JS文件较大，也不是所有人需要。所以需自行下载覆盖。
            await p.single({
                type: 'qrcode',
                text: 'https://www.baidu.com',
                css: {
                    left: '380rpx',
                    top: '230rpx',
                    width: '200rpx',
                    height: '200rpx',
                    color: '#1989fa',
                    backgroundColor: 'rgba(25,137,250,.1)',
                    border: '20rpx solid rgba(25,137,250,.1)',
                    transform: 'rotate(45deg)'
                }
            })
            await p.single({
                type: 'text',
                text: '床前明月光，疑是地上霜。\n举头望明月，低头思故乡。',
                css: {
                    left: '0rpx',
                    top: '330rpx'
                }
            })
            // 使用自定义时，要配合方法绘制，否则无法绘制。
            await p.canvasDraw(true)
        },
        // 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
        onCanvasToTempFilePath() {
            const painter = this.$refs.custom
            painter.canvasToTempFilePath({dpr:2}).then(res => this.path = res.tempFilePath)

        }
    }
}

1.5.8.4（2020-11-16）

1、增强text功能。增加了rules规则，指定文字颜色。 ···js { type: 'text', text: '左对齐\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生', rules: { word: ['到地'], color: 'red' }, css: { left: '0rpx', top: '10rpx', fontSize: '38rpx', lineHeight: '38rpx', textDecoration: 'underline', } },

2、多`text`标签连接（试验）,
···js
text2: {
                width: '686rpx',
                height: '500rpx',
                views: [
                    {
                        type: 'view',
                        css: {
                            fontSize: '28rpx',
                            lineHeight: '1.4em',
                        },
                        views: [
                            {
                                type: 'text',
                                text: '水调歌头',
                                css: {
                                    display: 'block',
                                    fontSize: '42rpx',
                                    textAlign: 'center'
                                }
                            },
                            {
                                type: 'text',
                                text: '丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由',
                                css: {
                                    display: 'block',
                                    textIndent: '2em'
                                }
                            },
                            {
                                type: 'text',
                                text: '明月几时有？把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间',
                                css: {
                                    display: 'block',
                                    color: 'red',
                                    textIndent: '2em'
                                }
                            },
                            {
                                type: 'text',
                                text: '转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟',
                                css: {
                                    textIndent: '2em'
                                }
                            }
                        ]
                    }
                ]
            },

1.5.8.3（2020-11-13）

1、h5端增加isH5PathToBase64属性，默认为false,打开后会把网络图片地址转成base64，解决跨域问题

1.5.8.2（2020-11-13）

1、修复borderRadiusbug
2、删除重绘5次的方法
3、增加base64转arrayBuffer方法，以对应QQ小程序使用最新基础库时无法转换base64。

1.5.8.1（2020-11-10）

1、兼容低版本的微信（这年头还有用低版本的微信。。坑爹）

1.5.8.0（2020-11-10）

1、修复图片位置偏移问题

1.5.8（2020-11-09）

1、image的width和height允许为空或使用百分比或auto,若为空时，宽度会充满父级，高度自适应。
2、删除独立的旋转属性rotate,也就是当前版本不可使用rotate: 50
3、增加transform属性。应该类型css3的transform,包含缩放scale、位移translate、旋转rotate、倾斜skew。
如需要X轴翻转效果：transform: scaleX(-1)
如需要旋转效果：transform: rotate(50deg)
如需要X轴倾斜效果：transform: skewX(50deg)

1.5.7.0（2020-11-04）

1、修复安卓APPpage is not ready

1.5.7（2020-11-03）

1、支持支付宝小程序
2、增加事件@done表示绘制完成 3、fileType默认值改为png

1.5.6（2020-10-27）

1、支持QQ小程序
2、可动态改变画板宽高
3、容错处理，发现生成图和画板不一致时重绘。maxDrawCount重绘次数，默认5次。

1.5.5（2020-10-20）

1、修复单行文字textDecoration对齐的BUG
2、支持四边的border分别设置

{
css: {
borderBottom: '2px solid #333',}
}

2、增加padding,margin

1.5.4.0（2020-09-30）

1、删除多余文件

1.5.4（2020-09-30）

1、删除绘画定时器，修复cache带来的 bug
2、修复小程序默认为2D时，不触发success和fail

1.5.3（2020-09-28）

1、微信小程序默认为type=2d
2、修复竖排最后一个字体多出一个问题
3、几乎全端支持base64

ios 未测，因为没有机子。。 4、删除原来isH5RenderBlob改为isBase64ToPath

1.5.2（2020-09-26）

1、增加H5端生成blob格式开关isH5RenderBlob

<l-painter
    isH5RenderBlob
    :board="board"
    @success="poster = $event"
    @fail="fail">
</l-painter>

H5端默认是生成base64的，有同学反应图片只生成一半，而这个生成Blob格式也有同学反应在微信浏览器里无法长按保存。。秃头啊，增加这个开关任君玩弄。。

1.5.0 test（2020-09-24）

1、增加支持2d

不建议开启，因为PC端小程序并不支持。

2、增加支持渐变色


{ 
    css: { 
        // 一定要写百分比
        background: 'linear-gradient(135deg, #ff971b 0%, #ff5000 100%)' ,
    } 
}

3、删除drawAll等方法，改用成render

<l-painter ref="painter" ></l-painter>

// 支持通过调用render传入参数
const painter = this.$refs.painter
painter.render({..参数..})
// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
painter.canvasToTempFilePath({..参数..}).then(fun)

1.5.0（2020-09-24）