-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathviewer2.html
152 lines (148 loc) · 6.82 KB
/
viewer2.html
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>ShadowSkin</title>
</head>
<body onload="documentLoad()">
<link href="cube.css" rel="stylesheet">
<link href="viewer2.css" rel="stylesheet">
<!--script src="eruda.min.js"></script>
<script>eruda.init()</script-->
<script src="blocks3.js"></script>
<script src="hframe.js"></script>
<script src="mobs.js"></script>
<script src="rotateModel.js"></script>
<script src="pic.js"></script>
<script src="fastTemplate.js"></script>
<script src="effect.js"></script>
<script src="viewer2.js"></script>
<ftm-src id="uiinfo" ftm-args="showClothes viewingPart">\s \s</ftm-src>
<!--画画工具-->
<template ftm-el="draw-tool" ftm-args="tool name mode" ftm-bddata="^" ftm:class="icon"
ftm-oncreate="drawToolCreate(event)">
<div class="_img" ftm:style="background-color:%{js:data.selected==this?'#ffffffd0':'auto'}">
<div class="_triangle" ftm:style="display:%{js:data.mode===null?'none':'block'}">
<!--小三角-->
</div>
<img ftm:src="%{js:'pic/'+data.tool+(data.mode!==null?'_'+data.mode:'')+'.png'||''}"
ftm::onclick="this.ftmObs.parentNode.ftmData.selected=this.ftmObs;useTool('%{tool}')">
</div>
<div>%{name}</div>
</template>
<!--短按按钮-->
<template ftm-el="st-btn" ftm-args="icon name active" ftm-bddata="^" ftm:class="icon">
<img ftm:src="%{js:'pic/'+data.icon+'.png'||''}" ftm::onclick="%{active}">
<div>%{name}</div>
</template>
<!--身体部位选择-->
<template ftm-el="body-part" ftm-args="part clothes" ftm-bddata="^"
ftm:onclick="showBodyPart(this.parentNode.ftmData.selected,this);" ftm:button="%{part} %{clothes}">
<img ftm:src="pic/human_%{part}.png" sele="%{js:data.selected==this?true:false}">
</template>
<!--显示设置-->
<template ftm-el="view-opt" ftm-args="view value func color" ftm:onclick="%{func}()" ftm:id="%{view}">
<img ftm:src="pic/%{view}.png" ftm:style="background-color:%{color}">
</template>
<!--画笔块-->
<template ftm-el="pen-block" ftm-args="color nib size opacity" ftm-oncreate="loadPen(this)"
ftm:style="background:%{color};color:%{js:calcColor(data.color)};border-radius:%{js:data.nib=='rect'?'5px':'100cm'}"
ftm:onclick="usePen(this.ftmData)">
<span>%{js:data.nib[0].toUpperCase()}%{size}</span><br>
<span>%{opacity}</span>
</template>
<div>
<div id="pictureViewer" effect-handle ftm-src ftm-args="image">
<pre ftm-data></pre>
<div ftm:style="display:%{js:data.image?'none':'auto'}">
还没有上传参考图片喔，在 文件-添加参考 上传
</div>
<canvas></canvas>
</div>
<div id="colorbar">
<div id="template"></div>
<div id="history">
<pen-block>#000000 rect 1 100</pen-block>
</div>
</div>
<div id="headbar" effect-handle>
<st-btn>backward_arrow 返回 skinOpr('close')</st-btn>
<st-btn>save 保存 skinOpr('save')</st-btn>
<st-btn>copy 复制工程 skinOpr('copy')</st-btn>
<st-btn>download 导出皮肤 outputFile('skin')</st-btn>
<st-btn>output 导出工程 outputFile('project')</st-btn>
<st-btn>trash 删除 skinOpr('delete')</st-btn>
<st-btn>add_ref 添加参照 addReference()</st-btn>
</div>
<div id="head2">
<div id="skinName" contenteditable onkeypress="if(event.key=='Enter')this.blur()" onblur="rename(this);">
name</div>
<div id="undoandredo">
<img src="pic/backward_arrow.png" onclick="undo()">
<img src="pic/forward_arrow.png" onclick="redo()">
</div>
</div>
<div id="middle">
<div id="leftBar" ftm-src>
<body-part ftm-key="selected">whole whole</body-part>
<body-part>head hat</body-part>
<body-part>rightArm rightSleeve</body-part>
<body-part>body jacket</body-part>
<body-part>leftArm leftSleeve</body-part>
<body-part>rightLeg rightPants</body-part>
<body-part>leftLeg leftPants</body-part>
</div>
<div id="scene"></div>
<div id="palettePannel" effect-handle ftm-src ftm-oncreate="onPaletteLoad(this)"
oninput="paletteInput(event)">
color:#972dae
nib:rect
size:1
opacity:25
<div>Palette</div>
<input name="color" type="color" ftm:value="%{color}">
<select name="nib" ftm:value="%{nib}">
<option value="rect">矩形笔尖</option>
<option value="circle">圆形笔尖</option>
<option value="all">颜料漆桶</option>
</select>
<div>
笔头半径<br>
<input type="range" name="size" ftm:value="%{size}" min="1" max="5">
%{size}
</div>
<div>
不透明度<br>
<input name="opacity" type="range" ftm:value="%{opacity}">
%{js:data.opacity+"%"}
</div>
<button onclick="selectPen()">添加画笔</button>
</div>
<div id="rightBar">
<view-opt>arm alex changeArm pink</view-opt>
<view-opt>clothes false showClothes lightgrey</view-opt>
<view-opt>file true showFileOpr palegreen</view-opt>
<view-opt>show_ref false showReference lightgrey</view-opt>
<view-opt>palette false showPalette lightgrey</view-opt>
</div>
</div>
<div id="footbar" ftm-src>
<draw-tool ftm-key="selected">pen 画笔</draw-tool>
<draw-tool>eraser 橡皮擦</draw-tool>
<draw-tool>straw 吸色器</draw-tool>
<draw-tool>water 水渍</draw-tool>
<draw-tool>torch 柔光 dodge</draw-tool>
<draw-tool>highlight 曝光 lighter</draw-tool>
<draw-tool>blackwhite 混合黑白 white</draw-tool>
<draw-tool>saturation 饱和工具</draw-tool>
<draw-tool>change_color 换色器</draw-tool>
<draw-tool>flip 翻转面 vertical</draw-tool>
<draw-tool>copy 复制</draw-tool>
<draw-tool>paste 粘贴</draw-tool>
</div>
<input type="file" style="display: none;" id="upl_ref" onchange="uploadReference(this.files[0])">
</div>
</body>
</html>