uniapp使用Painter画板

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

<!-- lPainter是注册的组件名，可自定义  -->
<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图

除了‘长按识别’，其他的数据都是动态获取的。

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'}},...//具体的就不在贴了，照着官网去做就行            ]}
}

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

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

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

uniapp使用Painter画板相关推荐

uniapp使用l-painter画板,海报
Painter画板地址 http://liangei.gitee.io/limeui-docs/components/painter/ Painter画板在uniapp插件市场的地址:https:// ...
解决 uni-app 使用 Painter 生成商品海报真机模糊问题
每写一篇文章都需要前言进行背景的阐述,方便自己和其他遇到同样问题的朋友快速定位是否为同一类问题. 在开发 uni-app 的过程中分享商品时需要生成对应的商品海报图,个人也试了几款社区提供的插件,坑也 ...
UniApp使用Painter画图
1.导入到项目 (1)去插件市场导入到项目 (2)插件文档 (3)我是下载了zip压缩放到项目 2.页面引入插件 import lPainter from '@/utils/painter'expor ...
uniapp页面生成海报并保存和分享微信
Painter 画板 | LimeUiLimeUi - 增强型的 uni-app 组件库http://liangei.gitee.io/limeui-docs/components/painter/ ...
uni-app生成分享图片（使用 Painter 生成分享海报）
Painter 支持文本.图片.矩形.qrcode 类型的 view 绘制. 如何使用 1.引入代码.注意:存放目录 uni-app根据不同平台插件存放目录不同. git clone https: ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
uniapp海报画板
uniapp海报画板主要可以用于生成海报,生成二维码,一款canvas海报组件,可根据自身需求使用JSON生成海报首先先引入,先在Dcloud插件市场下载链接 // 非uni_modules引入方 ...
uniapp小程序painter绘制海报微信头像空白；背景图模糊问题
一.头像空白问题网络图片真机显示空白请检查微信公众平台服务器域名里面的安全域名有没有添加微信头像显示空白请添加 https://thirdwx.qlogo.cn; 添加域名后重新启动项目就可 ...
uniapp开发微信小程序使用painter生成海报
最初绘制海报时是准备用canvas绘制,但是绘制遇到各种问题,且难度颇高,最后也没能绘制出来,也尝试过使用微信官方的 wxml-to-canvas,但需要传入wxml和样式,太为难我这个小小的后端开发 ...

uniapp使用Painter画板

uniapp使用Painter画板相关推荐

最新文章

热门文章