mark.wxml
3.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<cover-view class="currentItem">{{currentItem+1}}/{{markImg.length}}</cover-view>
<view class="container" style="width:100%;height:{{H+'px'}};">
<view class="container-in" style="width:{{canvasW+'px'}};height:{{canvasH+'px'}};background:{{bgColor}};">
<!--涂鸦画布-->
<view wx:if="{{showHandwriting}}" class="move-canvas ">
<canvas canvas-id="handwriting" style="width:100%;height:100%;" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
</canvas>
</view>
<!-- 默认结果展示区 -->
<view class="canvas-result">
<!-- 底图 -->
<image src="{{imgSrc}}" style="width:100%;height:100%;display:block;" mode="aspectFit"></image>
<!-- 图片展示区域 -->
<view class="action-result" style="width:100%;height:100%;" >
<block wx:for="{{operateArray}}" wx:key="{{item.content}}">
<!-- 文字 -->
<view class="word-wrap" wx:if="{{item.itemType=='text'}}" style="width:{{item.style.width+'px'}};position:absolute;left:{{item.style.left+'px'}};top:{{item.style.top+'px'}};color:{{item.style.color}};font-size:{{item.style.fontSize+'px'}};line-height:{{item.style.lineHeight+'px'}};text-align:center;z-index:6;">{{item.content}}</view>
<!-- 图片 -->
<view wx:if="{{item.itemType=='image'}}" style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:5;">
<image src="{{item.src}}" style="width:100%;height:100%;display:block;"></image>
</view>
</block>
</view>
</view>
<!-- 文本 -->
<view class="text-model" wx:if="{{!txtFinish}}">
<!-- 拖动区 -->
<view wx:for="{{interimArray}}" wx:key="{{item.content}}" class="text-area-move" wx:if='{{item.itemType=="text"}}' style="width:{{item.style.width+'px'}};left:{{item.style.left+'px'}};top:{{item.style.top+'px'}};">
<view class="textarea word-wrap" bindtouchstart="_textareaTouchStart" bindtouchmove="_textareaTouchMove" data-index="{{index}}" style="width:{{item.style.width+'px'}};color:{{item.style.color}};">
<input bindinput="inputValue" placeholder="请输入文字" placeholder-style="color: red;" value="{{item.content}}" data-index='{{index}}'></input>
</view>
<view bindtap="_deletTxt" data-index="{{index}}" class="delete-txt">×</view>
</view>
</view>
</view>
</view>
<view class="mark_container">
<view class="action_box">
<view class="icon_back last" bindtap="loadImg" data-type='prev'>
<image src="/image/prev.png" mode="widthFix"></image>
</view>
<view class="icon" bindtap="_lastCanvas">
<view class=" icon-back" ></view>
</view>
<view class="icon {{showHandwriting?'choose':''}}" bindtap="_penSelect">
<view class=" icon-pen" ></view>
</view>
<!-- <view class="icon {{addTxt?'choose':''}}" bindtap="_addText">
<view class=" icon-text" ></view>
</view> -->
<view class="icon" bindtap="clearDraw">
<image class="del_icon" src="/image/del.png"></image>
</view>
<view class="icon " bindtap="saveWork">
<view class=" icon-save" ></view>
</view>
<view class=" icon_back last" bindtap="loadImg" data-type='next'>
<image src="/image/next.png" mode="widthFix"></image>
</view>
</view>
</view>
<!-- 最终生成画布 -->
<view class="base-img-bg">
<canvas class="base-img" canvas-id="baseImg" style="width:{{canvasW*2+'px'}};height:{{canvasH*2+'px'}};background:{{bgColor}};" disable-scroll="true"></canvas>
</view>