在我们成功加载人格shell图片后，我们要处理的事情还很多，由于shell图层的黑色背景，我们并不能直接用它，还得进行一下处理，就是去掉黑色背景。由于IOS-swift没有现成的类库去掉shell的特殊黑色背景，我们只有另想办法进行遮罩处理。
css3有个方法名叫webkit-mask-image
<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端代码如下：
//
// 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：
<!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>效果如下：
9074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
