2019-01-22 21:03:19 weixin_42116703 阅读数 319

如何 添加图片
第一添加图集
在这里插入图片描述
制作图集:

  1. 在这里插入图片描述
  2. 在这里插入图片描述
  3. 选择需要的图片
  4. 点击Create即可形成图集
    第二在 sprite中选择

ps 如果要换图集的图片用精灵的名字来换
在这里插入图片描述

图片的几种形式
在这里插入图片描述
第一 simple 没啥说的
第二 Sliced裁剪模式 主要图片放大后 周围的花纹可能会失帧 所以就显示纯色部分
可以自己选择放大的部分
放大的部分为中间
在这里插入图片描述
在这里插入图片描述

第三 tiled 填充
第四 Filled 可以做技能条的
第五 高级
在这里插入图片描述

在这里插入图片描述

锚点两种
第一在NGUI 创建 把UI托到子物体 就行了 不方便找 打开这个
在这里插入图片描述
在这里插入图片描述
名字最好改下
在这里插入图片描述
注意 锚点和锚点不要形成父子关系

第二 还有
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2013-05-04 21:29:47 iteye_20251 阅读数 214

在游戏开发过程中,会碰到游戏界面中的GUI控件太多,超出了屏幕的显示范围,此时就需要使用Scroll View控件来完成它的展示效果。

Scroll View控件可以设定一个滚动显示区域。如果水平或垂直的GUI控件超出其显示区域,视图下方或者右方将会出现滚动条。在开发中使用Scroll View控件的情况非常普遍,比如游戏中帮助信息或关于信息过长,就可以使用滚动条来查看相关信息。

 

下面说明Scroll View

控件的用法,代码如下:

  #pragma strict
  
  //定义存储滚动条的位置变量
  var scrollPosition:Vector2;
  
  function Start () {
  	//初始化滚动条位置
  	scrollPosition[0] = 50;
  	scrollPosition[1] = 50;
  }
  
  function OnGUI () {
  	//开始滚动视图
  	scrollPosition = GUI.BeginScrollView(Rect(0,0,200,200),scrollPosition,Rect(0,0,Screen.width,300),true,true);
  	
  	GUI.Label(Rect(100,40,Screen.width,30),"测试滚动视图内容测试滚动视图内容测试滚动视图内容测试滚动视图内容测试滚动视图内容测试滚动视图内容");
  	
  	//结束滚动视图
  	GUI.EndScrollView();
  }

 

 

上述代码中,Start()方法用于设置默认情况下滚动条的位置,数组scrollPosition[0]表示滚动视图水平滚动滑块位置,数组scrollPosition[1]表示滚动视图垂直滚动滑块位置。将这两个数组全部存储在Vector2中,拖动滚动条后,在程序内存中会动态修改两个滚动条的位置。GUI.BeginScrollView()方法用于开始滚动视图,该方法的第一个参数用于设置滚动显示视图的位置,第二个参数用于设置滚动条的起始位置,第三个用于设置滚动整理显示范围(注意:滚动视图的显示范围必须小于游戏视图整体范围),第四个参数与第五个参数为true时,表示内容超过滚动显示范围后显示滚动条,否则不显示滚动条。

注意:GUI.BeginScrollView()方法与GUI.EndScrollView()方法必须成对出现,否则程序会抛出异常。

运行程序后看到的结果如下图所示:

 

<!--EndFragment-->

 

 

<!--EndFragment-->
2018-12-28 17:23:36 weixin_39228870 阅读数 458

点击图片查看大图,让大图居中显示
需求:因为图片大小不一,有的图片比较长,一般的居中方法会使大图被截掉

html部分

<div class="isImg">
	<img src="https://avatar.csdn.net/5/F/2/3_weixin_39228870.jpg"/>
</div>
<div class="bg hide"></div>
<div class="bigPhoto">
	<img alt="" src="">
</div>

css部分

.isImg { width:100px;height:100px;}
.isImg img { width:100%; }
.bg { width:100%;height:100%;background-color: rgba(0,0,0,0.3);position: fixed;top:0;left:0;}
.bigPhoto { width:100%;position: fixed;left:0;z-index:1001;}
.bigPhoto img { width:100%;}

js部分

