uniapp使用Painter画板

叁歲伎倆 2022-12-29 02:07 262阅读 0赞

首先介绍下Painter画板，uniapp 海报画板，可根据自身需求配置生成海报（懒得再写，copy官网的）  
Painter画板地址：[http://liangei.gitee.io/limeui-docs/components/painter/][http_liangei.gitee.io_limeui-docs_components_painter]  
Painter画板在uniapp插件市场的地址：[https://ext.dcloud.net.cn/plugin?id=2389][https_ext.dcloud.net.cn_plugin_id_2389]  
很好用的一个插件。  
安装引入插件不多说，直接说一些使用Painter画板遇到的问题和笔记。  
这边有个**重要的提示**，绘画的时候，要先从**层级最底下的开始绘画**，就和做蛋糕一样，从第一层开始往上做，会覆盖掉前面的绘画。

<lPainter :board="base" isRenderImage @success="pathTow = $event" />

import lPainter from 'components/lime-painter/index.vue';
    components:{ lPainter},
    data(){ 
    	return{ 
    		base:{ //如果是一些静态的图片文字啥的，可直接在data里写
    			width: '686rpx',//画布的宽
    			height: '130rpx',//画布的高
    			views:[//绘画的主内容，自行参考官方文档
    				...
    			]
    		}
    	}
    }

要分享海报或者二维码，都是要动态的去获取后端的数据，在进行分享，所以画板需要的数据基本都是在接口返回的数据里的。  
举个栗子，看下项目需要的ui图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
除了‘长按识别’，其他的数据都是动态获取的。

draw(){ //获取数据后，开始绘画
    	this.base={ 
    		width: '522rpx',
    		height: '734rpx',
    		background: '#ffffff',//画布背景色
    		radius: '20rpx',//画布的圆角
    		views:[
    			{ //绘制图片，上面的大图
    				type: 'image',//绘画的类型，具体官网查看
    				src: this.url,//图片路径
    				css: { //css需要使用驼峰命名
    					left: '30rpx',
    					top: '30rpx',
    					width: '456rpx',
    					height: '456rpx'
    				}
    			},
    			...//具体的就不在贴了，照着官网去做就行 
    		]
    	}
    }

在绘画圆角边框的时候，会出现这样的情况![在这里插入图片描述][20201219134738498.png]  
（画线是我手动加的，实际上会有这样的情况，如果没有的话，那就是作者已经处理掉这个问题了，毕竟是我跟作者反馈的。刚在uniapp插件市场看了下，这个问题已经更新了。）  
还有一个问题就是背景色渐变。如果使用背景色渐变，那么css的样式就应该写成**百分比**，写成其他的不生效,例如这样的

{ 
    	type: 'view',
    	css: { 
    		background: 'linear-gradient(0deg,#FF4545 0%, #C42000 100%)'
    	}
    }

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

[http_liangei.gitee.io_limeui-docs_components_painter]: http://liangei.gitee.io/limeui-docs/components/painter/
[https_ext.dcloud.net.cn_plugin_id_2389]: https://ext.dcloud.net.cn/plugin?id=2389
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20221120/506646da4b32462fbe557dea9be5da95.png
[20201219134738498.png]: https://img-blog.csdnimg.cn/20201219134738498.png