向 Flex 图像添加蒙版

发布于 2024-11-09 16:31:14 字数 439 浏览 3 评论 0原文

我有以下 mxml：

<s:Image source="@Embed(source='my/path/to/img.png')" >
  <flex:mask>
    <s:Group alpha="0.1">
      <s:Rect width="129" height="123">
        <s:fill>
          <s:SolidColor color="0x00FFFF"/>
        </s:fill>
      </s:Rect>
    </s:Group>
  </flex:mask>
</s:Image>

这段代码不应该生成一个 129px*123px 的矩形蒙版来产生裁剪效果吗？

谢谢。

原文

I have the following mxml:

<s:Image source="@Embed(source='my/path/to/img.png')" >
  <flex:mask>
    <s:Group alpha="0.1">
      <s:Rect width="129" height="123">
        <s:fill>
          <s:SolidColor color="0x00FFFF"/>
        </s:fill>
      </s:Rect>
    </s:Group>
  </flex:mask>
</s:Image>

Shouldn't this code generate a Rectangular Mask of 129px*123px that will produce a cropping effect?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深居我梦 2024-11-16 16:31:15

这应该有效。

<s:Image source="@Embed(source='my/path/to/img.png')" >
  <s:mask>
    <s:Group alpha="0.1">
      <s:Rect width="129" height="123">
        <s:fill>
          <s:SolidColor color="0x00FFFF"/>
        </s:fill>
      </s:Rect>
    </s:Group>
  </s:mask>
</s:Image>

s:mask 是图像的一个属性，将使用内部 FXG 作为遮罩。
除非将 maskType="" 属性设置为 alpha，否则 alpha 不会产生任何影响（对于剪辑，默认属性要么可见，要么不可见）。

This should work.

<s:Image source="@Embed(source='my/path/to/img.png')" >
  <s:mask>
    <s:Group alpha="0.1">
      <s:Rect width="129" height="123">
        <s:fill>
          <s:SolidColor color="0x00FFFF"/>
        </s:fill>
      </s:Rect>
    </s:Group>
  </s:mask>
</s:Image>

s:mask is a property of the image and will use the inner FXG as the mask.
The alpha won't make any difference unless you set the maskType="" property to alpha (for clip, the default property it's either visible or not).

回复收藏 0 原文

话少心凉 2024-11-16 16:31:14

问题是，在将遮罩对象设置为遮罩时，需要先创建遮罩对象并将其添加到显示列表中。因此，您的代码应该更改以反映这一点，如下所示：

<s:Group id="imageMask" alpha="0.1">
  <s:Rect width="129" height="123">
    <s:fill>
      <s:SolidColor color="0x00FFFF"/>
    </s:fill>
  </s:Rect>
</s:Group>

<s:Image source="@Embed(source='my/path/to/img.png')" mask="{imageMask}" />

祝您有美好的一天。

The problem is that the mask object needs to be already created AND added to the display list, by the time it is set as a mask. So, your code should be changed to reflect this, like so:

<s:Group id="imageMask" alpha="0.1">
  <s:Rect width="129" height="123">
    <s:fill>
      <s:SolidColor color="0x00FFFF"/>
    </s:fill>
  </s:Rect>
</s:Group>

<s:Image source="@Embed(source='my/path/to/img.png')" mask="{imageMask}" />

Have a great day.

回复收藏 0 原文

郁金香雨 2024-11-16 16:31:14

这适用于 BitmapImage。 Image 在ImageSkin 中拥有自己的BitmapImage。

创建皮肤，设置skinClass：

<s:Image source="@Embed(source='my/path/to/img.png')" 
         skinClass="MyImageSkin"/>

并在MyImageSkin中找到BitmapImage< /strong> 并设置掩码：

<!--- Primary image display skin part. -->
<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0">
    <s:mask>
       <s:Group alpha="0.1">
            <s:Rect width="129" height="123">
                <s:fill>
                    <s:SolidColor color="0x00FFFF"/>
                </s:fill>
            </s:Rect>
        </s:Group>
    </s:mask>
</s:BitmapImage>

That works for BitmapImage. Image has it's own BitmapImage inside ImageSkin.

Create skin, set skinClass:

<s:Image source="@Embed(source='my/path/to/img.png')" 
         skinClass="MyImageSkin"/>

and inside MyImageSkin find BitmapImage and set mask:

<!--- Primary image display skin part. -->
<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0">
    <s:mask>
       <s:Group alpha="0.1">
            <s:Rect width="129" height="123">
                <s:fill>
                    <s:SolidColor color="0x00FFFF"/>
                </s:fill>
            </s:Rect>
        </s:Group>
    </s:mask>
</s:BitmapImage>

回复收藏 0 原文

~没有更多了~