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

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

方式一 Template

  • 提供l-painter-view、l-painter-text、l-painter-image、l-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 里四种类型组件的type为view、text、image、qrcode
  • 通过 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.mzph.cn/bicheng/57002.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

企业网站设计之网站版式设计

企业网站设计之网站版式设计

一个成功的企业网站不仅仅需要强大的技术支持&#xff0c;更需要合理而吸引人的版式设计。版式设计在网站建设中扮演着关键角色&#xff0c;直接影响用户体验和品牌形象。本文将探讨主题企业网站版式设计的关键要素。 一、清晰的信息结构&#xff1a; 一个主题企业网站应该具有…
阅读更多...
STM32学习笔记---独立看门狗

STM32学习笔记---独立看门狗

目录 一、什么是独立看门狗 1、什么是看门狗 2、看门狗的原理 3、看门狗的作用 4、看门狗的分类 二、如何配置独立看门狗 1、独立看门狗框图 2、独立看门狗的相关寄存器 2.1 关键字寄存器 2.2 分频寄存器 2.3 重载值寄存器 2.4 状态寄存器 3、程序设计 4、独立看门…
阅读更多...
零基础入门人工智能，如何利用AI工具提升你的学习效率？

零基础入门人工智能，如何利用AI工具提升你的学习效率？

在这个信息爆炸的时代&#xff0c;人工智能&#xff08;AI&#xff09;不仅是技术行业的热词&#xff0c;更是我们日常生活中不可或缺的部分。你是否也想过&#xff0c;如何更有效地学习和利用这些强大的AI工具来提升自己的学习效率&#xff1f;今天&#xff0c;我们将介绍六款…
阅读更多...
【WRF工具】QGis插件GIS4WRF：根据嵌套网格生成namelist.wps文件

【WRF工具】QGis插件GIS4WRF：根据嵌套网格生成namelist.wps文件

【WRF工具】QGis插件GIS4WRF：根据嵌套网格生成namelist.wps文件 准备：WRF嵌套网格QGis根据嵌套网格生成namelist.wps文件检查：根据namelist.wps绘制模拟区域ArcGIS Pro中绘制嵌套网络投影变换参考GIS4WRF 是一个免费且开源的 QGIS 插件，旨在帮助研究人员和从业者进行高级研…
阅读更多...
【Hive】8-Hive性能优化及Hive3新特性

【Hive】8-Hive性能优化及Hive3新特性

Hive性能优化及Hive3新特性 Hive表设计优化 Hive查询基本原理 Hive的设计思想是通过元数据解析描述将HDFS上的文件映射成表 基本的查询原理是当用户通过HQL语句对Hive中的表进行复杂数据处理和计算时&#xff0c;默认将其转换为分布式计算 MapReduce程序对HDFS中的数据进行…
阅读更多...
玫瑰花HTML源码

玫瑰花HTML源码

HTML源码 <pre id"tiresult" style"font-size: 9px; background-color: #000000; font-weight: bold; padding: 4px 5px; --fs: 9px;"><b style"color:#000000">0010000100000111101110110111100010000100000100001010111111100110…
阅读更多...
buuctf[湖南省赛2019]Findme1

buuctf[湖南省赛2019]Findme1

解压得5个图片&#xff0c;其中图片1&#xff0c;高度不正常&#xff0c;使用下面脚本破解真实高度和宽度 import os import binascii import structcrcbp open("1.png", "rb").read() for i in range(1024):for j in range(1024):data crcbp[12:16] st…
阅读更多...
维修数据屏：重塑热力公司运维管理新格局

维修数据屏：重塑热力公司运维管理新格局

在热力公司的运维管理中&#xff0c;高效的报修和维修流程是确保系统稳定运行的关键。随着科技的发展&#xff0c;维修数据屏的出现为热力公司的运维工作带来了重大变革。 一、传统热力运维面临的挑战 过去&#xff0c;热力公司在报修和维修方面存在诸多问题&#xff0c;给运维…
阅读更多...
SpringCloud学习：Seata总结与回顾

SpringCloud学习：Seata总结与回顾

SpringCloud学习&#xff1a;Seata总结与回顾 文章目录 SpringCloud学习&#xff1a;Seata总结与回顾1. Seata实战&#xff1a;测试2. Seate原理总结和面试题3. Seata总结与回顾4. 易混点 1. Seata实战&#xff1a;测试 测试问题 未启用分布式事务 若不使用分布式事务&#xf…
阅读更多...
Greenhills学习总结

Greenhills学习总结

