fenggu/pages/canvasposter/canvasposter.wxml

<!--index.wxml-->
<view class='contentWarp'>
	<block wx:for="{{itemList}}" wx:key="id">
		<view class='touchWrap'
			style='transform: scale({{item.scale}});top:{{item.top}}px;left:{{item.left}}px; z-index:{{item.active?100:1}}'>
			<view class='imgWrap {{item.active? "touchActive":""}}'
				style="transform: rotate({{item.angle}}deg); border: {{item.active?4*item.oScale:0}}rpx #fff dashed;">
				<image src='{{item.image}}' data-id='{{item.id}}'
					style='width:{{item.width}}px;height:{{item.height}}px;' bindtouchstart='WraptouchStart'
					bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd' mode="widthFix"></image>
				<image class='x' src='../../img/close-icon.png'
					style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}'
					bindtap='deleteItem'></image>
				<image class='o' src='../../img/zoom-icon.png'
					style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}'
					bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
			</view>
		</view> 
	</block>
</view>
<!-- 保存显示效果图 -->
<view class='canvasWrap' hidden="{{!showCanvas}}">
	<!-- <image class="resImg" src="{{canvasTemImg}}" mode="widthFix"></image> -->
	<image class="resImg" src="{{canvasTemImg}}" mode="aspectFill"></image>
	<view class='btn_view'>
		<button bindtap='saveImg'>保存到手机</button>
		<button bindtap='shareImg' data-index="0">分享</button>
		<button bindtap='shareImg' data-index="1">参加活动</button>
		<!-- <button bindtap='disappearCanvas'>关闭</button> -->
	</view>
	<image bindtap='disappearCanvas' class="close-effect" src="../../img/close-icon.png"></image>
</view>
<!-- 输入框 -->
<!-- <view wx:if="{{showTitle}}" class="content-box">
	<view class="input-box">
		<text>请为作品添加标题</text>
		<input type="text" value="{{titleVal}}" bind:input="titleInput" placeholder="请收入作品标题" />
		<view bindtap='submit'>确定</view>
	</view>
</view> -->
<!-- 画布 -->
<canvas class='maskCanvas' canvas-id="maskCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;'></canvas>
<!-- 创建作品按钮 -->
<view wx:if="{{funBox}}" bindtap="creatWorks" class="creat-works-btn">创建作品</view>
<!-- 右下角操作按钮 -->
<view wx:if="{{funBox}}" class="operation-buttons">
	<!-- <view><navigator url="/pagesA/pages/works/works" hover-class="none">作品</navigator></view> -->
	<view class="new-box"><navigator url="/pagesA/pages/rule/rule" hover-class="none" class="quan"><text>活动</text><text>规则</text></navigator></view>
	<!-- <view style="background-color: #33d301;" bindtap='homeShare'>
		<image src="../../img/share-icon.png"></image>
	</view> -->
	<view class="new-box" bindtap="openMask">
		<!-- <image src="../../img/download-icon.png"></image> -->
		<view class="quan" bindtap='openMask'><text>参加</text><text>活动</text></view>
	</view>
	<view class="new-box">
		<view class="quan" hidden="{{playAudio}}" bindtap="closeAudio" ><text>关闭</text><text>音乐</text></view>
		<view class="quan" hidden="{{!playAudio}}" bindtap="playAudio"><text>开启</text><text>音乐</text></view>
	</view>
</view>
<!-- 我的作品 -->
<view wx:if="{{worksBox}}" class="works-box {{worksImg?'works-boxAc':''}}">
	<view bindtap="closeWorks" class="close-works-btn">收起创作</view>
	<view class="works-content">
		<view>
			<scroll-view scroll-x="true">
				<view class="scrollView title-box">
					<view wx:for="{{titlelist}}" class="{{titleIndex==index?'titleActive':''}}" data-index="{{index}}" data-id="{{item.id}}" bindtap="chooseTitle" wx:key="index">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view hidden="{{!worksImg}}">
			<swiper current="{{currentIndex}}" wx:if="{{haveData}}" bindchange="changeCurrent">
				<block wx:for="{{allList}}" wx:key="index">
					<swiper-item class="scrollView img-box">
						<view>
							<image class="{{allIndex==index?'allActive':''}}" data-index="{{index}}" bindtap="chooseImg" mode="widthFix" src="{{item.img_thumb}}" lazy-load></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view wx:else class="scrollView"><view class="nothing">无内容</view></view>
			<view wx:if="{{haveData}}" class="pre-next-box">
				<image src="../../img/next-icon.png" bindtap="preEv" class="arrowBtn pre" style="transform: rotate(180deg);"></image>
				<image bindtap="nextEv" src="../../img/next-icon.png" class="arrowBtn next"></image>
			</view>
			<!-- <scroll-view scroll-x="true">
				<view wx:if="{{haveData}}" class="scrollView img-box">
					<view wx:for="{{allList}}" data-index="{{index}}" bindtap="chooseImg" wx:key="index"><image class="{{allIndex==index?'allActive':''}}" mode="widthFix" src="{{item.img}}" lazy-load></image></view>
				</view>
				<view wx:else class="scrollView img-box"><view style="width: 100%;color: rgba(255,255,255,.5);display: flex;justify-content: center;">无内容</view></view>
			</scroll-view>
			<view style="position: fixed;z-index: 0;bottom: 305rpx;left: 0;right: 0;display: flex;justify-content: space-between;">
				<image src="../../img/next-icon.png" class="arrowBtn pre" style="transform: rotate(180deg);"></image>
				<image bindtap="nextEv" src="../../img/next-icon.png" class="arrowBtn next"></image>
			</view> -->
		</view>
	</view>
