ICanvas - 语音录制波

演示

在线预览

在线模拟尺寸:

介绍

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

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #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="flex flex-center px-16">
			<view style="max-width: 450px;min-width: 300px;flex:1;width:100%;">
				<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: 650px;" ref="canvasDom"
					>
				</canvas>
			</view>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</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 { IQrcode } from '@/uni_modules/tmx-ui/core/canvas/lib/qrcode.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 }));



	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',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 oninit = () => {
		xcanvas.value.init()
			.then(() => {
				drawer()
			})
	}

	onReady(() => {
		setTimeout(function() {
			oninit()
		}, 200);
	})

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

<style>

</style>