更新记录

1.0.3（2023-04-11）

优化微信小程序端生成海报的清晰度

1.0.2（2023-03-29）

兼容vue2

1.0.1（2023-01-11）

新增绘制图片设置圆角，文字设置对齐方式

平台兼容性

c-canvas

• c-design 海报绘制组件

c-design交流群号：330647926

示例预览

https://cloud.vuedata.wang/cdesign/#/pages/canvas/canvas

一、使用示例

<template>
    <view>
        <c-canvas ref="cCanvas" @drawSuccess='thumb=$event' :drawData='drawData' :width='375' :height='475'></c-canvas>
        <image :src="thumb" mode="widthFix" style="width: 100%;"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                thumb:'',
                canvasId:'myCanvas',
                width:375,height:475,
                drawData:[{
                    type: 'image',
                    x: 0,
                    y: 0,
                    value: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/f5c141ce-472b-4ce7-8886-2028ca631e0c.png',
                    width:375,height:475
                },{
                    type: 'image',
                    x: 0,
                    y: 0,
                    value: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/f6bd3c29-d452-423e-a4a6-1728b9c2b074.jpeg',
                    width:375,height:375,
                    radius:10
                },
                {
                    type: 'text',
                    x: 10,
                    y: 400,
                    value: '22新款M2Apple/苹果 MacBook Air 13 英寸 MacBook Air笔记本电脑',
                    color: '#262626',
                    font:'normal 400 14px sans-serif',
                    lineHeight:20,
                    lineMaxWidth:250,
                    lineNum:2
                },
                {
                    type: 'image',
                    x: 280,
                    y: 385,
                    value: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7dca3f02-baef-470d-88d2-eebd7c31ab73.jpg',
                    width:80,height:80
                },
                {
                    type: 'text',
                    x: 10,
                    y: 450,
                    value: '¥ 9999.00',
                    color: '#f44',
                    font:'normal 400 24px sans-serif',
                    lineHeight:20,
                    lineMaxWidth:200,
                    lineNum:2
                },]
            };
        },
        onReady() {
        }
    }
</script>

<style lang="scss"></style>

二、属性介绍

drawData 字段描述

三、Event

四、Methods