uniapp使用Painter画板

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

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

  1. <!-- lPainter是注册的组件名，可自定义 -->
  2. <lPainter :board="base" isRenderImage @success="pathTow = $event" />
  4. import lPainter from 'components/lime-painter/index.vue';
  5. components:{ lPainter},
  6. data(){ 
  7.     return{ 
  8.         base:{ //如果是一些静态的图片文字啥的，可直接在data里写
  9.             width: '686rpx',//画布的宽
  10.             height: '130rpx',//画布的高
  11.             views:[//绘画的主内容，自行参考官方文档
  12.                 ...
  13.             ]
  14.         }
  15.     }
  16. }

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

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

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

  1. { 
  2.     type: 'view',
  3.     css: { 
  4.         background: 'linear-gradient(0deg,#FF4545 0%, #C42000 100%)'
  5.     }
  6. }

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

发表评论

表情：
评论列表 （有 0 条评论，337人围观）

还没有评论，来说两句吧...

相关阅读

    相关 [UVA1437] String painter

    [题目链接][Link 1] 题意 　　有两个由小写英文字母组成的等长字符串A和B。你可以一次性将一个字符串的一个子串中的字符全部刷成任何你想要同一字符。求把字符串A刷成B

    绝地灬酷狼绝地灬酷狼/ 0 赞/ 290 阅读