c-poster

欢迎使用 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