关于网页版伪春菜橘花shell的加载方法研究
橘花shell的同一表情的PNG分为两部分,一是黑色背景彩色shell图案的PNG文件,一是黑色背景白色shell蒙版的PNA文件(改了扩展名的PNG文件)。当ssp加载shell时,会自动的用PNA给PNG的彩色shell添加遮罩,原理是用PNA的白色蒙版保留PNG的彩色内容,PNA的黑色部分则以透明方式给PNG的黑色部分裁剪出来不予显示,大家来看看示例
用PHOTOSHOP打开PNA和PNG,复制PNA图层到PNG图层上,并按ctrl+j复制PNG图层
在PNA的图层面板的通道选项中按ctrl点选红色通道,出现选区,右键选择反选
切换到PNG的图层会看到选区内容会将整个黑色背景选中。此时按Del键,黑色背景就去掉了。
如图:
以上试验表明,能否通过一个方法,比如JS脚本,使其在不改变原shell内容的基础上,实现shell的透明轮廓及半透明阴影的加载?
答案是肯定的,我这里的思路就是先将PNA的黑色背景用JS或html5+canvas抠掉,再用-webkit-mask-image将抠掉背景的内容添加mask蒙版给PNG遮罩。
下面给出了人物鼠标拖动和-webkit-mask-image遮罩的代码,关于抠图算法还在研究中。
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>触摸屏拖动图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT language=JavaScript>
function init() {
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
var mypic = document.getElementById("mypic");
mypic['draging'] = false;
mypic.addEventListener('touchstart', dragStart, false);
mypic.addEventListener('touchmove', dragMove, false);
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(dragObj.style.left)
clicktop = window.event.y - parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move = 1
}
}
function mouseStop() {
window.event.returnValue = false
}
function mouseMove() {
if (move) {
dragObj.style.left = window.event.x - clickleft
dragObj.style.top = window.event.y - clicktop
}
}
function mouseUp() {
move = 0
}
function info(text) {
document.getElementById("info").innerText = "调试信息:"+text;
}
function dragStart(e) {
var e = e || window.event;
var mypic = document.getElementById("mypic");
mypic['ori_x'] = e.targetTouches[0].clientX;
mypic['ori_y'] = e.targetTouches[0].clientY;
mypic['ori_left'] = parseInt(mypic.style.left);
mypic['ori_top'] = parseInt(mypic.style.top);
info("touch start");
}
function dragMove(e){
e.preventDefault(); //避免默认的事件处理
var e = e || window.event; //获取真实的事件变量
var myElement = e.srcElement || e.target; //获取事件的源DOM
var mypic = document.getElementById("mypic");
mypic['draging'] = true;
myElement.ontouchend= function(){
mypic['draging'] = false;
info("touch end");
}
document.ontouchmove= function(eMove){
var eMove = eMove || window.event;
info("touch move");
if(mypic['draging'] == true){
myElement.style.left = eMove.targetTouches[0].clientX - mypic['ori_x'] + mypic['ori_left'] + "px";
myElement.style.top = eMove.targetTouches[0].clientY - mypic['ori_y'] + mypic['ori_top'] + "px";
return false;
}
}
}
</SCRIPT>
</head>
<body onload="init()">
<h1 id="info"></h1>
<div id="mypic" onMouseOut="drag=0" onMouseOver="dragObj=mypic; drag=1;" style="height: 60; left: 200; position: absolute; top: 200; width: 120">
<link href="" style="text/css" rel="stylesheet"/>
<dd> <meta charset="utf-8">
<title> mask遮罩蒙版 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
img{-webkit-mask-image:url('skin/Taromati/miku(初音)/surface0000 - 副本1.png');"Obj=shell"}
</style><img alt border="0"style="left:80px;top:80px;position:absolute" src="skin/Taromati/miku(初音)/surface0000.png"></dd></div>
</body>
</html>
有个疑问,既然用js把PNA的黑色背景抠掉,那么直接按pna把png的透明部分抠掉就是了。没必要再用-webkit-mask-image吧。
PygmalionV 于2017-07-01 6:19 上午 评论@PygmalionV 这是个好问题啊,你有没有发现橘花shell周围及脚下的阴影?这个阴影其实是pna给出的,如果直接抠png的话,人物就没有脚下的影子了,而且周围也显得不那么光滑
fancyang 于2017-07-04 12:33 下午 评论