# 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.2-44c3ce.zip 仅限学习使用,商业使用请购买正版授权
共2000个文件
js:629个
vue:569个
md:394个
1 下载量 112 浏览量
2023-10-25
09:02:42
上传
评论
收藏 63.88MB ZIP 举报
温馨提示
chatgpt 国内 功能 1. key池管理 优化 1. 登录优化 2. 优化PC开通会员界面 3. 绘画使用回调方式 4. IOS系统支持关闭支付功能 5. 问题支持复制 6. PC端会员有效期时间同时显示在外面 7. 绘画功能关闭时,前端提示功能未开启 8. 智谱模型改名 修复 1. 清空当前会话记录会把所有对话分组的记录都清空掉 2. 对话余额为0时,左侧余额隐藏 3. PC端-使用云存储后每日任务复制的链接错误问题 4. 对话接口切换为GLM时,无法新建技能问题
资源推荐
资源详情
资源评论
收起资源包目录
码多多ChatAI智能聊天系统PHP源码版-2.3.2-44c3ce.zip 仅限学习使用,商业使用请购买正版授权 (2000个子文件)
entry.efd6b27b.css 371KB
element-plus.e92058c2.css 232KB
iconfont.css 79KB
index-354bdd50.css 71KB
u-icon-3977f044.css 48KB
produce.5910a6f1.css 31KB
index.7e8497e5.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
index.b27b4c08.css 15KB
@wangeditor.4f35b623.css 15KB
el-dropdown.49c80f1c.css 7KB
z-paging-520290a3.css 7KB
mounted.css 7KB
u-button-e53597eb.css 6KB
drawing-c00153b9.css 4KB
opinion.59f84bde.css 4KB
notice.f4d41ad7.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
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-39956107.css 2KB
index.546ab34e.css 2KB
default.05804b51.css 2KB
var.css 2KB
open_vip-81fe3bf5.css 2KB
u-popup-00c943b3.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
u-picker-adec90ee.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.3e812e30.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.39b1648a.css 683B
index.0e042cc4.css 667B
index.5c7bf067.css 662B
content.53ab4a9d.css 637B
index.206091a1.css 625B
info.2f62075b.css 619B
picker.8e6ab4d6.css 573B
task_center-c143c4e2.css 559B
recharge-0e63f3d0.css 532B
options-boxes.css 515B
el-icon.6a81e97c.css 494B
user-6ca5c12d.css 482B
withdrawal.920ea7fb.css 453B
badges.css 431B
u-image-7673150b.css 428B
index.fb85c0a9.css 409B
collection-00d40f02.css 404B
index.2ace3fcf.css 397B
index.fcc9676a.css 391B
earnings_detail-ce93a13b.css 359B
check-a7a293ae.css 358B
index.69b74da8.css 358B
index.9bce7fe7.css 330B
pages.css 325B
index.6cb47f7b.css 320B
menu.9a713318.css 312B
u-empty-d9a13c75.css 306B
index.9aa11d33.css 306B
agreement-9edf2585.css 303B
drawing-property.c234e577.css 303B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
crmeb服务商-肥仔全栈开发
- 粉丝: 2268
- 资源: 160
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Picasso_v3.1 2.ipa
- chromedriver-mac-arm64.zip
- 蓝zapro.apk
- chromedriver-linux64.zip
- UCAS研一深度学习实验-MNIST手写数字识别python源码+详细注释(高分项目)
- 基于Python和PyTorch框架完成的一个手写数字识别实验源码(带MINIST手写数字数据集)+详细注释(高分项目)
- 基于Matlab在MNIST数据集上利用CNN完成手写体数字识别任务,并实现单层CNN反向传播算法+源代码+文档说明(高分项目)
- NVIDIA驱动、CUDA和Pytorch及其依赖
- 基于SVM多特征融合的微表情识别python源码+项目说明+详细注释(高分课程设计)
- html动态爱心代码一(附源码)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功