132 lines
4.8 KiB
Markdown
132 lines
4.8 KiB
Markdown
|
# evils-el-poster
|
|||
|
|
uniApp的海报生成组件
|
|||
|
|
|
|||
|
|
# 新功能
|
|||
|
|
可以通过直接获取页面元素内容,不必要自己将每个元素内容确定好定位确定好内容写成列表
|
|||
|
|
|
|||
|
|
## 示例
|
|||
|
|
|
|||
|
|
### 使用方法
|
|||
|
|
|
|||
|
|
1. 将需要渲染并且有内容的元素都添加``Poster1``的样式名.
|
|||
|
|
2. 给需要渲染的元素添加``data-etype``,定义类型,不填则默认为text,
|
|||
|
|
3. 给需要渲染的元素添加``data-enode``,传入内容,此项必填
|
|||
|
|
4. 最后调用``this.$refs.Eposter.createForElRect(elClass, false)``,开始生成海报.第一个值为样式名称,第二个值为是否是``slot``内的元素.默认值为``true``,如果最后生成图片位置合适,还可以传入startX,startY,额外调整开始点的坐标.
|
|||
|
|
### 示例1
|
|||
|
|
```
|
|||
|
|
<view @click="getElRect1('Poster1')" class="ev-m-32 ev-fr-s-c">
|
|||
|
|
<view class="ev-fc-s-c">
|
|||
|
|
<image data-etype="image" :data-enode="info.avatar" class="ev-w-164 Poster1 ev-h-164 ev-round" :src="info.avatar" mode="aspectFit"> </image>
|
|||
|
|
<text :data-enode="info.name" class="ev-m-t-20 Poster1 ev-font-24 ev-color-6">{{ info.name }} </text>
|
|||
|
|
</view>
|
|||
|
|
<view class="ev-falign-self-s ev-m-l-20 ev-color-9">
|
|||
|
|
<text :data-enode="time" class="ev-font-24 Poster1">{{ time }} </text>
|
|||
|
|
<view data-etype="textarea" :data-enode="info.desc" class="ev-font-24 Poster1">
|
|||
|
|
{{ info.desc }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" @on-error="onError" ref="Eposter"> </Eposter>
|
|||
|
|
```
|
|||
|
|
### 示例2
|
|||
|
|
将内容写在组件内部,
|
|||
|
|
```
|
|||
|
|
<button @click="getElRect('Poster')" class="ev-w-b80 ev-m-b-40">getElRect</button>
|
|||
|
|
<Eposter width="750" height="1334" @on-error="onError" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" ref="Eposter">
|
|||
|
|
<view class="ev-m-32 ev-fr-s-c">
|
|||
|
|
<view class="ev-fc-s-c">
|
|||
|
|
<image
|
|||
|
|
data-etype="image"
|
|||
|
|
:data-enode="info.avatar"
|
|||
|
|
class="ev-w-164 Poster ev-h-164 ev-round-32"
|
|||
|
|
:src="info.avatar"
|
|||
|
|
mode="aspectFit|aspectFill|widthFix"
|
|||
|
|
>
|
|||
|
|
</image>
|
|||
|
|
<text :data-enode="info.name" class="ev-m-t-20 Poster ev-font-24 ev-color-6">{{ info.name }} </text>
|
|||
|
|
</view>
|
|||
|
|
<view class="ev-falign-self-s ev-m-l-20 ev-color-9">
|
|||
|
|
<text :data-enode="time" class="ev-font-24 Poster">{{ time }} </text>
|
|||
|
|
<view data-etype="textarea" :data-enode="info.desc" class="ev-font-24 Poster">
|
|||
|
|
{{ info.desc }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</Eposter>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 来源
|
|||
|
|
来自uniapp插件市场的 [zhangyuhao-poster](https://ext.dcloud.net.cn/plugin?id=4611#rating)项目,并做了很多的修改
|
|||
|
|
|
|||
|
|
## 修改
|
|||
|
|
|
|||
|
|
1. 新增了圆角生成功能
|
|||
|
|
|
|||
|
|
2. 新增了矩形的创建,对于一些基本的矩形/圆形内容可以直接代码生成
|
|||
|
|
|
|||
|
|
3. 将**setTimeout**延时保存图片的方式改为**draw**回调保存,减少了海报生成等待时间
|
|||
|
|
|
|||
|
|
4. 去掉了**mounted**生命周期的生成逻辑,改为**$refs** 调用内部的 **create()**方法.更灵活控制
|
|||
|
|
|
|||
|
|
5. 新增图片自适应功能
|
|||
|
|
|
|||
|
|
## 特别提示1
|
|||
|
|
|
|||
|
|
如果小程序线上不显示,可能是**uni.getImageInfo**API的问题,这个API需先配置download域名白名单才能生效,微信头像也同样需要配置域名白名单,在微信后台配置这两个域名即可
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
thirdwx.qlogo.cn
|
|||
|
|
wx.qlogo.cn
|
|||
|
|
```
|
|||
|
|
## 特别提示2
|
|||
|
|
|
|||
|
|
支付宝小程序会有 ``this.callback is not a function`` 的报错,是属于``uniapp``的接口问题.
|
|||
|
|
|
|||
|
|
## 说明
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
list参数说明：
|
|||
|
|
图片渲染：
|
|||
|
|
type: 'image',
|
|||
|
|
x: X轴位置,
|
|||
|
|
y: Y轴位置,
|
|||
|
|
path: 图片路径,
|
|||
|
|
width: 图片宽度,
|
|||
|
|
height: 图片高度,
|
|||
|
|
rotate: 旋转角度
|
|||
|
|
mode:'center' 居中自适应
|
|||
|
|
shape: 形状，默认无，可选值：circle 圆形 如果是number,则生成圆角矩形
|
|||
|
|
area: {x,y,width,height} // 绘制范围，超出该范围会被剪裁掉 该属性与shape暂时无法同时使用，area存在时，shape失效
|
|||
|
|
矩形渲染：
|
|||
|
|
type: 'square',
|
|||
|
|
x: X轴位置,
|
|||
|
|
y: Y轴位置,
|
|||
|
|
width: 图片宽度,
|
|||
|
|
height: 图片高度,
|
|||
|
|
rotate: 旋转角度
|
|||
|
|
shape: 形状，默认无，可选值：circle 圆形 如果是number,则生成圆角矩形
|
|||
|
|
fillStyle:填充的背景样式
|
|||
|
|
area: {x,y,width,height} // 绘制范围，超出该范围会被剪裁掉 该属性与shape暂时无法同时使用，area存在时，shape失效
|
|||
|
|
文字渲染：
|
|||
|
|
type: 'text',
|
|||
|
|
x: X轴位置,
|
|||
|
|
y: Y轴位置,
|
|||
|
|
text: 文本内容,
|
|||
|
|
size: 字体大小,
|
|||
|
|
textBaseline： 基线 默认top 可选值：'top'、'bottom'、'middle'、'normal'
|
|||
|
|
color: 颜色
|
|||
|
|
多行文字渲染：
|
|||
|
|
type: 'textarea',
|
|||
|
|
x: X轴位置,
|
|||
|
|
y: Y轴位置,
|
|||
|
|
width：换行的宽度
|
|||
|
|
height: 高度，溢出会展示“...”
|
|||
|
|
lineSpace: 行间距
|
|||
|
|
text: 文本内容,
|
|||
|
|
size: 字体大小,
|
|||
|
|
textBaseline： 基线 默认top 可选值：'top'、'bottom'、'middle'、'normal'
|
|||
|
|
color: 颜色
|
|||
|
|
```
|
|||
|
|
|