|
Встала передо мной задача сделать водяной знак во Flex приложении, чтобы в итоге получилось как на картинке:

Решение оказалось не самым тривиальным:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200"
backgroundColor="0xffffff" backgroundGradientColors="0xffffff,0xffffff">
<mx:Script>
<![CDATA[
private var _filtered:Boolean = false;
private function addFilter() : void {
if (!_filtered) {
_filtered = true;
var outline:GlowFilter = new GlowFilter();
outline.blurX = outline.blurY = 10;
outline.color = 0x000000;
outline.quality = BitmapFilterQuality.HIGH;
outline.strength = 1;
outline.knockout = true;
var filterArray:Array = new Array();
filterArray.push(outline);
vacLabel.filters = filterArray;
//vacLabel.rotation = 345;
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" horizontalAlign="center">
<mx:HBox height="100%" verticalAlign="middle">
<mx:Button label="Button" fillAlphas="[1.0, 1.0]" fillColors="[#90ACFC, #8BA9FF]"/>
</mx:HBox>
</mx:VBox>
<mx:Label id="vacLabel" width="100%" y="75" textAlign="center" fontSize="170" alpha="0.75" scaleX="0.28" scaleY="0.28"
text="Водяной знак" fontFamily="Georgia" fontWeight="bold" fontAntiAliasType="advanced" addedToStage="addFilter()" z="10"/>\
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200"
backgroundColor="0xffffff" backgroundGradientColors="0xffffff,0xffffff">
<mx:Script>
<![CDATA[
private var _filtered:Boolean = false;
private function addFilter() : void {
if (!_filtered) {
_filtered = true;
var outline:GlowFilter = new GlowFilter();
outline.blurX = outline.blurY = 10;
outline.color = 0x000000;
outline.quality = BitmapFilterQuality.HIGH;
outline.strength = 1;
outline.knockout = true;
var filterArray:Array = new Array();
filterArray.push(outline);
vacLabel.filters = filterArray;
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" horizontalAlign="center">
<mx:HBox height="100%" verticalAlign="middle">
<mx:Button label="Button" fillAlphas="[1.0, 1.0]" fillColors="[#90ACFC, #8BA9FF]"/>
</mx:HBox>
</mx:VBox>
<mx:Label id="vacLabel" width="100%" y="75" textAlign="center" fontSize="170" alpha="0.75" scaleX="0.28" scaleY="0.28"
text="Водяной знак" fontFamily="Georgia" fontWeight="bold" fontAntiAliasType="advanced" addedToStage="addFilter()"/>
</mx:Application>
Первое на что стоит обратить внимание - это на то, что при определении фильтра надо использовать параметр knockout. Данный параметр отвечает за вырезание базы для фильтра. Следующий код "вырезает" основной текст из отображаемой картинки, оставляя только результаты своего применения.
outline.knockout = true;
Второе, что для достижения достаточно маленького и чёткого распыления границ используется очень большой размер шрифта, который потом уменьшается, используя свойства scaleX scaleY для объекта Label.
|