Водяные знаки

Облако тегов

Последние записи

Полезные ссылки

Природа не понимает шуток. Она всегда честна, всегда серьёзна, всегда сурова. Она всегда права, а ошибки и промахи делают только люди. Человек, который относится к природе с пренебрижением, не способен её оценить, и только понимающему, чистому и правдивому, она покоряется и открывает свои тайны.

Иоган Вольфнг фон Гёте

Большое спасибо

FastVPS за надёжный и дешёвый хостинг

Водяные знаки

25.01.2010 14:27

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

watersign_1

Решение оказалось не самым тривиальным:

<?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.