图片切割

原理:计算指定范围外的像素,然后把像素点的alpha设置为0 (每个像素点都有 RGBA 四个属性值),复杂的是计算出哪些点需要被裁剪(复杂图形裁剪)
如图:

左下角为UV原点,最大值为右上角(1,1)点(所以长方形切割的计算会复杂一点),当纹理uv在 1 区域的时候,也就是满足uv.x < r && uv.y < r,r值为切割的中心点。

例如正方形图片切割成菱形:0.5为上面的r,可自定义

fixed4 frag (v2f i) : COLOR
                {
                    float2 uv = i.texcoord.xy;
                    float4 c = i.color;
                    float ratio = _Hide / _Wide;

                    // 左下四方块
                    if(uv.x < 0.5 && uv.y < 0.5)
                    {
                        float y = -ratio * uv.x + 0.5 - _Hide + ratio * 0.5;
                        if(uv.y < y)
                        {
                            c.a = 0;
                        }
                    }
                    // 左上四方块
                    else if(uv.x < 0.5 && uv.y > 0.5)
                    {
                        float y = ratio * uv.x + 0.5 + _Hide - ratio * 0.5;
                        if(uv.y > y)
                        {
                            c.a = 0;
                        }
                    }
                    // 右下四方块
                    else if(uv.x > 0.5 && uv.y < 0.5)
                    {
                        float y = ratio * uv.x + 0.5 - _Hide - ratio * 0.5;
                        if(uv.y < y)
                        {
                            c.a = 0;
                        }
                    }
                    // 右上四方块
                    else if(uv.x > 0.5 && uv.y > 0.5)
                    {
                        float y = -ratio * uv.x + 0.5 + _Hide + ratio * 0.5;
                        if(uv.y > y)
                        {
                            c.a = 0;
                        }
                    }                                                          

                    fixed4 col = tex2D(_MainTex, i.texcoord) * c;
                    clip (col.a - 0.01);
                    return col;
                }

2.长方形或正方形切割成圆形:需要提供切割图片的长和宽,计算一个长宽高

fixed4 frag (v2f i) : COLOR
                {
                    float2 uv = i.texcoord.xy;
                    float4 c = i.color;
                    _Ratio = _Heigh / _Wide;
                    // 左下四方块
                    if(uv.x < _StarPos && uv.y < _StarPos)
                    {
                        float2 r;
                        r.x = uv.x - _StarPos;
                        r.y = (uv.y - _StarPos) * _Ratio;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }
                    }
                    // 左上四方块
                    else if(uv.x < _StarPos && uv.y > _StarPos)
                    {
                        float2 r;
                        r.x = uv.x - _StarPos;
                        r.y = (uv.y + _StarPos - 1) * _Ratio;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }
                    }
                    // 右下四方块
                    else if(uv.x > _StarPos && uv.y < _StarPos)
                    {
                        float2 r;
                        r.x = uv.x + _StarPos - 1;
                        r.y = (uv.y - _StarPos) * _Ratio;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }
                    }
                    // 右上四方块
                    else if(uv.x > _StarPos && uv.y >  _StarPos)
                    {
                        float2 r;
                        r.x = uv.x + _StarPos - 1;
                        r.y = (uv.y + _StarPos - 1) * _Ratio;
                        float rr = length(r);
                        // 裁剪
                        if(rr > _Radius)
                        {
                            c.a = 0;
                        }
                    }                                   

                    fixed4 col = tex2D(_MainTex, i.texcoord) * c;
                    clip (col.a - 0.01);
                    return col;
                }

原文地址:https://www.cnblogs.com/wang-jin-fu/p/8279686.html

时间: 2024-11-14 12:30:25

图片切割的相关文章

C#中图片切割,图片压缩,缩略图生成的代码

**//// <summary> /// 图片切割函数 /// </summary> /// <param name="sourceFile">原始图片文件</param> /// <param name="xNum">在X轴上的切割数量</param> /// <param name="yNum">在Y轴上的切割数量</param> /// <

C#图片切割、图片压缩、缩略图生成

C#图片切割.图片压缩.缩略图生成的实现代码 /// 图片切割函数  /// </summary>  /// <param name="sourceFile">原始图片文件</param>  /// <param name="xNum">在X轴上的切割数量</param>  /// <param name="yNum">在Y轴上的切割数量</param>  ///

图片切割插件分步实现(二)

相对于上一个版本, 1,这次修复了container位置在左上角的bug, 2,容器container大小改为图片本身大小, 3,控制层controlLayer以及切割显示层imgLayer改为通过js初始化(方便以后添加调整) 4,容器container位置也可以随意调整而不影响其它功能 效果:http://oospace.sinaapp.com/cut1.php 代码:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

Android中将一个图片切割成多个图片[转]

有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一个Bitmap对象和一个标识图片的顺序索引的int变量. Java代码   package arui319.blog.csdn.net; import android.graphics.Bitmap; public class ImagePiece { public int index = 0; p

一个非常好用的图片切割工具(c# winform开发) 附源码

本人业余时间开发了一个图片切割工具,非常好用,也很灵活! 特别对大型图片切割,更能体现出该软件的优势! 开发工具为winform,源码下载地址:http://download.csdn.net/download/qq_29939347/10147808 功能说明 可以设定切割的高度和宽度.切割线可以上下拖动,可以增加一个切割区域,可设定某个区域不参与切割. 主要技术点分析 切割区域确定 每个切割区域是一个长方形.用一个结构标识该属性. 1 class SpliteMoveIndex 2 { 3

基于opencv图片切割

基于opencv图片切割为n个3*3区块 工作原因,切割图片,任务急,暂留调通的源码,留以后用. package com.rosetta.image.test; import org.opencv.core.Core; import org.opencv.core.Mat; import org.opencv.core.Rect; import org.opencv.highgui.Highgui; /** * @Author: nya * @Date: 18-8-28 下午5:50 */ pu

Android中将一个图片切割成多个图片

有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一个Bitmap对象和一个标识图片的顺序索引的int变量. 1 package com.example.imagesplitter; 2 3 import android.graphics.Bitmap; 4 5 /** 6 * 图片切割实体类 7 */ 8 public class ImagePie

unity2D动画和图片切割

恩,我得到了素材,是这样的 这是一整张的图片,png格式的.很明显,这是类似于一个帧动画之类的动画.按照我以前的笨方法,肯定是在PS里面切成一张一张的然后帧动画换图片,这样做的后果是我直接被累的吐血.原因就是我根本不知道有其他好的方法.好了,现在我知道咯,来吧,先导入unity 能很清楚的看到,这张图片还是一整张的状态,接下来吧sprite mode模式改成multiple 好,下面来咯,点击sprite editor,apply之后呢出来了一个框框,我们点击左上角的slice出来一个面板,直接

图片切割插件分步实现(一)

该插件是在窗口拖动效果的基础上实现的 回头再写详细点,时间比较急.先贴上代码 插件源码如下 <!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"> &