ICanvas - 语音录制波

演示

在线预览

在线模拟尺寸:

介绍

可能ILayout排版引擎可以对添加进的元素自动排版。

示例源码

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">通过shape元素clone一定数量后，再通过ILayout来自行排列，省去自动计算位置的繁琐操作。</x-text>

	</x-sheet>
	<x-sheet color="#000" dark-color="#000" :padding="['0']">
		<canvas android-layer-type="hardware" :id="canvasId" @click="bindEvents" @touchstart="bindEvents"
			@touchmove="bindEvents" @touchend="bindEvents" @touchcancel="bindEvents" @mousedown="bindEvents"
			@mousemove="bindEvents" @mouseup="bindEvents" <!-- #ifdef WEB -->
			@mouseleave="bindEvents"
			<!-- #endif -->
			style="width: 100%;height: 450px;" ref="canvasDom"
			>
		</canvas>
	</x-sheet>


</template>

<script setup>
	import { ICanvas } from '@/uni_modules/tmx-ui/core/canvas/ICanvas.uts';
	import { CanvasEventType, ICanvasEvent, IShapeVector2d } from '@/uni_modules/tmx-ui/core/canvas/interface.uts';
	import { Easing, EasingFunction } from '@/uni_modules/tmx-ui/core/canvas/lib/animation/tween.uts';

	import { IRect } from '@/uni_modules/tmx-ui/core/canvas/lib/rect.uts';
	import { IText } from '@/uni_modules/tmx-ui/core/canvas/lib/text.uts';
	import { Tween } from '@/uni_modules/tmx-ui/core/canvas/lib/animation/tween.uts';
	import { ImageShape } from '@/uni_modules/tmx-ui/core/canvas/lib/image.uts';
	import { Path2DShape } from '@/uni_modules/tmx-ui/core/canvas/lib/path2d.uts';
	import { IRing } from '@/uni_modules/tmx-ui/core/canvas/lib/ring.uts';
	import { IArc } from '@/uni_modules/tmx-ui/core/canvas/lib/arc.uts';
	import { ISector } from '@/uni_modules/tmx-ui/core/canvas/lib/sector.uts';
	import { IRegularPolygon } from '@/uni_modules/tmx-ui/core/canvas/lib/regularPolygon.uts';
	import { ILinePolygon } from '@/uni_modules/tmx-ui/core/canvas/lib/linePolygon.uts';
	import { ICircle } from '@/uni_modules/tmx-ui/core/canvas/lib/circle.uts';
	import { IEllipse } from '@/uni_modules/tmx-ui/core/canvas/lib/ellipse.uts';
	import { IStar } from '@/uni_modules/tmx-ui/core/canvas/lib/star.uts';
	import { ILine } from '@/uni_modules/tmx-ui/core/canvas/lib/line.uts';
	import { ILayout } from '@/uni_modules/tmx-ui/core/canvas/lib/layout.uts';

	const canvasDom = ref<UniCanvasElement | null>(null)
	const canvasId = "xCanvas-" + Math.random().toString(16).substring(4)
	const proxy = getCurrentInstance()?.proxy ?? null;
	const xcanvas = ref<ICanvas>(new ICanvas({ canvasId: canvasId, component: proxy as any | null }));

	// 存储所有线条和动画
	let voiceLines : ILine[] = []
	let tweens : Tween[] = []

	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: "#252a36"
		}, render)
		render.addShape(bgRect)

		const recttest = new IRect({
			x: 0,
			y: 0,
			width: 50,
			radius:8,
			height: 50,
			fill: '#00ccff'
		}, render)
		
		const shapesList = recttest.clone(24)
		render.addShape(shapesList)
		
		let layout = new ILayout(render)
		layout.setsPosition(50,50)
		layout.setsSize(layout.width - 100,layout.height - 100)
		layout.setsMode('between')
		layout.setsWrap(true)
		layout.addShape(shapesList)
		
		layout.render()
		render.render()
		shapesList.forEach((elrect,index)=>{
			// 为每条线创建不同的动画参数
			const animationDuration = 800 + Math.random() * 400 // 800-1200ms
			const delay = index * 50 // 错开动画时间
			// 创建高度变化动画
			const tween = new Tween(elrect, render)
				.delay(delay)
				.setLoop(-1)
				.onUpdate((progress:number) => {
					// 动态改变颜色
					const progressPec = Math.sin((Date.now()+animationDuration) * 0.005 + index * 0.5) * 0.5 + 0.5
					const colors = [
						'#00ff88',
						'#00ccff', 
						'#ff6b6b',
						'#37ff66',
						'#91ff62',
						'#5269ff',
						'#8026ff',
						'#aa00ff'
					]
					const colorIndex = Math.floor(progressPec * (colors.length - 1))
					elrect.setFill(colors[colorIndex])
					elrect.setRotateCenter('center')
					elrect.setScaleX(progressPec)
					elrect.setScaleY(progressPec)
				})
				.start()
			
			tweens.push(tween)
		})
		
	}

	const oninit = () => {
		xcanvas.value.init()
			.then(() => {
				drawer()
			})
	}

	onReady(() => {
		oninit()
	})

	onBeforeUnmount(() => {
		// 清理所有动画
		tweens.forEach(tween => {
			tween?.destroy()
		})
		tweens = [] as Tween[]
		xcanvas.value?.destroy()
	})
	
	
</script>

<style>

</style>