龙门石窟 画布 测试

<template>
	<view class="content">
		<canvas style="width: 100%; height:65vh;" canvas-id="firstCanvas" id="firstCanvas" disable-scroll="true"></canvas>
		<view class="center" v-show="flag">
			<van-tabs :active="active" bind:change="onChange" nav-class="nav" color="#af2220" title-style="#af2220">
				<van-tab title="石窟">
					<view class="list">
						<view v-for="(item,index) in List">
							<view style="line-height: 55rpx;" @click="tiny(item.src)">{{item.content}}</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="香山寺">
					<view class="list">
						<view v-for="(item,index) in List">
							<view style="line-height: 55rpx;" @click="tiny(item.src)">{{item.content}}</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="白园">
					<view class="list">
						<view v-for="(item,index) in List">
							<view style="line-height: 55rpx;" @click="tiny(item.src)">{{item.content}}</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="洛阳">
					<view class="list">
						<view v-for="(item,index) in List">
							<view style="line-height: 55rpx;" @click="tiny(item.src)">{{item.content}}</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="杜丹">
					<view class="list">
						<view v-for="(item,index) in List">
							<view style="line-height: 55rpx;" @click="tiny(item.src)">{{item.content}}</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<view class="center" v-show="map">
			<van-tabs :active="active1" bind:change="onChange" nav-class="nav" color="#af2220" title-style="#af2220">
				<van-tab title="龙门远方">
					<view class="list">
						<view v-for="(item,index) in data">
							<image class="image" :src="item.img" mode="" @click="spot(item.img)"></image>
						</view>
					</view>
				</van-tab>
				<van-tab title="石窟">
					<view class="list">
						<view v-for="(item,index) in  data">
							<image class="image" :src="item.img" mode="" @click="spot(item.img)"></image>
						</view>
					</view>
				</van-tab>
				<van-tab title="香山寺">
					<view class="list">
						<view v-for="(item,index) in  data">
							<image class="image" :src="item.img" mode="" @click="spot(item.img)"></image>
						</view>
					</view>
				</van-tab>
				<van-tab title="龙门桥">
					<view class="list">
						<view v-for="(item,index) in  data">
							<image class="image" :src="item.img" mode="" @click="spot(item.img)"></image>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<view class="nav-b">
			<view class="poetry" @click="box_if">
				<image class="pic" src="../../static/QQ图片20201017111917.png" mode=""></image>
				<view class="word">诗词</view>
			</view>
			<view class="drawing" @click="box">
				<image class="pic" src="../../static/QQ图片20201017111959.png" mode=""></image>
				<view class="beautiful">美图</view>
			</view>
			<view class="produce" @click="hb()">
				生成
			</view>
		</view>
	</view>

</template>

<script>
	import sison from '../../information/sison.js';
	export default {
		data() {
			return {
				data: [],
				List: [],
				active: 0,
				active1: 0,
				flag: true,
				map: false,
				// o: ""
				traverse: '',
				Lists: '',
				datas: ''
			}
		},
		onLoad() {
			var _tant = this
			_tant.data = sison.data;
			_tant.List = sison.List;
			// _tant.Lists = _tant.List[0].src
			var ctx = uni.createCanvasContext('firstCanvas')
			// uni.getImageInfo({
			// 	src: _tant.data[0].img,
			// 	src: _tant.List[0].src,
			// 	success: function(res) {
			// 		ctx.drawImage(res.path, 0, 0, 450, 550)
			// 		ctx.drawImage(_tant.List[0].src, 0, 0, 450, 550)
			// 		ctx.draw()

			// 	},
			// })
			uni.getImageInfo({
				src: _tant.data[0].img,
				success: function(res) {
					uni.getImageInfo({
						src: _tant.List[0].src,
						success: function(res1) {
							ctx.drawImage(res.path, 0, 0, 380, 425);
							ctx.drawImage(res1.path, 0, 0, 380, 425);
							ctx.draw();
							_tant.Lists = res1.path
						}
					});
				}
			});

		},
		methods: {
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
			onChange(event) {
				wx.showToast({
					title: `切换到标签 ${event.detail.name}`,
					icon: 'none',
				});
			},
			box_if() {
				this.flag = true;
				this.map = false;

			},
			box() {
				this.flag = false;
				this.map = true;
			},
			// point(aa) {
			// 	this.o = aa;
			// }

			spot(aa) {

				console.log(aa)
				var _tant = this;
				var ctx = uni.createCanvasContext('firstCanvas')
				// uni.getImageInfo({
				// 	src: aa,
				// 	success: function(res) {
				// 		ctx.drawImage(res.path, 0, 0, 450, 550)
				// 		ctx.drawImage(_tant.Lists, 0, 0, 450, 550)
				// 		ctx.draw()
				// 	}
				// })
				uni.getImageInfo({
					src: aa,
					success: function(res) {
						uni.getImageInfo({
							src: _tant.Lists,
							success: function(res1) {
								ctx.drawImage(res.path, 0, 0, 380, 425);
								ctx.drawImage(res1.path, 0, 0, 380, 425);
								ctx.draw();
								_tant.qwe = res.path
							}
						});
					}
				});
			},
			tiny(bb) {
				console.log(bb)
				var _tant = this;
				var ctx = uni.createCanvasContext('firstCanvas')
				uni.getImageInfo({
					src: bb,
					success: function(res2) {
						uni.getImageInfo({
							src: _tant.qwe,
							success: function(res1) {
								ctx.drawImage(res2.path, 0, 0, 380, 425);
								ctx.drawImage(res1.path, 0, 0, 380, 425);
								ctx.draw();
								
							}
						});
					}
				})
			},
			hb() {
				uni.canvasToTempFilePath({
					width: 380,
					height: 425,
					destWidth: 380,
					destHeight: 425,
					canvasId: 'firstCanvas',
					success: (res) => {
						console.log(res.tempFilePath)
						uni.navigateTo({
							url: "../poster/poster?pic=" + res.tempFilePath
						})
					}
				})
			}

		}
	}
</script>

<style>
	.nav {
		background-color: #f3ecdd;
		width: 100%;
		position: absolute;
	}

	page {
		background-color: #fcfbf5;
		height: 100vh;
	}

	.list {
		margin-top: 20rpx;
	}

	.list-one {
		margin-top: 20rpx;
	}

	.nav-b {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		line-height: 80rpx;
		position: absolute;
		bottom: 0;
	}

	.poetry {
		display: flex;
		justify-content: center;
		width: 33%;
		background-color: #e9dec6;
		align-items: center;
	}

	.pic {
		width: 20%;
		height: 40rpx;
	}

	.drawing {
		display: flex;
		justify-content: center;
		width: 33%;
		background-color: #e9dec6;
		align-items: center;
	}

	.produce {
		text-align: center;
		width: 33%;
		align-items: center;
		background-color: #bd8b43;
		color: #FFFFFF;
		padding-top: 15rpx;
		font-size: 17px;
		font-weight: 600;
	}

	.word {
		color: #a60606;
		font-weight: 600;
		font-size: 17px;
	}

	.beautiful {
		width: 30%;
		font-size: 17px;
		color: #be8c45;
		font-weight: 600;
	}

	.image {
		width: 20%;
		height: 100rpx;
		float: left;
		margin-left: 20rpx;

	}
</style>