Kickoff: Droplet

Om mee te beginnen wil ik een projectje delen, waarin ik geprobeerd heb het logo van een interactieve TV aanbieder in XAML te bouwen. Het bleek een leuke exercitie, met een resulaat dat veel had van het origineel:

In XAML bleek een eenvoudige droplet een combinatie van twee cirkels en een ‘cashewnoot’ Path Shape voor de glimmer. Deze laatste heb ik met de hand getekend in Blend, maar ze zijn eenvoudig te maken door van een cirkel het onderste punt met een “Direct Selection Tool” omhoog te trekken tot voorbij het midden van de cirkel…. De druppels aan elkaar was echter een ander verhaal: hoe krijg je die druppels zo dat ze in elkaar overvloeien?

Uiteindelijk werd het een combinatie van het buitenste Path, aanvankelijk samengesteld uit drie cirkels, maar daarna omgebouwd tot een Path Shape. Het gewenste overvloei effect werd bereikt door een BlurBitmapEffect op de binnenste cirkels te zetten. (Ik snap dat dat niet werkt in Silverlight…)

Dit is de XAML code voor een enkele Droplet:


<Grid Width="100" Height="100">
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="10*"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="10*"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <Ellipse Stroke="#FF000000" Grid.ColumnSpan="3" Grid.RowSpan="3">
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="#FF008000" Offset="0"/>
     <GradientStop Color="#FF64C800" Offset="0.5"/>
     <GradientStop Color="#FFC8FF00" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
  <Ellipse.BitmapEffect>
   <DropShadowBitmapEffect ShadowDepth="15" Color="#FF64C800" Opacity="0.5" Softness=".5" Direction="315"/>
  </Ellipse.BitmapEffect>
 </Ellipse>
 <Ellipse Grid.ColumnSpan="3" Grid.RowSpan="3">
  <Ellipse.Fill>
   <RadialGradientBrush>
    <GradientStop Color="#00008000" Offset="0.697"/>
    <GradientStop Color="#FF008000" Offset="0.947"/>
    <GradientStop Color="#FF035303" Offset="1"/>
   </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
 <Path Grid.Column="1" Grid.RowSpan="2" Width="80" Height="40" Stretch="Fill" VerticalAlignment="Top" Margin="0,5,0,0" Data="M146.95618,2.9995805E-06 C226.86218,0.013676752 273.86514,51.703491 289.14128,86.956135 297.95685,107.29974 276.17844,138.9885 252.71411,133.96005 236.26232,130.4344 223.33633,102.23228 145.78051,103.40737 68.224695,104.58246 52.948524,129.25931 31.324356,135.89577 10.824717,142.18711 -9.2624218,105.47439 4.5678474,81.502538 22.194617,50.950246 63.516652,-0.014275423 146.95618,2.9995805E-06 z" >
  <Path.Fill>
   <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
    </LinearGradientBrush>
  </Path.Fill>
 </Path>
</Grid>

Advertenties