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,如需转载请自行联系原作者

相关文章
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
1600 0
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
swiper轮播图缩略图效果彩色到黑白的变化的解决方案
swiper轮播图缩略图效果彩色到黑白的变化的解决方案
95 0
|
前端开发 Android开发
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
UGUI系列-点击图片生成物体(Unity3D)
今天给大家分享一个如何点击图片生成物体的脚本,可以把这个脚本稍微封装一下,以后也可以方便使用。 主要试用与点击图片时候响应事件,具体用法还要大家多多摸索
|
C# 小程序
给图片加上阴影效果
原文:给图片加上阴影效果 今天写一个小程序有一个给图片加上阴影的需求,记得WPF的Effect中就有阴影特效,就打算用它了。代码如下:     using (var imageStreamSource = File.
1221 0
|
Windows
利用Adorner制作用于图像裁切的选择框
原文:利用Adorner制作用于图像裁切的选择框 前天,我写了一篇“使用Adorner显示WPF控件的边界点”的文章。这次,使用从Adorner继承来写一个用于图像裁切的选择框。
781 0
|
C#
【C#/WPF】图片的切割/切图/裁剪图片
原文:【C#/WPF】图片的切割/切图/裁剪图片 前台准备两个Image控件。上面是显示原图,下面显示切割后的效果。 对应的后台代码: public par...
2190 0
uwp 图片切换动画 使用帧动画
原文:uwp 图片切换动画 使用帧动画 上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个Button和Image 在Page里定义资源 ...
943 0