ShadowSkin/tutorial.html at master · Fancyflame/ShadowSkin · GitHub

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
<!DOCTYPE HTML>
<html>

<head>
    <!--meta name="theme-color" content=""-->
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <!--meta content="user-scalable=0;" name="viewport" /-->
    <title>ShadowSkin - Tutorial</title>
</head>

<body oonload="">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding-left: 5vw;
            padding-right: 5vw;
            /*background-color:#fefffe;*/
            background: white;
        }

        * {
            font-size: 100%;
            color: black;
        }

        blockquote {
            color: dimgrey;
            border-left: 0.4em solid dimgrey;
            padding: 0 0.4em;
            line-height: 3.2em;
        }

        blockquote::first-letter {
            font-size: 3.5em;
            color: #555;
        }

        mark {
            border-radius: 0.1em;
            background: yellowgreen;
            padding: 0.2em;
            font-weight: bold;
        }

        hint {
            padding-left: 1em;
            border-left: 0.4em solid goldenrod;
            background-color: #ff9;
            margin-top: 3em;
            display: block;
        }

        hint,
        hint * {
            color: #660;
        }

        h1,
        h2,
        h3 {
            text-align: left;
            padding-left: 5vw;
            font-size: 5em;
            text-shadow: -2px 1px 7px grey;
            border-left: 0.4em solid yellowgreen;
            /*border-left-image:*/
        }

        p,
        blockquote,
        hint,
        li {
            font-size: 2em;
            line-height: 250%;
            font-weight: lighter;
        }

        img {
            margin: 4em 0;
            display: block;
            width: 100%;
            box-shadow: 0 0 5em -2em dimgrey;
        }

        #penblock:hover {
            background-color: deepskyblue;
            color: #555;
        }

        table {
            font-size: 1.6em;
            box-shadow: 0 0 4em -2em dimgrey;
            border-collapse: collapse;
            color: green;
            table-layout: fixed;
            width: 100%;
        }
    </style>
    <h1>ShadowSkin须知</h1>
    <p style="color: orangered;">
        请不要使用软件内置浏览器绘制皮肤，而要使用专门的浏览器！因为使用软件内置浏览器可能会导致兼容性问题、数据丢失、无法导出文件等问题。<br>
        同时不要编辑ShadowSkin自带的Steve和Alex皮肤，否则网页刷新后将丢失数据。如要使用请复制工程后再使用。
    </p>
    <p>
        这是ShadowSkin2的新手教程。ShadowSkin2的界面简洁易懂，所以教程只包含不易懂的部分。<br>
        编辑器页面在后续版本里还会继续更新，那教程总不能
        更新一下换一次吧。那就凑合一下咯！
    </p>
    <h3>简短说一下</h3>
    <p>
        ShadowSkin是基于<strong>手机版</strong>的！pc端目前还没有做，不过PC端已经有Skin3d了，所以呢就用那个吧。如果你是ShadowSkin的忠实粉丝，那你也可以按F12打开
        开发者模式，左上角有手机版模拟器。再次声明，PC端是完全无法使用的！<br>
        ShadowSkin使用GPL3.0许可，您的一切行为需要遵守GPL3.0的协议。如果您仅使用，可以忽略它。如果您需要转载，请注明作者，并且<strong>保持开源</strong>。
        作者FancyFlame保留所有权利。所以还是不要魔改了吧。<br>
    </p>
    <h3>开始教程</h3>
    <p>
        右侧栏是显示用的。这边展示了三个隐藏的UI界面。（可能有点动画异常，后期会修复)
        <img src="tutorial_pic/show_ui.gif">
        手指往UI弹出的地方往回拖能收回面板，但是参照图的不行。
        <img src="tutorial_pic/fast_close.gif">
        手指往右下角拖能放大参照图。
        <img src="tutorial_pic/zoom.gif">
        点击参照图能取色。
        <img src="tutorial_pic/get_color.gif">
        手指滑动编辑面板的<strong>空白部位</strong>能拖动模型旋转查看。但不能平移和缩放。
        <img src="tutorial_pic/view_model.gif">
        右上角有三角形的是多模式工具。上划可切换模式。
        <img src="tutorial_pic/change_mode.gif">
        画笔上划可以将画笔储存为模板画笔（上面一行），下划长距离则是删除。如果在模板画笔里面上划，将会移动到第一位。
        <img src="tutorial_pic/set_pen.gif">
        看下面这张图
        <img src="tutorial_pic/pen_block.jpg">
        <ul>
            <li>R代表Rectangle，为矩形笔头。另外C是Circle，为圆形笔头</li>
            <li>1代表半径为1</li>
            <li>100代表不透明度是100</li>
            <li>背景色就是当前画笔颜色</li>
            <li>圆角矩形也代表这是矩形笔头，圆形就代表圆形笔头</li>
        </ul>
    </p>

    <p>
        那么，教程到这里就结束了。如果还有不懂<br>
        那我也没办法了QAQ
    </p>
</body>

</html>