关于网页版伪春菜橘花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>

                                       
                      
博主

这货来去如风,什么鬼都没留下!!!

相关推荐

2 条评论

  1. avatar
    -49#

    有个疑问,既然用js把PNA的黑色背景抠掉,那么直接按pna把png的透明部分抠掉就是了。没必要再用-webkit-mask-image吧。

    PygmalionV 于2017-07-01 6:19 上午 评论 回复
    • avatar

      @PygmalionV 这是个好问题啊,你有没有发现橘花shell周围及脚下的阴影?这个阴影其实是pna给出的,如果直接抠png的话,人物就没有脚下的影子了,而且周围也显得不那么光滑

      fancyang 于2017-07-04 12:33 下午 评论 回复

023837;您的ip地址是54.145.16.43; 当前围观人数:1

橘花2支持在线更新了,点我下更新支持文档然后托给橘花,再点SSP面板右键更新