h5-webgl-program/src/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg.vue

<template src="./webgl_rxdz_krpanoclipImg.html">

</template>
<script>
	import krpanoVideo from "@/components/krpanoVideo/index.vue";
	import {getStorage} from '@/utils/localStorage';
	import { MessageBox } from 'mint-ui';
	import {
		Toast
	} from 'mint-ui';
	var requestId = "";
	const util = require('@/utils/util.js').default;
	import commonPageMethod from '@/mixins/commonPageMethod.js';
	import screenshot from '@/mixins/screenshot.js';
	// import commonPageMethod from '@/common/commonPageMethod.js';
	export default {
		components: {
			krpanoVideo,
		},
		mixins: [commonPageMethod,screenshot],
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvCurPageName: "webgl_clipImg",
				locusBehaviorName: "720设置封面",
				pvCurPageParams: null,
				houseId: "",
				pvId: 'p_2cmina_23121201',
				navbar: {
					showCapsule: 1,
					title: '设置封面',
					titleColor: '#000',
					navPadding: 0,
					navPaddingBg: 'transparent',
					navBarColor: 'transparent',
					navBackColor: 'transparent',
					haveCallback: true, // 如果是 true 会接手 navbarBackClk
					fromShare: false,
					fromProject: 0,
					shareToken: "",
					pageName: this.pvCurPageName,
				},
				id: '', // 户型编号
				houseId:'',
				canvasHeight:'',
				isIOS: false,
				videoUrl:'',	//绿幕视频地址
				bgUrl:'',
				scale:'',
				coordinate:'',
				muted: true, //视频是否静音
				width:'620',
				height:'620',
				left:'65',
				top:'150',
				startX:0,
				startY:0,
				clientX:0,
				clientY:0,
				screenWidth:0,
				screenHeight:0,
				type:1,
				bottomLeftX:0,
				bottomLeftY:0,
				AIPeople:'',
				AIPet:'',
				bgMusic:'',
				redBox:'',
				bili: 2/3,
				instance:null,
			}
		},
		beforeDestroy() {
			console.warn("***beforeDestroy-webgl_rxdz_krpanoclipImg***");
		},
		mounted(options) {
			var that = this;
			console.warn("***webgl_rxdz_roam-options***", this.$route.query)
			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			// this.videoUrl = this.$route.query.videoUrl || '';
			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
			// this.coordinate = this.$route.query.coordinate || '';
			// this.scale = this.$route.query.scale || '1';
			this.AIPeople = this.$route.query.AIPeople ? JSON.parse(this.$route.query.AIPeople) : '';
			this.AIPet = this.$route.query.AIPet ? JSON.parse(this.$route.query.AIPet) : '';
			this.bgMusic = this.$route.query.bgMusic ? JSON.parse(this.$route.query.bgMusic) : '';
			this.redBox = this.$route.query.redBox ? JSON.parse(this.$route.query.redBox) : '';
			
			let screenWidth = window.screen.width;
			let screenHeight = window.screen.height;
			if (window.innerWidth && window.screen.width) {
				this.screenWidth = screenWidth = Math.min(window.innerWidth, window.screen.width);
			}
			if (window.innerHeight && window.screen.height) {
				this.screenHeight = screenHeight = Math.min(window.innerHeight, window.screen.height)
			}
			let unit = screenWidth / 750; //单位rpm 对应 px 的值
			this.width = this.width * unit;
			this.height = parseInt(this.height/this.bili) * unit;
			this.left = this.left * unit;
			this.top = this.top * unit;
			this.canvasHeight = screenHeight;
			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
			if(window.__wxjs_environment === 'miniprogram'){
				this.navbar.showCapsule = 0;
			}
			this.initAI();
		},
		methods: {
			initAI(){
				if(this.AIPeople){
					this.$refs.krpanoVideo.peopleData = this.AIPeople;
				}
				if(this.AIPet){
					this.$refs.krpanoVideo.petData = this.AIPet;
				}
				if(this.redBox){
					this.$refs.krpanoVideo.redBoxData = this.redBox;
				}
				if(this.bgMusic){
					this.$refs.krpanoVideo.bgMusicData = this.bgMusic;
				}
			},
			async clipImgHandle(){
				console.warn("***clipImgHandle1***");
				this.instance = Toast({
					message: '正在截图，请稍后',
					duration:-1,
				});
				this.bottomLeftX = this.left;
				this.bottomLeftY = this.screenHeight - this.top - this.height;
				this.$refs.krpanoVideo.makescreenshot();
			},
			closeToast(){
				this.instance && this.instance.close();
			},
			navbarBackClk() {

			},
			mytouchstart(e,type) {
				console.warn("***mytouchstart***",type)
				this.type = type;
				this.startLeft = this.left;
				// this.clientX = 0;
				// this.clientY = 0;
				this.startX = e.changedTouches[0].clientX;
				this.startY = e.changedTouches[0].clientY;
				e.preventDefault();
			},
			mytouchmove(e) {
				let startX = this.startX; 	// 开始x坐标 
				let startY = this.startY; 	//开始y坐标
				let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标 
				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
				// this.clientX = touchMoveX - startX;
				// this.clientY = touchMoveY - startY;
				this.widthHandle(touchMoveX,1);
				e.preventDefault();
			},
			mytouchend(e) {
				
			},
			widthHandle(touchMoveX){
				let clientX = touchMoveX - this.startX;
				if(this.type==1){//左上角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}
					this.height = parseInt(this.width/this.bili);
				}else if(this.type==2){//右上角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}
					this.height = parseInt(this.width/this.bili);
				}else if(this.type==3){//右下角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}
					this.height = parseInt(this.width/this.bili);
				}else if(this.type==4){//左下角
					if(clientX < 0){//左移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft - _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left < 0){
							this.left = 0;
							this.width = this.screenWidth;
						}
					}else if(clientX > 0){//右移动
						let _juli = Math.abs(clientX);
						this.left = this.startLeft + _juli;
						this.width = this.screenWidth - (this.left * 2);
						if(this.left > (this.screenWidth - 200)/2){
							this.left = (this.screenWidth - 200)/2;
							this.width = 200;
						}
					}
					this.height = parseInt(this.width/this.bili);
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "./webgl_rxdz_krpanoclipImg.scss";
	/* @import "@/common/css/common.css"; */
</style>