Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I obtain this clipping mask and text effects? #95

Open
LvHuaiSheng opened this issue Sep 5, 2023 · 17 comments
Open

How can I obtain this clipping mask and text effects? #95

LvHuaiSheng opened this issue Sep 5, 2023 · 17 comments

Comments

@LvHuaiSheng
Copy link

LvHuaiSheng commented Sep 5, 2023

How can I obtain this clipping mask and text effects?
该怎么获取这个剪切蒙版以及文字特效?

图片

@zhuxipeng
Copy link

我也在问这个,我试了蛮多多方法,好像都不行

@zhuxipeng
Copy link

文字,应该可以,但是剪切蒙版不行,文字的话,可以直接转图片就好了啊。

@LvHuaiSheng
Copy link
Author

我找到这个了,剪切蒙版通过layerFrame.layerProperties.clippingMask=1判断,文字效果也可以从textProperties的属性里获取到

@zhuxipeng
Copy link

我找到这个了,剪切蒙版通过layerFrame.layerProperties.clippingMask=1判断,文字效果也可以从textProperties的属性里获取到

但是,想那种剪贴蒙版(例如,我有个正方形的框框,还有一个图片,将图片放入正方形的框框中,剪贴蒙版可以将图片正好放入正方形里面,然后超出正方形框框的不会被显示),好像没法合并成图片吧,只能判断是否为蒙版之类的。

@LvHuaiSheng
Copy link
Author

我找到这个了,剪切蒙版通过layerFrame.layerProperties.clippingMask=1判断,文字效果也可以从textProperties的属性里获取到

但是,想那种剪贴蒙版(例如,我有个正方形的框框,还有一个图片,将图片放入正方形的框框中,剪贴蒙版可以将图片正好放入正方形里面,然后超出正方形框框的不会被显示),好像没法合并成图片吧,只能判断是否为蒙版之类的。

你的意思应该是这种吧,剪切蒙版超出的进行隐藏?这种是可以实现,具体还要看你使用的什么库来实现这个蒙版功能,可以根据这个解析库来自行判断处理逻辑
1694570305268

@zhuxipeng
Copy link

我找到这个了,剪切蒙版通过layerFrame.layerProperties.clippingMask=1判断,文字效果也可以从textProperties的属性里获取到

但是,想那种剪贴蒙版(例如,我有个正方形的框框,还有一个图片,将图片放入正方形的框框中,剪贴蒙版可以将图片正好放入正方形里面,然后超出正方形框框的不会被显示),好像没法合并成图片吧,只能判断是否为蒙版之类的。

你的意思应该是这种吧,剪切蒙版超出的进行隐藏?这种是可以实现,具体还要看你使用的什么库来实现这个蒙版功能,可以根据这个解析库来自行判断处理逻辑 1694570305268

没错,是你这个意思。如果我判断他是存在被剪切的节点,我好纠结,他的蒙版范围,理论上,我可以获得蒙版节点的蒙版图层的范围,也许我可以使用一个div,来规划好他的长宽,然后overflow:hidden,再将被剪切的节点,toPng(),然后将这个png塞到这个div里面去。理论上,这种方式,应该可行。你其他的实现思路波

@LvHuaiSheng
Copy link
Author

我找到这个了,剪切蒙版通过layerFrame.layerProperties.clippingMask=1判断,文字效果也可以从textProperties的属性里获取到

但是,想那种剪贴蒙版(例如,我有个正方形的框框,还有一个图片,将图片放入正方形的框框中,剪贴蒙版可以将图片正好放入正方形里面,然后超出正方形框框的不会被显示),好像没法合并成图片吧,只能判断是否为蒙版之类的。

你的意思应该是这种吧,剪切蒙版超出的进行隐藏?这种是可以实现,具体还要看你使用的什么库来实现这个蒙版功能,可以根据这个解析库来自行判断处理逻辑 1694570305268

没错,是你这个意思。如果我判断他是存在被剪切的节点,我好纠结,他的蒙版范围,理论上,我可以获得蒙版节点的蒙版图层的范围,也许我可以使用一个div,来规划好他的长宽,然后overflow:hidden,再将被剪切的节点,toPng(),然后将这个png塞到这个div里面去。理论上,这种方式,应该可行。你其他的实现思路波

你说的这种方式应该也是可以实现,咱们的需求不一样 我使用的是canvas库来实现,总之是这个psd的解析库可以帮你解析出来

bandicam.2023-09-13.10-18-39-053.mp4

@zhuxipeng
Copy link

我找到这个了,剪切蒙版通过layerFrame.layerProperties.clippingMask=1判断,文字效果也可以从textProperties的属性里获取到

但是,想那种剪贴蒙版(例如,我有个正方形的框框,还有一个图片,将图片放入正方形的框框中,剪贴蒙版可以将图片正好放入正方形里面,然后超出正方形框框的不会被显示),好像没法合并成图片吧,只能判断是否为蒙版之类的。

你的意思应该是这种吧,剪切蒙版超出的进行隐藏?这种是可以实现,具体还要看你使用的什么库来实现这个蒙版功能,可以根据这个解析库来自行判断处理逻辑 1694570305268

没错,是你这个意思。如果我判断他是存在被剪切的节点,我好纠结,他的蒙版范围,理论上,我可以获得蒙版节点的蒙版图层的范围,也许我可以使用一个div,来规划好他的长宽,然后overflow:hidden,再将被剪切的节点,toPng(),然后将这个png塞到这个div里面去。理论上,这种方式,应该可行。你其他的实现思路波

