码多多AI源码码多多ChatAI智能聊天系统PHP源码版,基于前后端分离架构以及Vue3、uni-app、ThinkPHP6.x

# 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 设置 填