当前位置: 首页 > news >正文

低代码可视化-uniapp海报可视化设计-代码生成

在uni-app中,海报生成器通常是通过集成特定的插件或组件来实现的,这些插件或组件提供了生成海报所需的功能和灵活性。我们采用了lime-painter海报组件。lime-painter是一款canvas海报组件,可以更轻松地生成海报。它支持通过JSON及Template的方式绘制海报,提供了丰富的样式和布局选项。

方式一 Template

  • 提供l-painter-viewl-painter-textl-painter-imagel-painter-qrcode四种类型组件
  • 通过 css 属性绘制样式,与 style 使用方式保持一致。
    <l-painter>
    //如果使用Template出现顺序错乱,可使用`template` 等所有变量完成再显示
    <template v-if="show"><l-painter-viewcss="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"></l-painter-view><l-painter-viewcss="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-viewcss="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"></l-painter-view>
    <template>
    </l-painter>

方式二 JSON

  • 在 json 里四种类型组件的typeviewtextimageqrcode
  • 通过 board 设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json)
  • 所有类型的 schema 都具有css字段,css 的 key 值使用驼峰如:lineHeight
<l-painter :board="poster"/>
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 的数组字段,用于嵌套承载节点。

海报设计器

DIY可视化对lime-painter结合现有的系统提供的可视化布局,我们先对海报进行设计,然后结合低代码代码生成器,快速生成适配lime-painter代码。

代码生成器