学习背景&#xff1a;近期参与xx项目过程中&#xff0c;遇到较多的关于代码集成编译的知识盲区&#xff0c;因此需要进行相关知识的学习和扫盲。 参考资料&#xff1a;GreenHills2017.7编译手册:本手册是GreenHills 2017.7.14版编译器的软件使用手册。该手册详细介绍了GreenHi…
阅读更多...
Docker consul注册中心

Docker consul注册中心

一、consul 1.1、什么是服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。 起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。 直到后来出现了多个节点的分布式架构&#x…
阅读更多...
React(五) 受控组件和非受控组件； 获取表单元素的值。高阶组件(重点)，Portals； Fragment组件；严格模式StrictMode

React(五) 受控组件和非受控组件； 获取表单元素的值。高阶组件(重点)，Portals； Fragment组件；严格模式StrictMode

文章目录 一、受控组件1. 什么是受控组件2. 收集input框内容3. 收集checkBox的值4. 下拉框select总结 二、非受控组件三、高阶组件1. 高阶组件的概念 (回顾高阶函数)2. 高阶组件应用&#xff1a;注入props(1) 高阶组件给---函数式组件注入props(2) 高阶组件给---类组件注入prop…
阅读更多...
前100+大型语言模型（LLMs）面试问题和路线图

前100+大型语言模型（LLMs）面试问题和路线图

介绍 获取前 100 个精选的 LLM 面试问题&#xff0c;了解如何准备生成式 AI 或 LLM 面试准备和大型语言模型 &#xff08;LLM&#xff09; 面试准备的学习路径。 This article explains learning path for large language models (LLMs) interview preparation. You will fin…
阅读更多...
陪诊小程序之uniapp(从入门到精通)

陪诊小程序之uniapp(从入门到精通)

1.uniapp如何使用vue3编写页面 <template><view class"content"><navbar name"navbar组件"></navbar><image class"logo" src"/static/logo.png"></image><view class"text-area"&…
阅读更多...
C++进阶：AVL树实现

C++进阶：AVL树实现

目录 一.AVL的概念 二.AVL的实现 2.1AVL树的结构 2.2AVL树的插入 2.2.1AVL树插入一个值的大概过程 2.2.2平衡因子更新 2.2.3插入节点及更新平衡因子的实现 2.3旋转 2.3.1旋转的原则 2.3.2右单旋 2.3.3右单旋的代码实现 2.3.4左单旋 2.3.5左单旋的代码实现 2.3.6…
阅读更多...
vue综合指南(二)

vue综合指南(二)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vuet篇专栏内容:vue综合指南(二) 目录 21、介绍虚拟DOM 22、vue生命周期的理解 23、vue父组件向子组件传递数据…
阅读更多...
STM32_实验5_中断实验

STM32_实验5_中断实验

通过外部中断来检测四个按键按下的状态&#xff1a; WK_UP 控制蜂鸣器响和停 KEY0 控制 LED_R 互斥点亮 KEY1 控制 LED_G 互斥点亮 KEY2 控制 LED_B 互斥点亮。 中断的基本概念&#xff1a; 中断请求&#xff08;IRQ&#xff09;&#xff1a; 当发生某个特定事件&#xff08;例…
阅读更多...
【问题解决】——当出现0xc000007b和缺少mfc140.dll时，该怎么做才能让软件可以打开

【问题解决】——当出现0xc000007b和缺少mfc140.dll时，该怎么做才能让软件可以打开

目录 事情起因 问题处理 明确定义 填坑之路 最后我是怎么解决的&#xff08;不想看故事直接到这里&#xff09; 事情起因 最近想要重新安装西门子博途来做西门子的一些算法的时候&#xff0c;发现自己软件装的是V15.1的版本&#xff0c;而买的plc1200固件版本要求至少16以…
阅读更多...
（AtCoder Beginner Contest 375）D - ABA

（AtCoder Beginner Contest 375）D - ABA

&#xff08;AtCoder Beginner Contest 375&#xff09;D - ABA 题目大意 给定一个只包含大写字母的字符串S&#xff0c;求解其长度为3的回文字序列个数 思路 首先暴力枚举区间计算答案 O ( ∣ S ∣ 2 ) O(|S|^2) O(∣S∣2) 一定是会超时的 我们考虑使用前缀和思想 我们对于…
阅读更多...
推荐IDE中实用AI编程插件，目前无限次使用

推荐IDE中实用AI编程插件，目前无限次使用

插件介绍 一款字节跳动推出的“基于豆包大模型的智能开发工具” 以vscode介绍【pycharm等都可以啊】&#xff0c;这个插件提供智能补全、智能预测、智能问答等能力&#xff0c;节省开发时间 直接在IDE中使用&#xff0c;就不用在网页中来回切换了 感觉还可以&#xff0c;响应速…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023