uni-app海报生成插件-painter

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

插件下载地址：https://ext.dcloud.net.cn/plugin?id=3276
记录一下自己在项目中使用的过程仅供参考
插件使用中有一些问题我做了一些简单的修改
亲测微信小程序 h5 app可以正常使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、插件的使用

1.增加了在海报中生成二维码的功能

qrcode.js文件就是生成二维码需要用到的,如果不需要生成二维码也可以不引入
在 lyz-canvas.vue 引入QR方法

在drawView方法中添加执行生成二维码的方法

在drawRect方法中新增生成二维码的方法

2.我用的生成海报json在线地址，生成的json文件结构如下

生成海报json在线地址
导出的json文件

    export default class LastMayday {
      palette() {
        return (
{
  "width": "654px",
  "height": "1000px",
  "background": "#fff",
  "views": [
    {
      "type": "qrcode",
      "content": "哈哈哈",
      "css": {
        "color": "#000000",
        "background": "#ffffff",
        "width": "200px",
        "height": "200px",
        "top": "379px",
        "left": "1px",
        "rotate": "0",
        "borderRadius": "10px"
      }
    },
    {
      "type": "image",
      "url": "http://img.wxcha.com/file/201810/23/5e623a6c2f.jpeg",
      "css": {
        "width": "100px",
        "height": "100px",
        "top": "613px",
        "left": "272px",
        "rotate": "0",
        "borderRadius": "50px",
        "borderWidth": "",
        "borderColor": "#000000",
        "shadow": "10 10 10 #888888",
        "mode": "scaleToFill"
      }
    },
    
    {
      "type": "text",
      "text": "Do not fall in love with people like me",
      "css": {
        "color": "#f5f5f5",
        "background": "",
        "width": "334.5px",
        "height": "23.939999999999994px",
        "top": "269px",
        "left": "316.5px",
        "rotate": "0",
        "borderRadius": "",
        "borderWidth": "",
        "borderColor": "#000000",
        "shadow": "",
        "padding": "0px",
        "fontSize": "18px",
        "fontWeight": "normal",
        "maxLines": "4",
        "lineHeight": "23.976000000000003px",
        "textStyle": "fill",
        "textDecoration": "none",
        "fontFamily": "",
        "textAlign": "left"
      }
    },
   {
      "type": "rect",
      "css": {
        "background": "rgba(0,0,0,0)",
        "width": "361px",
        "height": "361px",
        "top": "265px",
        "left": "186px",
        "rotate": "0",
        "borderRadius": "186.5px",
        "borderWidth": "2px",
        "borderColor": "rgba(243,95,131,1)",
        "shadow": "",
        "color": "rgba(0,0,0,0)"
      }
    },
    
  ]
}
        );
      }
    }
    

使用在线工具生成的json文件在组件中是不能直接使用的需要修改一下
“width”: “654px”,//画布宽
“height”: “1000px”,//画布高
“background”: “#fff”,//画布背景色
“views”:[{
type: ‘qrcode’ //二维码，‘image’ //图片,‘text ’//文字,‘rect’//矩形块元素
…
}, ]

在线工具type值为rect代表矩形块元素

组件中代表块元素的type值未view

第一种使用方法直接将导出的json文件中的type修改为和组件使用的type值一样就可以了
第二种方法修改lyz-cancas.vue组件 把组件中type值为view修改为rect就可以正常使用了

二、json文件css元素圆角不生效

需要把组件中 radius换成borderRadius

关于组件的使用方法插件示例中有、我就不做介绍了