<template><view class="container container329152"><text @tap="navigateTo" data-type="openmodal" data-id="painter" class="diygw-col-24"> 内容 </text><view class="flex flex-direction-column align-center diygw-col-24 painter-clz"><image class="diygw-col-24" :src="painter" mode="widthFix"></image><l-painter ref="painterRef" isCanvasToTempFilePath @success="painter = $event" hidden css="background: linear-gradient( 135deg, #FCCF31 10%, #F55555 100%);width:750rpx;"><l-painter-view css="display:flex;flex-wrap:wrap;flex-direction:column;flex-shrink:0;padding-top:20rpx;color:#ffffff;padding-left:20rpx;width:750rpx;padding-bottom:20rpx;padding-right:20rpx;"><l-painter-view css="display:flex;flex-wrap:wrap;align-items:center;padding-top:10rpx;color:#ffffff;padding-left:10rpx;padding-bottom:10rpx;padding-right:10rpx;"><l-painter-image src="/static/10.jpg" css="border-bottom-left-radius:50%;overflow:hidden;border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;height:80rpx; width:80rpx ;" mode="widthFix"></l-painter-image><l-painter-view css="display:flex;flex-wrap:wrap;flex-direction:column;padding-top:10rpx;flex:1;padding-left:10rpx;padding-bottom:10rpx;padding-right:10rpx;"><l-painter-text text="DIY可视化" css=""> </l-painter-text><l-painter-text text="为你挑选了一个好物" css=""> </l-painter-text></l-painter-view></l-painter-view><l-painter-view css="display:flex;flex-wrap:wrap;flex-direction:column;padding-top:20rpx;border-bottom-left-radius:12rpx;color:#000000;padding-left:20rpx;padding-bottom:20rpx;border-top-right-radius:12rpx;background-color:#ffffff;flex-shrink:0;overflow:hidden;width:670rpx;border-top-left-radius:12rpx;border-bottom-right-radius:12rpx;padding-right:20rpx;"><l-painter-image src="/static/pic1.jpg" css="border-bottom-left-radius:12rpx;overflow:hidden;border-top-left-radius:12rpx;border-top-right-radius:12rpx;border-bottom-right-radius:12rpx;height:240rpx; width:100% ;" mode="widthFix"></l-painter-image><l-painter-view css="display:flex;flex-wrap:wrap;align-items:end;padding-top:10rpx;padding-left:10rpx;padding-bottom:10rpx;padding-right:10rpx;"><l-painter-text text="¥139" css="color:#fe0505;font-weight:bold;font-size:32rpx;"> </l-painter-text><l-painter-text text="¥139" css="text-decoration:line-through;vertical-align:bottom;"> </l-painter-text></l-painter-view><l-painter-view css="display:flex;flex-wrap:wrap;padding-top:10rpx;color: #8c5400;padding-left:10rpx;padding-bottom:10rpx;padding-right:10rpx;"><l-painter-text text="自营" css="background-color:#fff4d9;margin-left:0rpx;margin-top:0rpx;margin-bottom:0rpx;margin-right:10rpx;"> </l-painter-text><l-painter-text text="30天最低价" css="background-color:#fff4d9;margin-left:0rpx;margin-top:0rpx;margin-bottom:0rpx;margin-right:10rpx;"> </l-painter-text><l-painter-text text="满减优惠" css="background-color:#fff4d9;margin-left:0rpx;margin-top:0rpx;margin-bottom:0rpx;margin-right:10rpx;"> </l-painter-text></l-painter-view><l-painter-view css="display:flex;flex-wrap:wrap;align-items:center;padding-top:10rpx;padding-left:10rpx;padding-bottom:10rpx;padding-right:10rpx;"><l-painter-text text="DIY可视化DIY可视化DIY可视化DIY可视化DIY可视化DIY可视化DIY可视化DIY可视化" css="line-clamp: 2;flex:1;font-weight:bold;vertical-align:center;font-size:28rpx;"> </l-painter-text><l-painter-qrcode :text="qrcode" css="height:120rpx;width:120rpx" mode="aspectFit"></l-painter-qrcode></l-painter-view></l-painter-view></l-painter-view></l-painter><view class="flex diygw-col-24"><button @tap="savePainter()" class="diygw-btn green radius flex-sub margin-xs">生成海报</button></view></view></view><view class="clearfix"></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},painter: '',qrcode: `https://www.diygw.com`};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {},savePainter() {// #ifdef H5uni.showToast({title: '长按上方图片保存',duration: 2000});// #endif// #ifndef H5this.$refs.painterRef.canvasToTempFilePathSync({fileType: 'jpg',quality: 1,success: (res) => {console.log(res.tempFilePath);uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000});console.log('save success');},fail(e) {if (e.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {uni.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: (modalSuccess) => {uni.openSetting({success(settingdata) {console.log('settingdata', settingdata);if (settingdata.authSetting['scope.writePhotosAlbum']) {uni.showModal({title: '提示',content: '获取权限成功,再次点击图片即可保存',showCancel: false});} else {uni.showModal({title: '提示',content: '获取权限失败,将无法保存到相册哦~',showCancel: false});}}});}});}}});},fail(e) {console.log('生成海报失败', e);}});// #endif}}};
</script><style lang="scss" scoped>.painter-clz {z-index: 1000000;}.text1-clz {color: #fe0505;font-weight: bold;font-size: 32rpx !important;}.text4-clz {text-decoration: line-through;vertical-align: bottom;}.text5-clz {background-color: #fff4d9;margin-left: 0rpx;margin-top: 0rpx;margin-bottom: 0rpx;margin-right: 10rpx;}.text6-clz {background-color: #fff4d9;margin-left: 0rpx;margin-top: 0rpx;margin-bottom: 0rpx;margin-right: 10rpx;}.text7-clz {background-color: #fff4d9;margin-left: 0rpx;margin-top: 0rpx;margin-bottom: 0rpx;margin-right: 10rpx;}.text8-clz {flex: 1;font-weight: bold;vertical-align: middle;font-size: 28rpx !important;}.container329152 {}
</style>

生成海报的步骤

设计海报布局:首先,需要根据需求设计海报的布局和内容。这通常包括确定海报的尺寸、背景、文字、图片和二维码等元素的位置和样式。
引入插件或组件:工具已经集成了该插件,导出源码包括了插件。
配置海报内容:通过Template的方式配置海报的内容。这包括设置各个元素的类型、样式和属性等。
生成海报:在页面中调用插件或组件提供的生成海报的方法,将配置好的海报内容渲染成图片。生成的图片可以保存到本地或上传到服务器进行分享和传播。

注意事项

跨域问题:在使用网络图片时,需要注意跨域问题。H5和Nvue平台可能需要处理跨域请求的相关配置。
性能优化:生成海报的过程可能会涉及大量的计算和渲染工作,因此需要注意性能优化。可以通过减少不必要的元素、优化图片大小和质量等方式来提高性能。
兼容性测试:在不同的平台和设备上测试海报生成器的兼容性和稳定性。确保在不同环境下都能正常生成和显示海报。
综上所述,uni-app海报生成器可以通过集成特定的插件或组件来实现,这些插件或组件提供了丰富的功能和灵活性。在使用过程中,需要注意跨域问题、性能优化和兼容性测试等方面的问题。

http://www.lryc.cn/news/466476.html

相关文章:

  • 一次使用LD_DEBUG定位问题的经历
  • 数据库安全:如何进行数据库安全审计?
  • 【Python】基础语法错误和异常
  • 获取每个页面的元素,并写入json
  • 【ShuQiHere】深入解析数字电路中的锁存器与触发器
  • 【学习AI-相关路程-mnist手写数字分类-python-硬件:jetson orin NX-自我学习AI-基础知识铺垫-遇到问题(1) 】
  • 数据轻松上云——Mbox边缘计算网关
  • ifftshift函数
  • vue3 + ts + element-plus 二次封装 el-dialog
  • MySQL9.0安装教程zip手动安装(Windows)
  • 如何在浏览器中查看格式化的 HTML?
  • 浅谈计算机存储体系和CPU缓存命中
  • ES操作:linux命令
  • Java使用原生HttpURLConnection实现发送HTTP请求
  • TinyC编译器5—词法分析
  • 电子电气架构---智能计算架构和SOA应用
  • Python Numpy 实现神经网络自动训练:反向传播与激活函数的应用详解
  • Apache Calcite - 基于规则的查询优化
  • react学习笔记,ReactDOM,react-router-dom
  • 优化UVM环境(八)-整理project_common_pkg文件
  • 【实战案例】Django框架连接并操作数据库MySQL相关API
  • 【其他】无法启动phptudy服务,提示错误2:系统找不到指定的文件
  • AI驱动的支持截图或线框图快速生成网页应用的开源项目
  • es集群索引是黄色
  • 获取淘宝商品评论的方法分享-调用API接口item_review
  • MATLAB人脸考勤系统
  • Spring篇(事务篇 - 基础介绍)
  • qt EventFilter用途详解
  • [ 钓鱼实战系列-基础篇-6 ] 一篇文章让你了解邮件服务器机制(SMTP/POP/IMAP)-1
  • wordpress伪静态规则