代码拉取完成,页面将自动刷新
同步操作将从 liangei/lime-painter 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
---|---|---|---|---|---|---|
√ | √ | √ | 未测 | √ | √ | √ |
l-painter-view
、l-painter-text
、l-painter-image
、l-painter-qrcode
四种类型组件css
属性绘制样式,与style使用方式保持一致。 因为style是保留字段,所以命名为css
,如果有大佬知道如何破解请告之。<l-painter >
<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"></l-painter-view>
<l-painter-view css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"></l-painter-view>
<l-painter-view css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"></l-painter-view>
</l-painter>
type
为view
、text
、image
、qrcode
board
设置海报所需的 JSON schema 数据进行绘制css
字段,css的样式属性key值使用驼峰命名如:lineHeight
<l-painter :board="poster" />
data() {
return {
poster: {
css: {
// json 方式务必填写画板宽度
width: '750rpx'
},
views: [
{
css: {
background: "#07c160",
height: "120rpx",
width: "120rpx",
display: "inline-block"
},
type: "view"
},
{
css: {
background: "#1989fa",
height: "120rpx",
width: "120rpx",
borderTopRightRadius: "60rpx",
borderBottomLeftRadius: "60rpx",
display: "inline-block",
margin: "0 30rpx"
},
views: [],
type: "view"
},
{
css: {
background: "#ff9d00",
height: "120rpx",
width: "120rpx",
borderRadius: "50%",
display: "inline-block"
},
views: [],
type: "view"
},
]
}
}
}
div
可以嵌套承载更多的 view、text、image,qrcode共同构建一颗完整的节点树views
的数组字段,用于嵌套承载节点。<l-painter >
<l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
<l-painter-view css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block"></l-painter-view>
<l-painter-view css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block"></l-painter-view>
</l-painter-view>
</l-painter>
{
css: {
width: '750rpx'
},
views: [
{
type: 'view',
css: {
background: '#f0f0f0',
paddingTop: '100rpx'
},
views: [
{
type: 'view',
css: {
background: '#d9d9d9',
width: '33.33%',
height: '100rpx',
display: 'inline-block'
}
},
{
type: 'view',
css: {
background: '#bfbfbf',
width: '66.66%',
height: '100rpx',
display: 'inline-block'
}
}
],
}
]
}
text
属性填写文本内容。\n
换行符line-clamp
设置行数,当文字内容超过会显示省略号。text-decoration
replace
可以指定文字更换颜色<l-painter >
<l-painter-view css="background: #e0e2db; padding: 30rpx; color: #222a29">
<l-painter-text
text="登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼"/>
<l-painter-text
text="登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼"
css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
/>
<l-painter-text
text="登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼"
css="text-align:right; padding-top: 20rpx"
/>
<l-painter-text
text="水调歌头\n明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。"
css="line-clamp: 3; padding-top: 20rpx"
:replace="{word: ['水调歌头','青天','高处'], color: 'red'}"
/>
</l-painter-view>
</l-painter>
// 基础用法
{
type: 'text',
text: '登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼',
},
{
type: 'text',
text: '登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼',
css: {
// 设置居中对齐
textAlign: 'center',
// 设置中划线
textDecoration: 'line-through'
}
},
{
type: 'text',
text: '登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼',
css: {
// 设置右对齐
textAlign: 'right',
}
},
{
type: 'text',
text: '登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼',
// 指定文本关键词的颜色,目前只能修改一种颜色
replace: {word: ['水调歌头','青天','高处'], color: 'red'},
css: {
// 设置行数,超出显示省略号
lineClamp: 3,
}
}
src
属性填写图片路径。css
的 object-fit
属性可以设置图片的填充方式,可选值见下方CSS表格。css
的 object-position
配合 object-fit
可以设置图片的对齐方式,类似于background-position
,详情见下方CSS表格。<l-painter >
<!-- 基础用法 -->
<l-painter-image
src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
css="width: 200rpx; height: 200rpx"
/>
<!-- 填充方式 -->
<!-- css object-fit 设置 填充方式 见下方表格-->
<l-painter-image
src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
css="width: 200rpx; height: 200rpx; object-fit: contain; background: #eee"
/>
<!-- css object-position 设置 图片的对齐方式-->
<l-painter-image
src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
css="width: 200rpx; height: 200rpx; object-fit: contain; object-position: 50% 50%; background: #eee"
/>
</l-painter>
// 基础用法
{
type: 'image',
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
css: {
width: '200rpx',
height: '200rpx'
}
},
// 填充方式
// css objectFit 设置 填充方式 见下方表格
{
type: 'image',
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
css: {
width: '200rpx',
height: '200rpx',
objectFit: 'contain'
}
},
// css objectPosition 设置 图片的对齐方式
{
type: 'image',
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
css: {
width: '200rpx',
height: '200rpx',
objectFit: 'contain',
objectPosition: '50% 50%'
}
}
text
属性填写需要生成二维码的文本。css
里的 color
可设置生成码点的颜色。css
里的 background
可设置背景色。css
里的 width
、height
设置尺寸。<l-painter>
<l-painter-qrcode
text="limeui.qcoon.cn"
css="width: 200rpx; height: 200rpx"
/>
</l-painter>
{
type: 'qrcode',
text: 'limeui.qcoon.cn',
css: {
width: '200rpx',
height: '200rpx',
}
}
isCanvasToTempFilePath
自动生成图片并在 @success
事件里接收海报临时路径<l-painter ref="painter">...code</l-painter>
// 主动调用方式只能在绘制完成之后
// @done 事件表示绘制完成
this.$refs.painter.canvasToTempFilePath({
// 在nvue里是jpeg
fileType: 'jpg',
quality: 1,
success: (res) => {
console.log(res.tempFilePath)
}
})
isCanvasToTempFilePath
主动生成图片,再由 @success
事件接收海报临时路径custom-style
样式把画板移到屏幕之外,因为可能canvas的层级比较高,无法覆盖。<image :src="path" mode="widthFix"></image>
<l-painter isCanvasToTempFilePath @success="path = $event"
custom-style="position: fixed; left: 200%"
css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
<l-painter-image src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg" css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; height: 84rpx; border-radius: 50%;"/>
<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"/>
<l-painter-text text="为您挑选了一个好物" css="color: rgba(255,255,255,.7); font-size: 24rpx"/>
</l-painter-view>
<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
<l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg" css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;"/>
<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
<l-painter-text text="¥" css="vertical-align: bottom"/>
<l-painter-text text="39" css="vertical-align: bottom; font-size: 58rpx"/>
<l-painter-text text=".39" css="vertical-align: bottom"/>
<l-painter-text text="¥59.99" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"/>
</l-painter-view>
<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
<l-painter-text text="自营" css="color: #212121; background: #ffb400;"/>
<l-painter-text text="30天最低价" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"/>
<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9"/>
<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9"/>
</l-painter-view>
<l-painter-view css="margin-top: 30rpx">
<l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box" text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝" :replace="{word: ['儿童', '9X'], color: 'red'}"></l-painter-text>
<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>
</l-painter-view>
</l-painter-view>
</l-painter>
data() {
return {
path: ''
}
}
<image :src="path" mode="widthFix"></image>
<l-painter
:board="poster"
isCanvasToTempFilePath
@success="path = $event"
custom-style="position: fixed; left: 200%"
/>
data() {
return {
path: '',
poster: {
css: {
width: "750rpx",
paddingBottom: "40rpx",
background: "linear-gradient(,#000 0%, #ff5000 100%)"
},
views: [
{
src: "https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg",
type: "image",
css: {
background: "#fff",
objectFit: "cover",
marginLeft: "40rpx",
marginTop: "40rpx",
width: "84rpx",
border: "2rpx solid #fff",
boxSizing: "border-box",
height: "84rpx",
borderRadius: "50%"
}
},
{
type: "view",
css: {
marginTop: "40rpx",
paddingLeft: "20rpx",
display: "inline-block"
},
views: [
{
text: "隔壁老王",
type: "text",
css: {
display: "block",
paddingBottom: "10rpx",
color: "#fff",
fontSize: "32rpx",
fontWeight: "bold"
}
},
{
text: "为您挑选了一个好物",
type: "text",
css: {
color: "rgba(255,255,255,.7)",
fontSize: "24rpx"
},
}
],
},
{
css: {
marginLeft: "40rpx",
marginTop: "30rpx",
padding: "32rpx",
boxSizing: "border-box",
background: "#fff",
borderRadius: "16rpx",
width: "670rpx",
boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
},
views: [
{
src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
type: "image",
css: {
objectFit: "cover",
objectPosition: "50% 50%",
width: "606rpx",
height: "606rpx"
},
}, {
css: {
marginTop: "32rpx",
color: "#FF0000",
fontWeight: "bold",
fontSize: "28rpx",
lineHeight: "1em"
},
views: [{
text: "¥",
type: "text",
css: {
verticalAlign: "bottom"
},
}, {
text: "39",
type: "text",
css: {
verticalAlign: "bottom",
fontSize: "58rpx"
},
}, {
text: ".39",
type: "text",
css: {
verticalAlign: "bottom"
},
}, {
text: "¥59.99",
type: "text",
css: {
verticalAlign: "bottom",
paddingLeft: "10rpx",
fontWeight: "normal",
textDecoration: "line-through",
color: "#999999"
}
}],
type: "view"
}, {
css: {
marginTop: "32rpx",
fontSize: "26rpx",
color: "#8c5400"
},
views: [{
text: "自营",
type: "text",
css: {
color: "#212121",
background: "#ffb400"
},
}, {
text: "30天最低价",
type: "text",
css: {
marginLeft: "16rpx",
background: "#fff4d9",
textDecoration: "line-through"
},
}, {
text: "满减优惠",
type: "text",
css: {
marginLeft: "16rpx",
background: "#fff4d9"
},
}, {
text: "超高好评",
type: "text",
css: {
marginLeft: "16rpx",
background: "#fff4d9"
},
}],
type: "view"
}, {
css: {
marginTop: "30rpx"
},
views: [
{
text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
type: "text",
css: {
paddingRight: "32rpx",
boxSizing: "border-box",
lineClamp: 2,
color: "#333333",
lineHeight: "1.8em",
fontSize: "36rpx",
width: "478rpx"
},
}, {
text: "limeui.qcoon.cn",
type: "qrcode",
css: {
width: "128rpx",
height: "128rpx",
},
}],
type: "view"
}],
type: "view"
}
]
}
}
}
painter.js
支持在原生小程序中使用source
里传入JSON schemarender
绘制海报<canvas type="2d" id="painter" style="width: 100%"></canvas>
import {Painter} from './painter'
page({
data: {
poster: {
css: {
width: '750rpx'
},
views: [
{
type: 'view',
css: {
background: '#d2d4c8',
paddingTop: '100rpx'
},
views: [
{
type: 'view',
css: {
background: '#5f7470',
width: '33.33%',
height: '100rpx',
display: 'inline-block'
}
},
{
type: 'view',
css: {
background: '#889696',
width: '33.33%',
height: '100rpx',
display: 'inline-block'
}
},
{
type: 'view',
css: {
background: '#b8bdb5',
width: '33.33%',
height: '100rpx',
display: 'inline-block'
}
}
],
}
]
}
},
async onLoad() {
const res = await this.getCentext()
const painter = new Painter(res)
// 返回计算布局后的整个内容尺寸
const {width, height} = await painter.source(this.data.poster)
// 得到计算后的尺寸后 可给canvas尺寸赋值,达到动态响应效果
// 渲染
await painter.render()
},
// 获取canvas 2d
// 非2d也可以使用这里只是举个例子
getCentext() {
return new Promise(resolve => {
wx.createSelectorQuery()
.select(`#painter`)
.node()
.exec(res => {
let { node: canvas } = res[0];
resolve({
canvas,
context: canvas.getContext('2d'),
width: canvas.width,
height: canvas.height,
pixelRatio: 2
})
})
})
},
})
web-view
支持 app-nvue
l-painter.vue
里web-view
的src
加上根目录的hybrid路径
并注释this.webViewInit()
// 只加上路径 其它参数不要改
<web-view src="/hybrid/html/lime-ui/lime-painter/index.html" />
// 153行 注释该方法
// this.webViewInit()
position: absolute
image
mode 模式被放弃,使用object-fit
isRenderImage
改成 is-canvas-to-temp-filePath
maxLines
改成 line-clamp
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
board | JSON schema方式的海报元素对象集 | object | - |
css | 海报最外层的样式,可以理解为body
|
object | 参数请向下看 |
custom-style | canvas自定义样式 | string | |
is-canvas-to-temp-filePath | 是否生成图片,在@success 事件接收图片地址 |
boolean | false |
after-delay | 生成图片错乱,可延时生成图片 | number | 100 |
type | canvas 类型,对微信头条支付宝小程序可有效,可选值:2d 、`` |
string | 2d |
file-type | 生成图片的后缀类型, 可选值:png 、jpg ,在nvue里是jpeg
|
string | png |
path-type | 生成图片路径类型,可选值url 、base64
|
string | - |
pixel-ratio | 生成图片的像素密度,默认为对应手机的像素密度 | number | - |
属性名 | 支持的值或类型 | 默认值 |
---|---|---|
(min\max)width | 支持% 、rpx 、px
|
- |
height | 同上 | - |
color | string |
- |
position | 定位,可选值:absolute 、fixed
|
- |
↳ left、top、right、bottom | 配合position 才生效,支持% 、rpx 、px
|
- |
margin | 可简写或各方向分别写,如:margin-top ,支持auto 、rpx 、px
|
- |
padding | 可简写或各方向分别写,支持rpx 、px
|
- |
border | 可简写或各个值分开写:border-width 、border-style 、border-color ,简写请按顺序写 |
- |
line-clamp |
number ,超过行数显示省略号 |
- |
background | 支持渐变,但必须写百分比!如:linear-gradient(,#ff971b 0%, #ff5000 100%) 、radial-gradient(#0ff 15%, #f0f 60%) ,目前radial-gradient 渐变的圆心为元素中点,半径为最长边,不支持设置 |
- |
vertical-align | 文字垂直对齐,可选值:bottom 、top 、middle
|
middle |
line-height | 文字行高,支持rpx 、px 、em
|
1.4em |
font-weight | 文字粗细,可选值:normal 、bold
|
normal |
font-size | 文字大小,string ,支持rpx 、px
|
14px |
text-decoration | 文本修饰,可选值:underline 、line-through 、overline
|
- |
text-align | 文本水平对齐,可选值:right 、center
|
- |
display | 框类型,可选值:block 、inline-block 、none ,当为none 时是不渲染该段 |
- |
border-radius | 圆角边框,支持% 、rpx 、px
|
- |
box-sizing | 可选值:border-box
|
- |
box-shadow | 投影 | - |
background-image | view元素设置背景纹理,注意这里的背景纹理一般是用于纹理平铺,无法代替image 元素。如:水印 |
- |
background-repeat | 设置是否及如何重复背景纹理,可选值:repeat 、repeat-x 、repeat-y 、no-repeat
|
repeat |
object-fit | 图片元素适应容器方式,类似于mode ,可选值:cover 、 contain 、 fill 、 none
|
- |
object-position | 图片的对齐方式,配合object-fit 使用 |
- |
名称 | 含义 |
---|---|
contain | 保持宽高缩放图片,使图片的长边能完全显示出来 |
cover | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边 |
fill | 拉伸图片,使图片填满元素 |
none | 保持图片原有尺寸 |
事件名 | 说明 | 回调 |
---|---|---|
success | 生成图片成功,若使用了is-canvas-to-temp-filePath 可以接收图片地址 |
path |
fail | 生成图片失败 | {error: error} |
done | 绘制成功 | |
progress | 绘制进度 | number |
<IMG/>
v-if
,v-show
、display:none
、opacity:0
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。