</view>
<!-- 活动规则 -->
<!-- <view style="position: fixed;background-color: rgba(0,0,0,.6);z-index: 102;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;padding: 20rpx;80rpx">
	<view style="background-color: rgba(255,255,255,1);border-radius: 20rpx;padding: 20rpx;width: 100%;font-size: 24rpx;">
		<view style="font-size: 28rpx;">活动规则：</view>
		<view></view>
	</view>
</view> -->
<!-- 登录授权弹框 -->
<view wx:if="{{isLogin}}" class="{{isAnimation==2?'card-box-userinfo':''}} auth-box">
	<view class="{{isAnimation==1?'card-box-userinfo':''}}">
		<view class="auth-top">
			<image src="../../img/robot.png" mode=""></image>
			<view class="auth-top-content">
				<view>提示：</view>
				<view>您当前是游客身份</view>
				<view>请授权登录后再进行保存、分享操作</view>
			</view>
		</view>
		<view class="auth-center">申请 获取你的昵称、头像、地区及性别</view>
		<view class="auth-bottom">
			<view bindtap="chooseBtn" data-index="0" class="{{isNo?'isNyin':'noyin'}} btn btn-no">暂不授权</view>
			<view bindtap="chooseBtn" data-index="1" class="{{isOk?'isOyin':'noyin'}} btn btn-yes">
				<text>立即授权</text>
				<button open-type="getUserInfo" bindtap="shouq" class="auth-btn">立即授权</button>
			</view>
		</view>
	</view>
</view>
<!-- 游戏规则 -->
<view hidden="{{guiz}}" class="guiz">
	<!-- <view class="guiz-box">
		<view style="font-size: 28rpx;font-weight: bold;color: #000;">DIY“丰谷酒王”游戏规则：</view>
		<view class="textIndent2">您可以为亲人、朋友、爱人专属定制的换装小游戏，点击背景、人物、文字和装饰，将这些素材拖动到“丰谷酒王”瓶身上随意DIY，换装完成后，点击下载，即可自动生成专属的“丰谷酒王”海报图。让您在元旦佳节给朋友送上最浓烈的专属祝福，使你们的有情更有情。</view>
		<view class="textIndent2">活动期间（2022年1月1日-3日），参与此游戏并下载生成专属“丰谷酒王”图，你的DIY图片将会自动参与到作品投票环节，获得票数最多的前十名用户，会获得丰谷好礼。</view>
		<view class="textIndent2">第一名“丰谷壹号”1瓶（价值968元）</view>
		<view class="textIndent2">第二名“丰谷酒王”2瓶（价值876）</view>
		<view class="textIndent2">第三名“丰谷酒王”1瓶（价值438元）</view>
		<view class="textIndent2">第四至六“丰谷墨渊”1件6瓶（价值350元）</view>
		<view class="textIndent2">第七至十“丰谷墨渊”2瓶（价值116元）</view>
		<view style="font-size: 28rpx;font-weight: bold;color: #000;">投票规则</view>
		<view>1. 进行3轮线上网友投票,每次在所有参赛作品中选出前20张DIY作品入围决赛，并进行线下展出;</view>
		<view>2. 每个ID限制投票1次;</view>
		<view>3. 每个微信帐号只能投稿一次，同一作者用不同帐号多次投稿，取最高获票名次;</view>
		<view>4. 每次投票时间为期3天，逾期将不可投票;</view>
		<view>5. 最终解释权归鑫焱探索科技有限公司所有;</view>
		<view>6.整个投票截止时间为2022年1月3日23点59分结束。</view>
		<view bindtap="closeTank" class="close-btn">X</view>
	</view> -->
	<image src="{{gamesImg}}" style="width: 100%;height: 100%;"></image>
	<button style="background-color: #2a7be9;color: #fff;font-size: 28rpx;position: absolute;bottom: 80rpx;" bindtap="closeTank">关闭</button>
</view>