silverlight animation 读书笔记<2>模糊, 裁剪,拖拽

在foundation silverligh3 animation 书中前3章讲述基本的transform,blur，这次读书笔记的内容就是图片效果（image effect）,裁剪（clippingpath）,拖拽(draganddrop)这几个动画效果。

图片效果:，在blend中的Appearance标签下 选择Effect new，弹出对话框，可以看到BlurEffert,DropShadowEffec，

图中的效果就是图片的模糊的效果

clippingpath(裁剪):用一个图形去裁剪另外一个。创建一个clippingpath有3种方式，

1.使用code-behind文件，有blend，这种方式一般不太会用得到

2.在blend中的画板上选择一个你想裁剪的对象然后去Ctrl-click第二个对象

3.直接在Xaml中创建裁剪路径是创建一个裁剪区域。

这章图片的大小是320*240，被一个80*60的矩形裁剪为16个小的矩形。在xmal也面有16个这样的代码段

    <Image Width="320" Height="240" Source="beeFlower640x480.jpg" Stretch="Fill" x:Name="Row0Col1" RenderTransformOrigin="0.5,0.5" Canvas.Top="1">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
                <Image.Clip>
                    <RectangleGeometry Rect="80, 0, 80, 60"/>
                </Image.Clip>
            </Image>

关键部分： <Image.Clip> <RectangleGeometry Rect="80, 0, 80, 60"/> </Image.Clip>RectangleGeometry

<RectangleGeometry Rect="80, 0, 80, 60"/>是什么意思？Rect的意思是以(80,0)为顶点的长为80,宽为60的矩形，裁剪完毕侯侯对每一个小矩形设置一个transform

 

draganddrop(拖拽)：

拖拽主要分为3个步骤：

1.当MouseLeftButtonDown,计算出鼠标的当前位置

2.当MouseMove，取当前鼠标的位置，计算当前位置与MouseLeftButtonDown时的鼠标位置的x,y轴距离，被拖拽对象的Canvas.TopProperty,Canvas.LeftProperty

3.当MouseLeftButtonDown,释放鼠标。