// 点击缩略图查看大图
$(".isImg").click(function(){
	var img = $(this).find("img").attr("src");
	$(".bg").show();
	$(".bigPhoto img").attr("src",img);
	// 如果大图高于手机高度,则bigPhoto的css要改动
	$(".bigPhoto").css({"display":"block","z-index":"99"});
    var winHeight = $(window).height();
    var imgHeight = $(".bigPhoto img").height();
    if(imgHeight > winHeight){
	   $(".bigPhoto").css({"height":"100%","top":"0","overflow":"scroll","transform":"none"});
	   $(".bigPhoto img").css({"margin":"auto"});
	}else{
	   $(".bigPhoto").css({"height":"auto","top":"50%","overflow":"auto","transform":"translateY(-50%)"});
	   $(".bigPhoto img").css({"margin":"0"});
	 }
});
$(".bg,.bigPhoto").click(function(){
	$(".bg").css({"siaplay":"none","z-index":"0"});
	$(".bigPhoto").hide();
});
2017-08-29 16:52:57 Catherine981234 阅读数 586

//  UISlider实例

//

//  Created by Catherine on 2017/8/29.

//  Copyright © 2017 Catherine. All rights reserved.

//


import UIKit


class ViewController: UIViewController {

    let imageview:UIImageView = UIImageView(frame: CGRect(x: 30, y: 50, width: 320, height: 400))

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

        let slider:UISlider = UISlider(frame: CGRect(x: 70, y: self.view.frame.size.height - 60, width: 280, height: 20))

        slider.addTarget(self, action: #selector(slider(slider:)), for: UIControlEvents.valueChanged)

        imageview.image = UIImage(named: "pig1.png")

        slider.maximumValue = 100

        slider.minimumValue = 0

        self.view.addSubview(slider)


        self.view.addSubview(imageview)

        

    }

    //通过slider调整大小

    func slider(slider:UISlider){

        let value:float_t = 1-slider.value/100

        //修改bounds是以中间为基准缩小的   如果不改变x,y值那么frame是以左上角

        imageview.bounds = CGRect(x: 0, y: 0, width: 320*(CGFloat)(value), height: 400*(CGFloat)(value))

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }



}

2013-12-10 09:58:43 u011714480 阅读数 407
这篇文章主要是对javascript放大镜效果的简单实现进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

这个效果并不难,要点是位置和比例设置,

捕获鼠标位置、判断鼠标位置区域、还有onmouseover事件、onmousemove事件、onmouseout事件

设置显示大图的比例,小图上显示的切图比例都要弄准确点,最好是2倍啦,4倍啦。

主要注意宽度,我这里的图片m.jpg是1440X900的....
 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>放大镜效果</title>
<style type="text/css">
*{margin:0;padding:0;}
#smallimg{width:360px;float:left;position:relative;border:1px solid red;}
#smallimg img{ width:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{width:100px;height:100px;background:#fff;cursor:move; position:absolute;border:1px solid #666;opacity:0.5;filter:alpha(opacity=50);display:none;}
</style>
</head>
<body>
<div id="smallimg">
 <img src="jq/m.jpg" alt=""/>
 <div id="showimg"> </div>
</div>
<div id="bigimg"> </div>


<script type="text/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//滤镜图片
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = function(){
 showimg.style.display = "block";
 bigimg.style.display = "inline";
 show_half = showimg.offsetHeight/2;
 maxWidth = smallimg.clientWidth - showimg.offsetWidth;

 maxHeight = smallimg.clientHeight - showimg.offsetHeight;

//unity3d http://www.unitymanual.com/

 //上面两个变量指明showimg允许活动的区域
};
smallimg.onmousemove = function(e){
 var e=window.event?window.event:e;
 var num=bigimg.clientWidth/showimg.clientWidth;
 var Top = e.clientY - smallimg.offsetTop - show_half;
 var Left = e.clientX - smallimg.offsetLeft - show_half;
 //获取当前移动的showimg位置 计算方法是 鼠标坐标 - 最外面容器的坐标 - 盒子的宽(高)的/2
 Top = Top<0?0:Top>maxHeight?maxHeight:Top;
 Left = Left<0?0:Left>maxWidth?maxWidth:Left;
 showimg.style.top = Top + "px";
 showimg.style.left = Left + "px";
 bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
smallimg.onmouseout = function(){
 showimg.style.display="none";
 bigimg.style.background ="";
 bigimg.style.display="none"
};
</script>
</body>
</html>
没有更多推荐了,返回首页