IOS版伪春菜开发笔记1.2之图层的遮罩及黑色透明处理

3个月前 (07-22) fancyang IOS相关开发 0评论 已收录 126℃

在我们成功加载人格shell图片后,我们要处理的事情还很多,由于shell图层的黑色背景,我们并不能直接用它,还得进行一下处理,就是去掉黑色背景。由于IOS-swift没有现成的类库去掉shell的特殊黑色背景,我们只有另想办法进行遮罩处理。

css3有个方法名叫webkit-mask-image



1
2
3
<style type="text/css">
 img{-webkit-mask-image:url('skin/Taromati/miku(初音)/surface0000 - copy.png');"Obj=shell"}
  </style><img  alt border="0"style="left:80px;top:80px;position:absolute"   src="skin/Taromati/miku/surface0000.png">
iOS又支持webkit,所以我们可以简化程序,用它直接套用进去就行了 在swift端代码如下:
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
//
// ViewController.swift
// Taromati
//
// Created by fancyang on 2017/7/22.
// Copyright © 2017年 fancyang. All rights reserved.
//

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler{
 
  var theWebView:WKWebView?
 
  override func viewDidLoad() {
  super.viewDidLoad()
 
  let path = Bundle.main.path(forResource: "taromati/KiKKaBasicBove", ofType: ".html",
  inDirectory: "HTML5")
  let url = URL(fileURLWithPath:path!)
  let request = URLRequest(url:url)
 
  //创建供js调用的接口
  let theConfiguration = WKWebViewConfiguration()
  theConfiguration.userContentController.add(self, name: "interOp")
 
  //将浏览器视图全屏(在内容区域全屏,不占用顶端时间条)
  let frame = CGRect(x:0, y:20, width:UIScreen.main.bounds.width,
  height:UIScreen.main.bounds.height)
  theWebView = WKWebView(frame:frame, configuration: theConfiguration)
  //禁用页面在最顶端时下拉拖动效果
  theWebView!.scrollView.bounces = false
  //加载页面
  theWebView!.load(request)
  self.view.addSubview(theWebView!)
  }
 
 
 
  //响应处理js那边的调用
  func userContentController(_ userContentController:WKUserContentController,
  didReceive message: WKScriptMessage) {
  print(message.body)
  }

 
 
 
  override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
  // Dispose of any resources that can be recreated.
  }


}
KiKKaBasicBove:

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
<!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);
   
   
   
   
   
   
   //获取元素
   var picture=document.getElementById("mypic");
   //添加触屏开始事件
   picture.addEventListener("touchstart",function(e){
                            var p,f1,f2;
                            //由于触屏的坐标是个数组,所以取出这个数组的第一个元素
                            e=e.touches[0];
                            //保存picture和开始触屏时的坐标差
                            p={
                            x:picture.offsetLeft-e.clientX,
                            y:picture.offsetTop-e.clientY
                            };
                            //添加触屏移动事件
                            document.addEventListener("touchmove",f2=function(e){
                                                      //获取保触屏坐标的对象
                                                      var t=t=e.touches[0];
                                                      //把picture移动到初始计算的位置加上当前触屏位置
                                                      picture.style.left=p.x+t.clientX+"px";
                                                      picture.style.top=p.y+t.clientY+"px";
                                                      //阻止默认事件
                                                      e.preventDefault();
                                                      },false);
                            //添加触屏结束事件
                            document.addEventListener("touchend",f1=function(e){
                                                      //移除在document上添加的两个事件
                                                      document.removeEventListener("touchend",f1);
                                                      document.removeEventListener("touchmove",f2);
                                                      },false);
                            },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;
}
 

</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 - copy.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>
效果如下:




                                       
                      
博主

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

相关推荐

嗨、骚年、快来消灭0回复。

016404;您的ip地址是54.161.73.123; 当前围观人数:2

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