liangei-lime-painter-master
所属分类：Java编程
开发工具：Java
文件大小：30KB
下载次数：0
上传日期：2021-02-28 18:25:48
上 传 者：
entcfes
说明： 支持text、image、view、qrcode 等类型绘制 2、样式完全跟写CSS类似，支持绝大多数的样式。 3、text支持超出省略号，指定关键词颜色替换，自动换行，text之间相连。 4、也支持使用原生方式编写
(Support text, image, view, QRcode and other types of drawing. 2. The style is completely similar to writing CSS, supporting the vast majority of styles. 3. Text support beyond the ellipsis, specify keyword color replacement, automatic line feed, text connected. 4. It also supports native writing)
文件列表:
lime-painter (0, 2021-02-26)
lime-painter\canvas.js (1226, 2021-02-26)
lime-painter\draw.js (16783, 2021-02-26)
lime-painter\gradient.js (3523, 2021-02-26)
lime-painter\index.vue (8140, 2021-02-26)
lime-painter\layout.js (12344, 2021-02-26)
lime-painter\qrcode.js (25522, 2021-02-26)
lime-painter\utils.js (10381, 2021-02-26)
# Painter 画板
> uniapp 海报画板,可根据自身需求配置生成海报
> [查看更多](http://liangei.gitee.io/limeui-docs/components/painter/)
> Q群:458377637
> 群里有最新Demo
### 平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
| √ | √ | √ | 未测 | √ | √ | √ |
### 引入
```js
import lPainter from '@/components/lime-painter/'
export default {
components: {lPainter}
}
```
### 代码演示
#### 基本用法
定一个画板对象,包含`width`、`height`、`background`,`views`为画板里的元素集,它是一个数组对象。
元素类型目前有`view`、`text`、`image`
css 对象里的位置都是相对于画板的绝对定位,支持`rpx`、`px`
```html
```
```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: '#1***9fa',
width: '80rpx',
height: '80rpx',
transform: 'transform: rotate(50deg)'
}
}
]
}
}
}
}
```
#### 圆角
为可元素定一个圆角`radius`,支持`rpx`、`px`、`%`
```html
```
```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: '#1***9fa',
width: '120rpx',
height: '120rpx',
radius: '16rpx 60rpx'
}
},
{
type: 'view',
css: {
left: '300rpx',
top: '0rpx',
background: '#ff976a',
width: '120rpx',
height: '120rpx',
radius: '50%'
}
}
]
}
}
}
}
```
#### 描边投影
为可元素定一个描边`border`和投影`shadow`,支持`rpx`、`px`
```html
```
```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 rgb(7,193,96)'
}
},
{
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'
}
}
]
}
}
}
}
```
#### 图片
元素类型为`image`时,需要一个图片地址`src`,图片地址支持`相对路径`和`网络地址`
::: warning 温馨提示
当为网络地址时,
H5:需要解决跨域问题或使用`isH5PathToBase***`可解决部分问题。
小程序:需要配置 downloadFile 域名
本插件全端支持 base*** 图片
:::
图片模式`mode`目前支持的有`aspectFill`和`scaleToFill`,默认为`aspectFill`,`height`和`width`支持`auto`,当设置为`auto`时`mode`失效。
```html
```
```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%'
}
}
]
}
}
}
}
```
#### 文字
元素类型`text`时,内容写在`text`里,支持`\n`换行符,css 的属性有字体大小`fontSize`、行高`lineHeight`、对齐`textAlign`、修饰`textDecoration`、粗细`fontWeight`、 宽度`width`、最大行数`maxLines`。
设置了最大行数和宽度时,当文字内容超过会显示省略号。
```html
```
```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',
top: '150rpx',
fontSize: '28rpx',
lineHeight: '36rpx',
textAlign: 'center',
textDecoration: 'overline'
}
},
{
type: 'text',
text: '右对齐,中划线\n无风才到地,有风还满空\n缘渠偏似雪,莫近鬓毛生',
css: {
left: '0rpx',
top: '290rpx',
fontSize: '28rpx',
lineHeight: '36rpx',
textAlign: 'right',
textDecoration: 'line-through',
}
},
{
type: 'text',
text: '省略号\n明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。',
rules: {
word: ['几时有'],
color: 'red'
},
css: {
left: '0rpx',
top: '420rpx',
fontSize: '28rpx',
maxLines: 2,
width: '686rpx',
lineHeight: '36rpx'
}
}
]
}
}
}
}
```
#### 二维码
该方法需要[下载此链接的文件](https://gitee.com/liangei/lime-painter/blob/master/qrcode.js)覆盖插件目录的`qrcode.js`才生效。
考虑到不是很多人需要,文件又比较大。故出此下策。
```html
```
```js
{
type: 'qrcode',
text: 'https://www.baidu.com',
css: {
left: '380rpx',
top: '230rpx',
width: '200rpx',
height: '200rpx',
color: '#1***9fa',
backgroundColor: 'rgba(25,137,250,.1)',
border: '20rpx solid rgba(25,137,250,.1)',
}
}
```
#### 调用内部方法
插件也允许通过`ref`获取内部方法来实现绘制和生成图片。
需要设置画板的`width`和`height`
```html
```
```js
export default {
data() {
return {
base: {
width: '686rpx',
height: '500rpx',
views: [
{
type: 'view',
css: {
fontSize: '28rpx',
lineHeight: '1.4em',
},
views: [
{
type: 'text',
text: '水调歌头',
css: {
display: 'block',
fontSize: '42rpx',
textAlign: 'center'
}
},
{
type: 'text',
text: '丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。',
css: {
display: 'block',
textIndent: '2em'
}
},
{
type: 'text',
text: '明月几时有?把酒问青天。不知天上宫阙,今夕是何年?我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间',
css: {
display: 'block',
color: 'red',
textIndent: '2em'
}
},
{
type: 'text',
text: '转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟',
css: {
textIndent: '2em'
}
}
]
}
]
},
path: '',
}
},
methods: {
onRender() {
// 支持通过调用render传入参数
const painter = this.$refs.painter
painter.render(this.base)
},
canvasToTempFilePath() {
const painter = this.$refs.painter
// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
painter.canvasToTempFilePath().then(res => this.path = res.tempFilePath)
}
}
}
```
#### 自定义
有时画板提供的方法无法满足复杂个性的需要,可通过插件`ref`获取`ctx`来使用原生方法绘制。
```html
```
```js
export default {
data() {
return {
path: '',
}
},
methods: {
async onCustom() {
const p = this.$refs.custom
// 自定义,使用原生和内部方法生成更个性的图形
await p.custom(async (ctx, draw) => {
// 原生方法的单位为px,如果想用rpx,请使用uni.upx2px(150)
// 绘制背景颜色
ctx.setFillStyle('#ff976a')
ctx.setShadow(5, 5, 50, '#ff976a')
ctx.beginPath()
ctx.arc(150, 150, 20, Math.PI, Math.PI * 1.5)
ctx.lineTo(150, 20)
ctx.arc(150, 0, 20, Math.PI * 0.5, Math.PI * 1)
ctx.lineTo(5, 0)
ctx.arc(0, 0, 20, Math.PI * 0, Math.PI * 0.5)
ctx.lineTo(0, 130)
ctx.arc(0, 150, 20, Math.PI * 1.5, Math.PI * 2)
ctx.lineTo(130, 150)
ctx.closePath()
ctx.fill()
// 绘制好形状后,调用draw的drawImage方法填充图片,图片会下载完成后绘制。无需自己下载。
await draw.drawImage('../../static/avatar-1.jpeg', {left: 0, top: 0, width:150, height:150})
})
await p.custom((ctx) => {
// 绘制背景颜色
ctx.setFillStyle('#07c160')
ctx.beginPath()
ctx.arc(280, 50, 50, 0, Math.PI * 2)
ctx.closePath()
ctx.fill()
})
// 单独绘制单个或多个元素的内部方法,
// 多个是是数组,单个是为对象
// 绘制二维码,由于二维码JS文件较大,也不是所有人需要。所以需自行下载覆盖。
await p.single({
type: 'qrcode',
text: 'https://www.baidu.com',
css: {
left: '380rpx',
top: '230rpx',
width: '200rpx',
height: '200rpx',
color: '#1***9fa',
backgroundColor: 'rgba(25,137,250,.1)',
border: '20rpx solid rgba(25,137,250,.1)',
transform: 'rotate(45deg)'
}
})
await p.single({
type: 'text',
text: '床前明月光,疑是地上霜。\n举头望明月,低头思故乡。',
css: {
left: '0rpx',
top: '330rpx'
}
})
// 使用自定义时,要配合方法绘制,否则无法绘制。
await p.canvasDraw(true)
},
// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
onCanvasToTempFilePath() {
const painter = this.$refs.custom
painter.canvasToTempFilePath({dpr:2}).then(res => this.path = res.tempFilePath)
}
}
}
```
#### 提供一份海报样式案例
是否生成图片:`isRenderImage`
生成图片成功:`success`返回一个图片临时地址。
```html
```
```js
export default {
data() {
return {
base: {
width: '750rpx',
height: '1114rpx',
background: '#F6F7FB',
views: [
{
type: 'view',
css: {
left: '40rpx',
top: '144rpx',
background: '#fff',
radius: '16rpx',
width: '670rpx',
height: '930rpx',
shadow: '0 20rpx 48rpx rgba(0,0,0,.05)'
}
},
{
type: 'image',
src: '../../static/avatar-2.jpg',
mode: 'widthFix',
css: {
left: '40rpx',
top: '40rpx',
width: '84rpx',
height: '84rpx',
radius: '50%',
color: '#999'
}
},
{
type: 'text',
text: '隔壁老王',
css: {
color: '#333',
left: '144rpx',
top: '40rpx',
fontSize: '32rpx',
fontWeight: 'bold'
}
},
{
type: 'text',
text: '为您挑选了一个好物',
css: {
color: '#666',
left: '144rpx',
top: '90rpx',
fontSize: '24rpx'
}
},
{
type: 'image',
src: '../../static/goods.jpg',
mode: 'widthFix',
css: {
left: '72rpx',
top: '176rpx',
width: '606rpx',
height: '606rpx',
radius: '12rpx'
}
},
{
type: 'text',
text: '39.90',
css: {
color: '#FF0000',
left: '66rpx',
top: '812rpx',
fontSize: '56rpx',
fontWeight: 'bold'
}
},
{
type: 'text',
text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝',
css: {
maxLines: 2,
width: '396rpx',
color: '#333',
left: '72rpx',
top: '948rpx',
fontSize: '36rpx',
lineHeight: '50rpx'
}
},
{
type: 'image',
src: '../../static/qr.png',
mode: 'widthFix',
css: {
left: '500rpx',
top: '8***rpx',
width: '178rpx',
height: '178rpx'
}
}
]
}
}
},
methods: {
saveImage() {
this.isShowPopup = false
uni.saveImageToPhotosAlbum({
filePath: this.path,
success(res) {
uni.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
})
}
})
},
}
}
```
### API
#### Props
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ------------ | ---------------- | ------------ |
| board | 画板对象 | object | 参数请向下看 |
| customStyle | 自定义样式 | string | |
| isRenderImage | 是否生成图片,在`@success`事件接收图片地址 | boolean | `false` |
| isH5PathToBase*** | H5端把网络图片转成base***,解决部分跨域问题 | boolean | `false` |
| isBase***ToPath | H5端把base***转成网络图片,应用场景不多考虑删除慎用 | boolean | `false` |
| sleep | 此参数是为解决图片渲染时不按JSON层次前后渲染。若有此情况请增大数值 | number | `33` |
| type | 只对微信小程序可有效 | string | `2d` |
| fileType | 生成图片的后缀类型 | string | `png` |
| pixelRatio | 生成图片的像素密度,默认为对应手机的像素密度 | number | `` |
| width | 画板的宽度,一般只用于通过内部方法时加上 | number | `` |
| height | 画板的高度 ,同上 | number | `` |
#### Board
| 参数 | 说明 | 类型 |
| ---------- | ---------------------------------- | --------------- |
| width | 画板的宽度 | string |
| height | 画板的高度 | string |
| background | 画板的背景色,支持颜色渐变,但要写百分比及方向如:`background: 'linear-gradient(to right, #ff971b 0%, #ff5000 100%)'` | string |
| views | 画板的元素集,请向下看各元素的参数 | object |
#### 块 View
| 参数 | 说明 |
| ---- | --------------------------------------------------------------------------------------------------- |
| type | 元素类型`view` |
| css | 元素的样式,`top`、`left`、`width`、`height`、`background`、 ... ...
近期下载者：
相关文件：
收藏者：