更新记录

1.0.1（2025-01-11） 下载此版本

删除组件中的console.log

1.0.0（2025-01-11） 下载此版本

无

平台兼容性

uts海报组件（ios/Android 支持字体样式、渐变背景）

参数

BaseElement

GradientType

示例

<template>
    <view class="container">
        <ZlPosters ref="PosterPainterRef" :width="canvasWidth" :height="canvasHeight" :elements="posterElements"
            :background-color="backgroundColor" :backgroundGradient="backgroundGradient" @onSuccess="handleSuccess"
            @onError="handleError">
        </ZlPosters>
        <view style="background-color: red;">
        </view>

        <button class="generate-btn" @click="onGenerateClick">{{ buttonText }}</button>
    </view>
</template>

<script lang="uts">
    import ZlPosters from '@/components/zl-posters/zl-posters'
    import { BaseElement } from "@/components/zl-posters/types.uts"
    export default {
        components: {
            ZlPosters,
        },
        data() {
            return {
                buttonText: '点击生成海报',
                canvasWidth: 310 as number,
                canvasHeight: 490 as number,
                backgroundColor: '#DCDCDC' as string,//背景色
                backgroundGradient: {
                    type: 'linear',
                    colors: ['#d4fc79', '#84fab0', '#8fd3f4'],  // 
                    positions: [0, 0.5, 1],  // 中间色在50%
                    angle: 45
                },//渐变的背景色
                posterElements: [
                    {
                        type: 'image', //类型
                        src: "/static/test2.jpg", //图片路径
                        x: 20, //x轴
                        y: 20,//y轴
                        width: 270,//宽
                        height: 380,//高
                        borderRadius: 14//圆角
                    },
                    // 添加一个普通的蓝色矩形区域
                    {
                        type: 'rect',
                        x: 20,
                        y: 380,
                        width: 60,
                        height: 60,
                        borderRadius: 30,
                        // backgroundColor: '#0000ff', //矩形颜色
                        gradient: {
                            type: 'radial',
                            colors: ['#ffffff', '#000000'],  // 从白色渐变到黑色
                            positions: [0, 1],
                            angle: 0  // 径向渐变不需要角度
                        }, //矩形渐变颜色
                    },
                    {
                        type: 'image',
                        src: '/static/test1.jpg',
                        x: 30,
                        y: 390,
                        width: 40,
                        height: 40,
                        borderRadius: 20
                    },
                    {
                        type: 'text',
                        content: '嘿嘿',
                        x: 100,
                        y: 418,
                        width: 215,
                        height: 18,
                        fontSize: 12,
                        textAlign: "left",
                        fontFamily: 'ts',
                        color: '#666'
                    },
                    {
                        type: 'text',
                        content: '这是一段很长的文字，需要自动换行显示。这是一段很长的文字，需要自动换行显示。这是一段很长的文字，需要自动换行显示。需要自动换行显示。这是一段很长的文字，需要自动换行显示。需要自动换行显示。这是一段很长的文字，需要自动换行显示。',
                        x: 20,
                        y: 450,
                        width: 270,
                        height: 42,
                        fontSize: 8,
                        lineHeight: 14,  // 设置行高
                        maxLines: 3,     // 最多显示3行
                        color: '#666',
                        textAlign: 'left'
                    },

                ] as Array<BaseElement>
            }
        },
        methods: {
            onGenerateClick() : void {
                (this.$refs['PosterPainterRef'] as ZlPostersComponentPublicInstance).generatePoster()
            },
            handleSuccess(base64 : string) : void {
                console.log('海报生成成功:', base64);

            },
            handleError(error : string) : void {
                console.error('海报生成失败:');
            }
        }
    }
</script>