有什么方案能代替mask组件切割效果

Creator 2.x
#22

我突然想到，你这个远程加载不是一个spriteframe，如果你只是要其中正方形的部分，你setRect不就完事了。我还以为你有圆角什么的需求呢。。

#23

我们每个item也是一个prefab。比如节点nodeA上有mask组件和管理mask的脚本compA，item全部加载到nodeA下面。item添加进来的时候，通知compA自己需要遮罩的区域，compA重新执行一次mask._updateGraphics，把新增的遮罩区域也绘制进来，就可以了。

#24

诶？想问一下您这个方法能实现下边的遮罩方式么？
假设a是item-icon，b是item-bg，c是mask层

aaa    aaa
bbbbb  bbbbb
cccccccccccc

c层实现一个遮罩显示成如下这样

 a      a
bbbbb  bbbbb
cccccccccccc

我的理解按说不得这样才行么。

 a      a
cccccccccccc
bbbbb  bbbbb
#25

想法不错,我试了一下,确实可以重写mask切割区域,不过有些问题,1.切割范围不好计算,折腾了很久,以每一个item所在中心点,设置切割范围,出来的效果差很多,不好调试 2这样增加mask,会导致item的点击事件都失效,…暂时还先是放弃了

#26

setRect 好像不行,我的图片是要等比缩放的,等比缩放之后,才切割.你想每张图片 有大有小,直接setRect是不行的

#27

为什么呢？你现在的控件不就是个正方形么，假设图是500*400，你的rect是50,0,400,400不就行了么。。这个很简单啊

#28

rect不也能算么~。~保证长宽比呗
控件如果固定长宽，内容是自动拉伸的吧

#29

假设mask所在节点 是500500,图片是500400, 那图片所在的节点宽高就是(624,500) 这时候图片放大1.25倍,刚好能填满节点,maks切割就以500*500来切割

#30

问题是节点设置成500500，你图的rect设置成400400，会自动拉伸呀，不用你手动放大

#31

是的.我试过了,感觉那样拉伸效果不好,我跟原来对比过,这样拉伸感觉有点变型

#32

hmmmm，行吧，这个就超出我理解范围了，:joy:

#33

仔细理解了一下楼主的需求，主要是想把图片等比缩放，使其占满120*120大小的方块。跟scene的fitWidth或fitHeight功能类似。另外最好是能合批。

最简单的方法是修改顶点的uv数据。
比如120*240的图片，高度部分只渲染[0.25, 0.75]区间。

可以参考 @lamyoung的这篇文章，他是通过修改顶点颜色实现渐变，楼主的需求可以修改顶点的uv。
http://lamyoung.com/cocos-creator/2020/06/04/ccc-color-assembler-2d/

#34

谢谢 我有跟他这文章的作者探讨过,他的这文章就可以切割https://forum.cocos.org/t/mask-mesh-gizmo/88288 ,但是好像只能在原图尺寸下切割,没法等比缩放

#35

有一个问题，我一直觉得setRect就是通过改uv实现的，这个是有什么其他方式么？

#36

不做任何处理的情况下，cc.Sprite组件能够将图片“非等比缩放”到节点大小。
假设节点是120120大小，图片是120240，这个时候“非等比缩放”的结果是图片高度被压缩。

引擎在这种情况下渲染，x轴y轴的uv都是[0,1]区间。
你要做的是把y轴的uv区间变为[0.25,0.75]，这个时候就能渲染出图片“中心”位置的正方形了。

#37

shader 很简单就能处理 smoothStep 函数，又能处理锯齿问题

#38

我去看了下rect，这个图直接设置0,60,120,120，就是把uv的y改成了0.25,0.75

#39

uv修改后，要保持顶点的世界坐标不变化。

如果uv 和pos一起变化，那么节点等于裁剪了整个节点，而不是裁剪图片。这种情况下图片仍然是处于非等比缩放状态。

#40

不是,假如图片是120240,那图片所在的节点也是120240, mask所在节点依然是120*120

#41

明白你现在的需求
他是说你只需要一个120120的节点，然后改uv就行了。
我其实也是只需要一个120120的节点，把spriteFrame的rect改了就行。因为改rect实际上也是改了uv而已