ICanvas - 语音录制波

演示

预览

介绍

演示如何绘制图片，二维码并生成海报图片。

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">海报绘制</x-text>
			<x-text color="#999999" class="mb-8">演示如何绘制海报及二维码</x-text>
			<view>
				<x-button :block="true" @click="getImg">获取海报图片</x-button>
			</view>
		</x-sheet>
		<view class="xICanvasHost" :id="canvasId" :style="{height: canvasH + 'px'}">
			<x-skia-u ref="skiaRef" :width="canvasW" :height="canvasH" @ready="onSkiaReady"></x-skia-u>
			<view class="xICanvasHit"
				@click="bindEvents" @touchstart="bindEvents" @touchmove.stop="bindEvents"
				@touchend="bindEvents" @touchcancel="bindEvents" @mousedown="bindEvents"
				@mousemove="bindEvents" @mouseup="bindEvents"
				<!-- #ifdef WEB -->
				@mouseleave="bindEvents"
				<!-- #endif -->
			></view>
		</view>

</template>

<script setup>
	import { ICanvas,CanvasEventType, ICanvasEvent ,ICanvasOptional ,IQrcode,
	IRect,IText,Tween,ImageShape,Path2DShape,IRing,IArc,ISector,IRegularPolygon,
	ILinePolygon,ICircle,IEllipse,IStar,Easing,EasingFunction,GravityPlugin, GravityManager, addGravityToShape
	} from '@/uni_modules/tmx-ui';

	const canvasId = "xCanvas-" + Math.random().toString(16).substring(4)
	const canvasW = Math.max(1, Math.floor(uni.getWindowInfo().windowWidth))
	const canvasH = 650
	const skiaRef = ref(null)
	const proxy = getCurrentInstance()?.proxy ?? null;
	const xcanvas = shallowRef<ICanvas>(new ICanvas({ canvasId: canvasId, component: proxy as any | null } as ICanvasOptional));



	const bindEvents = (evt : UniTouchEvent | UniPointerEvent | UniMouseEvent) => {
		xcanvas.value.bindEvent(evt)
	}


	// 初始化绘制
	const drawer = () => {
		if (xcanvas.value == null) return;
		const render = xcanvas.value! as ICanvas
		
		// 设置背景
		const bgRect = new IRect({
			x: 0,
			y: 0,
			width: render.boxWidth,
			height: render.boxHeight,
			fill: "#3677ff",
			fillGradient: ['0deg', '#5c6cfe 0%',  '#3639ff 100%']
		}, render)
		
		const productImg = new ImageShape({
					src:'/static/temqrcoderPicCanvas.jpg',
					width:render.boxWidth,
					height:render.boxWidth,
				},
				render
		)
			
		const qr = new IQrcode({foreground:'#fff',stroke:'#fff',padding:8,strokeWidth:5,height:150,width:150,x:(render.boxWidth-150)/2,y:render.boxWidth+32},render)
		
		const labelText = new IText({
			text:"长按识别打开",
			width:render.boxWidth,
			x:0,
			textAlign:'center',
			fontSize:16,
			fill:'#fff',
			y:render.boxWidth+200,
			},render
		)
		
		render.addShape([bgRect,productImg,qr,labelText])
		render.render()
	}
	
	const getImg = ()=>{
		if (xcanvas.value == null) return;
		const render = xcanvas.value! as ICanvas
		render.getImage().then((imgpath:string)=>{
			console.log(imgpath)
			uni.previewImage({
				current:imgpath,
				urls:[imgpath]
			})
		})
	}

	const onSkiaReady = () => {
		const ctx = skiaRef.value?.getContext("2d")
		if (ctx == null) return
		xcanvas.value.onSurfaceReady(ctx, drawer)
	}

	onBeforeUnmount(()=>{
		xcanvas.value?.destroy()
	})
</script>

<style>
	.xICanvasHost { position: relative; width: 100%; overflow: hidden; }
	.xICanvasHit { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
</style>