# 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.3.0-d24047.zip
共2000个文件
js:616个
vue:567个
md:399个
0 下载量 126 浏览量
2023-10-23
15:52:25
上传
评论
收藏 63.99MB ZIP 举报
温馨提示
chatgpt 国内 功能 1. 前端支持切换模型 2. 卡密列表导出功能 3. 卡密列表新增筛选 4. 对话记录支持批量删除 5. 对话记录新增审核状态筛选 6. 后台支持自定义绘画示例内容 优化 1. 移动端个人中心菜单数量不限制 2. 绘画翻译的翻译指令支持后台自定义 3. 优化百度文本审核 4. 优化一些前台界面 修复 1. PC端绘图下载图片问题 2. 部分用户的创造历史没有换行的问题
资源推荐
资源详情
资源评论
收起资源包目录
码多多ChatAI智能聊天系统PHP源码版-2.3.0-d24047.zip (2000个子文件)
entry.08b241a5.css 371KB
element-plus.e92058c2.css 232KB
iconfont.css 79KB
index-0ad6eb52.css 71KB
u-icon-3977f044.css 48KB
produce.a0848387.css 31KB
index.189b7e9f.css 29KB
text-item-c4da3dba.css 27KB
vue3-video-play.74881f83.css 27KB
model-picker.465c393c.css 27KB
keyword-suggestion.52e90299.css 19KB
uni.1a6f24c0.css 17KB
@wangeditor.4f35b623.css 15KB
index.5f6155e8.css 13KB
el-dropdown.49c80f1c.css 7KB
z-paging-520290a3.css 7KB
mounted.css 7KB
u-button-e53597eb.css 6KB
drawing-e0037e70.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
var.css 2KB
dark.css 2KB
redeem_code-fd673275.css 2KB
el-popper.79d50afc.css 2KB
error-500.b63a96f5.css 2KB
icon_member-ca7e6898.css 2KB
index.546ab34e.css 2KB
default.0a14bcc7.css 2KB
var.css 2KB
u-popup-00c943b3.css 2KB
open_vip-008c2eda.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-e2d16af9.css 1KB
u-checkbox-388166e9.css 1KB
style-guide.css 1KB
u-avatar-834fe49e.css 1007B
login-3da9fac5.css 975B
user_set-39b8427c.css 975B
el-avatar.778a805b.css 961B
index.5a9dfd16.css 950B
oa-phone.38906974.css 941B
create_record-f8b199e1.css 879B
chatting.a17cc0ab.css 864B
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
vue-drag-resize.ccfde60c.css 758B
u-input-d27a9d66.css 741B
skills-b97f9073.css 716B
tabbar.2e1d5631.css 693B
drawing-record.46b5b19f.css 683B
index.a60d7499.css 677B
index.0e042cc4.css 667B
index.5c7bf067.css 662B
content.53ab4a9d.css 637B
info.2f62075b.css 619B
drop-down-1ab72607.css 582B
picker.8e6ab4d6.css 573B
task_center-c143c4e2.css 559B
recharge-07127233.css 532B
options-boxes.css 515B
el-icon.6a81e97c.css 494B
user-6ca5c12d.css 482B
withdrawal.4dad3108.css 437B
badges.css 431B
u-image-7673150b.css 428B
index.fb85c0a9.css 409B
collection-00d40f02.css 404B
index.2ace3fcf.css 397B
index.96a8bcb8.css 391B
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.a5021993.css 303B
index.f025f7ee.css 290B
index.0d25a475.css 284B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
crmeb服务商-肥仔全栈开发
- 粉丝: 2270
- 资源: 160
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- [大模型部署]在C# Winform中使用文心一言ERNIE-3.5 4K 聊天模型
- python毕业设计-基于Django+OpenCV的二维码生成与识别系统设计与实现.zip
- python毕业设计-基于Django+OpenCV的二维码生成与识别系统设计与实现+使用说明.zip
- 基于STM32单片机空气监测系统设计源码+详细文档+配套全部资料(毕业设计).zip
- rdf0412-kcu116-pcie-c-2019-1.zip(XILINX KCU116 源码)
- 基于C#语言的winform界面火车票订票系统(源码+实验报告)
- 【华为OD部分真题及讲解】华为OD部分真题及讲解
- 基于Python+Django的京东商品比价系统源码+全部资料(毕业设计).zip
- G460 G560 Z460 Z560的最新BIOS 2.18版(无白名单)
- MetaJUI v0.4
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功