UGUI精灵图片实现图片裁剪

简介:

NGUI中精灵图片可以经过剪切将图片剔除没用的部分,然后图片拉伸时就会避免图片边缘被拉伸的问题。

如图,剪切前 

wKioL1ngkHThUIPsAADPLGez2E4138.png-wh_50

可以看出随着button图片的拉伸,该图片边缘白色部分越来越大,而我们是不想看到的。利用剪切处理之后。如图 剪切后

wKiom1ngkyqBkxRRAACoTlAfHs8603.png-wh_50

接下来 我们看一下具体实现方法

首先在工程面板选中图片,之后在检视面板将其类型(Texture Type)改为sprite(2D and UI).

然后选中Sprite Mode (里面有三种类型,分别是Single单一(无法裁剪),Multipe多种(可以裁剪),Polygon多边形(可以裁剪,前两种都是四边形)),设置为Multipe。里面参数不用改变。如图

wKioL1ngkHSjXTWEAAA0rJ-GDc4807.png-wh_50

直接点击Sprite Editor,然后点击Apply应用.

进入精灵编辑窗口  如图

wKiom1ngkyuxxFd4AAC29xYWJX4333.png-wh_50

点击Slice菜单栏 直接点击slice

wKiom1ngkyvhqc2yAAAo4HNT80c233.png-wh_50

然后 通过鼠标拖拽图片边缘蓝色线对图片进行裁剪

如图

wKioL1ngkHXyV3K0AAA8yJBKmfM847.png-wh_50

 

然后直接点击上方Apply 。 这样UI按钮里面的精灵图片就变成我们最终裁剪的形状

wKioL1ngkHWDxnyAAAFQgcCd7Lk779.png-wh_50

如果需要调节参数(直接通过数值约束图片大小),那么直接调节即可



本文转自 宁金峰 51CTO博客,原文链接:http://blog.51cto.com/13243523/1972186,如需转载请自行联系原作者

相关文章
|
C# 定位技术 API
WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现
原文: WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现         去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用。
1689 0
|
前端开发 Android开发 数据格式
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
|
前端开发 Android开发
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
|
前端开发 Android开发
圆形图片的制作
近期又在啃《Android开发艺术探索》这本书,最近看到了第六章节—Android中的Drawable。我写博客的风格不喜欢一味的介绍理论知识,更喜欢从实战的角度去学习,在敲代码的过程中去补充理论知识,根据实际情况做出分析,最后实现想要的效果。
1356 0
3D立方体图片切换动画
在线演示 本地下载
1024 1
|
JavaScript 前端开发 .NET
|
索引
Unity3dUGUI图片循环轮播效果
测试.gif 参数 using UnityEngine.UI; using UnityEngine.EventSystems; using System; using UnityEngine; /// /// 图片轮播组件 ...
4086 0
|
Web App开发 JavaScript 前端开发
实用图片滑块,传送带,幻灯片效果【附源码】
  图片是网站功能的重要组成部分,这里集合了10个图片滑块,传送带,幻灯片效果,相信你在项目中肯定会用到。这些分享的效果大部分都是实用 jQuery 实现的,使用起来很简单。看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西。
1991 0

热门文章

最新文章