更新记录

1.0.0(2020-10-22)

1.发布海报生成组件


平台兼容性

canvas 海报分享

基本用法

定一个画板对象,包含widthheightbackgroundviews为画板里的元素集,它是一个数组对象。
元素类型目前有viewtextimage
css 对象里的位置都是相对于画板的绝对定位,支持rpxpx

<lyz-canvas  :board="base"></lyz-canvas>
export default {
    data() {
        return {
            base {
                width: '686rpx',
                height: '130rpx',
                views: [
                    {
                        type: 'view',
                        css: {
                            left: '0rpx',
                            top: '0rpx',
                            background: '#07c160',
                            width: '120rpx',
                            height: '120rpx'
                        }
                    },
                    {
                        type: 'view',
                        css: {
                            left: '180rpx',
                            top: '18rpx',
                            background: '#1989fa',
                            width: '80rpx',
                            height: '80rpx',
                            rotate: 50
                        }
                    }
                ]
            };
        }
    }
}

平台兼容

H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ 小程序 App
未测 未测 未测 未测 未测 未测


API

Props

参数 说明 类型 默认值
board 画板对象 object 参数请向下看
customStyle 自定义样式 string
isRenderImage 是否生成图片 boolean false


Board

参数 说明 类型
width 画板的宽度 string
height 画板的高度 string
background 画板的背景色 string
views 画板的元素集,请向下看各元素的参数 object


元素 View

参数 说明
type 元素类型view
css 元素的样式,topleftwidthheightbackgroundradiusbordershadowrotate


元素 text

参数 说明
type 元素类型text
text 文本内容
css 元素的样式,topleftfontSizefontWeightfontFamilywidthlineHeightcolortextDecorationtextAlign:center, left, right、最大行数:maxLines


元素 image

参数 说明
type 元素类型image
src 图片地址
css 元素的样式,topleftwidthheightradiusbordershadow


事件 Events

事件名 说明 回调
success 生成图片成功 $event
fail 生成图片失败 {error: error}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问