欢迎使用 c-poster

npm下载量：

注意：微信小程序需要添加download域名白名单

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?name=c-poster
npm install c-poster

使用方法

<template>
	<view class="poster">
		<c-poster
			ref="cPoster"
			:canvas-style="poster.style"
			:views="poster.views"
			@success="onSuccess"
		/>
	</view>
</template>

<script>
// 以下导入方式按照安装方式导入，二选一
// 插件市场导入方法：无需引入，可直接使用
// npm导入方法如下：
import cPoster from "c-poster/components/c-poster/c-poster.vue";
export default {
	// npm导入需要添加components，插件市场导入不需要
	components: {
	    cPoster
	},
	data() {
		return {
			poster: {
				style: {
					width: "200px",
					height: "300px"
				},
				views: [
					{
						type: "image",
						path: "https://img.alicdn.com/bao/uploaded/i3/2367364052/O1CN01EzU66N1fnrf4MBEwh_!!0-item_pic.jpg_460x460q90.jpg_.webp",
						x: 0,
						y: 0,
						width: 200,
						height: 200
					},
					{
						type: "text",
						content: "测试内容",
						x: 10,
						y: 210
					}
				]
			}
		}
	},
	onReady() {
		// 模仿接口请求
		setTimeout(() => {
			this.$refs.cPoster.init();
		}, 200)
	},
	methods: {
		onSuccess(filePath) {
			// filePath：uni.canvasToTempFilePath成功回调返回的文件路径
		}
	}
}
</script>

API

Props

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |canvas-style|canvas标签的样式|Object|-|-| |views|绘画canvas的内容|Array|-|-|

views，type为image的参数说明

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |type|类型：图片|String|image|-| |path|图片路径，支持网络图片和本地图片，本地图片地址示例：/static/logo.png|String|-|-| |x|单位px，图片x轴位置（图片距离canvas左边的距离）|Number|-|-| |y|单位px，图片y轴位置（图片距离canvas顶部的距离）|Number|-|-| |width|单位px，图片宽度|Number|-|-| |height|单位px，图片高度|Number|-|-| |radius|单位px，图片圆角|Number|-|-|

views，type为text的参数说明

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |type|类型：文本|String|text|-| |content|在画布上输出的文本|String|-|-| |x|单位px，文字x轴位置（文字距离canvas左边的距离）|Number|-|-| |y|单位px，文字y轴位置（文字距离canvas顶部的距离）|Number|-|-| |fontSize|单位px，字体大小|Number|-|-| |font|同css的font属性|String|-|-| |color|字体颜色|String|-|-|

Events

|事件名|说明|回调参数| |--|--|--| |success|canvas绘画成功回调|filePath|