你说的这种方式应该也是可以实现,咱们的需求不一样 我使用的是canvas库来实现,总之是这个psd的解析库可以帮你解析出来

bandicam.2023-09-13.10-18-39-053.mp4

你的思路很ok啊,感谢,感谢

@875908494
Copy link

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

@zhuxipeng
Copy link

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

太久了,有点忘了,你可以尝试一下,用PSD绘制写入一个TXT,颜色使用纯色,例如#000000或者其他比较显眼的颜色,然后去JSON里面搜寻,试试看。但是我记得应该是可以的,因为我当时做的demo,是可以做到修改PSD里面的文字样式,例如颜色,字体大小等等信息。但是,如果堆叠了其他的效果,例如:外发光,内发光,浮雕。这一类,我当时记得应该是没有找到方法的。
假设,如果你是文字效果,例如外发光这些奇奇怪怪的艺术字之类的,你可以考虑将文字图层转换为图片图层。

@zhuxipeng
Copy link

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

太久了,有点忘了,你可以尝试一下,用PSD绘制写入一个TXT,颜色使用纯色,例如#000000或者其他比较显眼的颜色,然后去JSON里面搜寻,试试看。但是我记得应该是可以的,因为我当时做的demo,是可以做到修改PSD里面的文字样式,例如颜色,字体大小等等信息。但是,如果堆叠了其他的效果,例如:外发光,内发光,浮雕。这一类,我当时记得应该是没有找到方法的。 假设,如果你是文字效果,例如外发光这些奇奇怪怪的艺术字之类的,你可以考虑将文字图层转换为图片图层。

上面有朋友提到,文字效果也可以从textProperties的属性里获取到,这里是不是可以尝试一下

@LvHuaiSheng
Copy link
Author

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

时间有点久记不太清了,依稀记得当时测试部分特效是可以从props里获取到,我最终由于一些局限性放弃了使用此库来解析

@875908494
Copy link

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

太久了,有点忘了,你可以尝试一下,用PSD绘制写入一个TXT,颜色使用纯色,例如#000000或者其他比较显眼的颜色,然后去JSON里面搜寻,试试看。但是我记得应该是可以的,因为我当时做的demo,是可以做到修改PSD里面的文字样式,例如颜色,字体大小等等信息。但是,如果堆叠了其他的效果,例如:外发光,内发光,浮雕。这一类,我当时记得应该是没有找到方法的。 假设,如果你是文字效果,例如外发光这些奇奇怪怪的艺术字之类的,你可以考虑将文字图层转换为图片图层。

上面有朋友提到,文字效果也可以从textProperties的属性里获取到,这里是不是可以尝试一下

我翻遍了整个textProperties对象也没有找到该属性,也不知道解析出来是什么结构的数据
image

@875908494
Copy link

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

时间有点久记不太清了,依稀记得当时测试部分特效是可以从props里获取到,我最终由于一些局限性放弃了使用此库来解析

我看你提到textProperties对象能拿到文字的叠加效果,我翻遍了整个textProperties对象也没有找到该属性,也不知道解析出来是什么结构的数据,你能说一下这个效果是在哪个结构下面吗
image

@zhuxipeng
Copy link

哈喽朋友,我看您提到文字的叠加或者渐变效果可以在textProperties属性里面获取到,但是我几乎查找了整个psd解析出来的json,还是没有找到该效果在哪里,请问你是如何操作的呢,我现在基本上都解析出来了,但是还差文字的叠加效果无法拿到,这会导致我再画布还原pad样式的时候,丢失文字的颜色等效果

太久了,有点忘了,你可以尝试一下,用PSD绘制写入一个TXT,颜色使用纯色,例如#000000或者其他比较显眼的颜色,然后去JSON里面搜寻,试试看。但是我记得应该是可以的,因为我当时做的demo,是可以做到修改PSD里面的文字样式,例如颜色,字体大小等等信息。但是,如果堆叠了其他的效果,例如:外发光,内发光,浮雕。这一类,我当时记得应该是没有找到方法的。 假设,如果你是文字效果,例如外发光这些奇奇怪怪的艺术字之类的,你可以考虑将文字图层转换为图片图层。

上面有朋友提到,文字效果也可以从textProperties的属性里获取到,这里是不是可以尝试一下

我翻遍了整个textProperties对象也没有找到该属性,也不知道解析出来是什么结构的数据 image

不知道是不是styleRun,或者是documentResources之类的,我只能说,猜测一下,这种类型的定义,应该和常规的设置文字大小之类的,不一样,你展开所有的结构看看,有没有存在例如颜色之类的数组,渐变,应该至少存在两个字段,颜色数字类型,渐变角度。如果没有的话,将JSON转string,搞到chatGPT里头给你分析分析,试试。

@875908494
Copy link

可以参考这两个文档来对照一下看看(#96):https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/ https://psd-tools.readthedocs.io/en/latest/reference/psd_tools.terminology.html#psd_tools.terminology.Key.Location

按理说这种渐变叠加效果,我至少需要拿到两个颜色,还有方向,才可以在画布绘制这种效果,你发的这个文档我看着有点懵,这个如何对照呢,看起来这个是psd的的文件结构

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants