低代码可视化-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-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

<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 H5
uni.showToast({
title: '长按上方图片保存',
duration: 2000
});
// #endif
// #ifndef H5
this.$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海报生成器可以通过集成特定的插件或组件来实现，这些插件或组件提供了丰富的功能和灵活性。在使用过程中，需要注意跨域问题、性能优化和兼容性测试等方面的问题。

原文地址：https://blog.csdn.net/luck332/article/details/143081015

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！