# Painter 画板 测试版
> uniapp 海报画板,更优雅的海报生成方案
> [查看更多 站点 1](https://limeui.qcoon.cn/#/painter)
> [查看更多 站点 2](http://liangei.gitee.io/limeui/#/painter)
> Q 群:1169785031
## 平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
| √ | √ | √ | 未测 | √ | √ | √ |
## 安装
在市场导入**[海报画板](https://ext.dcloud.net.cn/plugin?id=2389)uni_modules**版本的即可,无需`import`
## 代码演示
### 插件demo
- lime-painter 为 demo
- 位于 uni_modules/lime-painter/components/lime-painter
- 导入插件后直接使用可查看demo
```vue
<lime-painter />
```
### 基本用法
- 插件提供 JSON 及 Template 的方式绘制海报
- 参考 css 块状流布局模拟 css schema。
- 另外flex布局还不是成完善,请谨慎使用,普通的流布局我觉得已经够用了。
#### 方式一 Template
- 提供`l-painter-view`、`l-painter-text`、`l-painter-image`、`l-painter-qrcode`四种类型组件
- 通过 `css` 属性绘制样式,与 style 使用方式保持一致。
```html
<l-painter>
//如果使用Template出现顺序错乱,可使用`template` 等所有变量完成再显示
<template v-if="show">
<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>
<template>
</l-painter>
```
#### 方式二 JSON
- 在 json 里四种类型组件的`type`为`view`、`text`、`image`、`qrcode`
- 通过 `board` 设置海报所需的 JSON 数据进行绘制或`ref`获取组件实例调用组件内的`render(json)`
- 所有类型的 schema 都具有`css`字段,css 的 key 值使用**驼峰**如:`lineHeight`
```html
<l-painter :board="poster"/>
```
```js
data() {
return {
poster: {
css: {
// 根节点若无尺寸,自动获取父级节点
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"
},
]
}
}
}
```
### View 容器
- 类似于 `div` 可以嵌套承载更多的 view、text、image,qrcode 共同构建一颗完整的节点树
- 在 JSON 里具有 `views` 的数组字段,用于嵌套承载节点。
#### 方式一 Template
```html
<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>
```
#### 方式二 JSON
```js
{
css: {},
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 文本
- 通过 `text` 属性填写文本内容。
- 支持`\n`换行符
- 支持省略号,使用 css 的`line-clamp`设置行数,当文字内容超过会显示省略号。
- 支持`text-decoration`
#### 方式一 Template
```html
<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; background: linear-gradient(,#ff971b 0%, #ff5000 100%); background-clip: text"
/>
</l-painter-view>
</l-painter>
```
#### 方式二 JSON
```js
// 基础用法
{
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欲穷千里目,更上一层楼',
css: {
// 设置行数,超出显示省略号
lineClamp: 3,
// 渐变文字
background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)',
backgroundClip: 'text'
}
}
```
### Image 图片
- 通过 `src` 属性填写图片路径。
- 图片路径支持:网络图片,本地 static 里的图片路径,缓存路径,**字节的static目录是写相对路径**
- 通过 `css` 的 `object-fit`属性可以设置图片的填充方式,可选值见下方 CSS 表格。
- 通过 `css` 的 `object-position`配合 `object-fit` 可以设置图片的对齐方式,类似于`background-position`,详情见下方 CSS 表格。
- 使用网络图片时:小程序需要去公众平台配置 [downloadFile](https://mp.weixin.qq.com/) 域名
- 使用网络图片时:**H5 和 Nvue 需要决跨域问题**
#### 方式一 Template
```html
<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>
```
#### 方式二 JSON
```js
// 基础用法
{
type: 'image',
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
css: {
width: '200rpx',
height: '200rpx'
}
},
// 填充方式
// css objectFit 设置 填
没有合适的资源?快使用搜索试试~ 我知道了~
码多多ChatAI智能聊天系统PHP源码版-2.2.0-9f9657.zip 仅限学习使用,商业使用请购买正版授权
共2000个文件
js:601个
vue:557个
md:410个
2 下载量 157 浏览量
2023-10-19
15:37:48
上传
评论
收藏 63.87MB ZIP 举报
温馨提示
功能 1. 卡密兑换(前台需自行前往装修页面手动添加菜单入口) 2. 创作功能支持markdown渲染 3. 新用户注册赠送绘画次数 4. 新增公告通知 5. 移动端创作页面新增搜索功能 6. 百度审核可以查看不合规原因 7. 会员套餐支持赠送绘画次数 优化 1. PC端分销层级显示问题 2. 首页示例显示全部 3. AI模型参数字段给提示文字 4. 账号没有绑定微信也支持微信支付 5. 关注公众号逻辑优化 6. 移动端基础页面新增底部导航 7. 移动端创作表单下拉框的箭头样式 修复 1. PC扫码登录,在手机端重复刷新登录会掉线问题 2. PC端短信验证码发送限制问题 3. 移动端资讯标题调整 4. chatglm模型下返回内容没有换行问题
资源推荐
资源详情
资源评论
收起资源包目录
码多多ChatAI智能聊天系统PHP源码版-2.2.0-9f9657.zip 仅限学习使用,商业使用请购买正版授权 (2000个子文件)
entry.e107db54.css 370KB
element-plus.e92058c2.css 232KB
iconfont.css 79KB
index-65332cbc.css 71KB
u-icon-3977f044.css 48KB
produce.eb88aba1.css 31KB
index.533e2d50.css 29KB
text-item-e95161a8.css 27KB
vue3-video-play.74881f83.css 27KB
chat.465c393c.css 27KB
keyword-suggestion.52e90299.css 19KB
uni.1a6f24c0.css 17KB
@wangeditor.4f35b623.css 15KB
drawing-control.8fb815db.css 13KB
z-paging-520290a3.css 7KB
mounted.css 7KB
u-button-e53597eb.css 6KB
drawing-3e589865.css 5KB
opinion.59f84bde.css 4KB
index.a5f797f5.css 4KB
el-form.470d7f10.css 4KB
error-404.8bdbaeb8.css 4KB
el-dialog.be61bd17.css 4KB
index.e0318412.css 3KB
create-2aeb5b48.css 3KB
el-progress.d6a46dc4.css 3KB
u-loading-c361a8f2.css 2KB
el-image-viewer.7448703b.css 2KB
dark.css 2KB
var.css 2KB
redeem_code-fd673275.css 2KB
el-popper.79d50afc.css 2KB
error-500.b63a96f5.css 2KB
icon_member-5dfa5211.css 2KB
index.546ab34e.css 2KB
var.css 2KB
default.d614fcb3.css 2KB
u-popup-00c943b3.css 2KB
open_vip-a5860f85.css 2KB
inline-demo.css 1KB
tabbar-3fad58f9.css 1KB
article_list-60aa6897.css 1KB
u-form-item-d6a97f32.css 1KB
el-popover.42c2bc56.css 1KB
picker.c3932958.css 1KB
el-scrollbar.fef41773.css 1KB
highlight.5f5db245.css 1KB
u-radio-group-addb4f08.css 1KB
withdraw-dcc5cc2c.css 1KB
u-checkbox-388166e9.css 1KB
style-guide.css 1KB
u-avatar-834fe49e.css 1007B
login-c7ce46c7.css 975B
user_set-39b8427c.css 975B
el-avatar.778a805b.css 961B
index.5a9dfd16.css 950B
oa-phone.38906974.css 941B
u-tabs-477c9a51.css 852B
u-avatar-cropper-a78b55d6.css 849B
u-badge-81f1de69.css 838B
u-search-7f865d2b.css 837B
nprogress.f5128a35.css 833B
el-card.6c182248.css 771B
chatting.a2c338fa.css 765B
vue-drag-resize.ccfde60c.css 758B
u-input-d27a9d66.css 741B
skills-b97f9073.css 716B
tabbar.2e1d5631.css 693B
index.a60d7499.css 677B
index.0e042cc4.css 667B
drawing-record.bf8fc30c.css 656B
content.53ab4a9d.css 637B
info.2f62075b.css 619B
picker.8e6ab4d6.css 573B
task_center-c143c4e2.css 559B
recharge-07127233.css 532B
options-boxes.css 515B
el-icon.6a81e97c.css 494B
user-9736cb10.css 482B
withdrawal.4dad3108.css 437B
badges.css 431B
u-image-7673150b.css 428B
index.e1326654.css 415B
index.fb85c0a9.css 409B
collection-00d40f02.css 404B
index.2ace3fcf.css 397B
earnings_detail-ce93a13b.css 359B
check-a7a293ae.css 358B
index.9bce7fe7.css 330B
pages.css 325B
menu.9a713318.css 312B
u-empty-d9a13c75.css 306B
agreement-9edf2585.css 303B
drawing-property.ffb96516.css 303B
index.a4e36cdc.css 290B
index.0d25a475.css 284B
drawing-picture.8624ca31.css 267B
page-status-209207d0.css 266B
create_record-ed1ab0e6.css 261B
preview-pc.cca3bef8.css 260B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
crmeb服务商-肥仔全栈开发
- 粉丝: 2238
- 资源: 160
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功