IOS版伪春菜开发笔记1.2之图层的遮罩及黑色透明处理
在我们成功加载人格shell图片后，我们要处理的事情还很多，由于shell图层的黑色背景，我们并不能直接用它，还得进行一下处理，就是去掉黑色背景。由于IOS-swift没有现成的类库去掉shell的特殊黑色背景，我们只有另想办法进行遮罩处理。
css3有个方法名叫webkit-mask-image
而iOS又支持webkit，所以我们可以简化程序，用它直接套用进去就行了 在swift端代码如下：
2
3KiKKaBasicBove：
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.
}
}
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
<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回复。