酱茄小程序开源版，基于WordPress的微信小程序，适用于博客小程序和新闻资讯小程序。.zip

# Painter 画板 > uniapp 海报画板，可根据自身需求配置生成海报 > [查看更多](http://liangei.gitee.io/limeui-docs/components/painter/) <br> > Q群：458377637 <br> > 群里有最新Demo <br> ### 平台兼容 | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App | | --- | ---------- | ------------ | ---------- | ---------- | --------- | --- | | √ | √ | √ | 未测 | √ | √ | √ | <br> <br> ### 引入 ```js // 非uni_modules引入方式 import lPainter from '@/components/lime-painter/' // uni_modules引入方式 import lPainter from '@/uni_modules/lime-painter/components/lime-painter/' export default { components: {lPainter} } ``` <br> <br> ### 代码演示 #### 基本用法 定一个画板对象，包含`width`、`height`、`background`，`views`为画板里的元素集，它是一个数组对象。<br> 元素类型目前有`view`、`text`、`image`<br> css 对象里的位置都是相对于画板的绝对定位，支持`rpx`、`px` ```html <l-painter :board="base"/> ``` ```js 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', transform: 'transform: rotate(50deg)' } } ] } } } } ``` <br><br> #### 圆角 为可元素定一个圆角`radius`,支持`rpx`、`px`、`%` ```html <l-painter :board="base"/> ``` ```js export default { data() { return { base: { width: '686rpx', height: '130rpx', views: [ { type: 'view', css: { left: '0rpx', top: '0rpx', background: '#07c160', width: '120rpx', height: '120rpx', radius: '16rpx 30rpx 10rpx 80rpx' } }, { type: 'view', css: { left: '150rpx', top: '0rpx', background: '#1989fa', width: '120rpx', height: '120rpx', radius: '16rpx 60rpx' } }, { type: 'view', css: { left: '300rpx', top: '0rpx', background: '#ff976a', width: '120rpx', height: '120rpx', radius: '50%' } } ] } } } } ``` <br><br> #### 描边投影 为可元素定一个描边`border`和投影`shadow`,支持`rpx`、`px` ```html <l-painter :board="base"/> ``` ```js export default { data() { return { base: { width: '686rpx', height: '130rpx', views: [ { type: 'view', css: { left: '10rpx', top: '10rpx', background: 'rgba(7,193,96,.1)', width: '120rpx', height: '120rpx', radius: '50%', border: '2rpx dashed #07C160' } }, { type: 'view', css: { left: '150rpx', top: '10rpx', background: 'rgba(25,137,250,.4)', width: '120rpx', height: '120rpx', radius: '50%', shadow: '0 5rpx 10rpx rgba(25,137,250,.8)' } }, { type: 'view', css: { left: '300rpx', top: '10rpx', background: 'rgba(255, 151, 106, .1)', width: '120rpx', height: '120rpx', radius: '50%', border: '2rpx solid #ff976a' } } ] } } } } ``` <br><br> #### 图片 元素类型为`image`时，需要一个图片地址`src`,图片地址支持`相对路径`和`网络地址`<br> ::: warning 温馨提示 当为网络地址时，<br> H5：需要解决跨域问题或使用`isH5PathToBase64`可解决部分问题。 <br> 小程序：需要配置 downloadFile 域名 <br> 本插件全端支持 base64 图片 <br> ::: <br> 图片模式`mode`目前支持的有`aspectFill`、`aspectFit`、`scaleToFill`,默认为`scaleToFill`,`height`和`width`支持`auto`，当设置为`auto`时`mode`失效。 ```html <l-painter :board="base"/> ``` ```js export default { data() { return { base: { width: '686rpx', height: '130rpx', views: [ { type: 'image', src: '../../static/avatar-1.jpeg', css: { left: '0rpx', top: '0rpx', width: '120rpx', height: '120rpx' } }, { type: 'image', src: '../../static/avatar-2.jpg', css: { left: '150rpx', top: '0rpx', width: '120rpx', height: '120rpx', radius: '16rpx' } }, { type: 'image', src:'../../static/avatar-3.jpeg', css: { left: '300rpx', top: '0rpx', background: '#ff976a', width: '120rpx', height: '120rpx', radius: '50%' } } ] } } } } ``` <br><br> #### 文字 元素类型`text`时，内容写在`text`里，支持`\n`换行符，css 的属性有字体大小`fontSize`、行高`lineHeight`、对齐`textAlign`、修饰`textDecoration`、粗细`fontWeight`、 宽度`width`、最大行数`maxLines`。 设置了最大行数和宽度时，当文字内容超过会显示省略号。 ```html <l-painter :board="base"/> ``` ```js export default { data() { return { base: { width: '686rpx', height: '500rpx', views: [ { type: 'text', text: '左对齐,下划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生', // 可以指定关键字颜色 rules: { word: ['到地'], color: 'red' }, css: { left: '0rpx', top: '10rpx', fontSize: '28rpx', lineHeight: '36rpx', textDecoration: 'underline' } }, { type: 'text', text: '居中,上划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生', css: { left: '0rpx',