silverlight中path对象使用总结

     Path对象用于绘制相边的一系列线条或曲线对象，线条和曲线的尺寸是通过数据属性声明。 
 
     请参见下面代码及其注释（xaml/pathscene.xaml）：
 

<!--EllipseGeometry-->
  <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
    </Path.Data>
  </Path>

  <!--RectangleGeometry-->
  <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <RectangleGeometry Rect="250,0,100,100"  />
      <!--左，上，长，高-->
    </Path.Data>
  </Path>

  <!--PathGeometry-->
  <Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="10,200">
            <!--起点坐标（左，高）-->
            <PathFigure.Segments>
              <LineSegment Point="100,130"/>
              <!--终点坐标（左，高）-->
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>

  <!--LineGeometry-->
  <Path Stroke="Red" StrokeThickness="10" >
    <Path.Data>
      <LineGeometry StartPoint="100,200" EndPoint="180,140" />
    </Path.Data>
  </Path>


  <!--GeometryGroup组合的几何类型-->
  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>
      <!-- Creates a composite shape from two geometries. -->
      <GeometryGroup FillRule="EvenOdd">
        <LineGeometry StartPoint="220,200" EndPoint="390,250" />
        <EllipseGeometry Center="250,200" RadiusX="40" RadiusY="40" />
        <RectangleGeometry Rect="250, 150, 100, 100" />
      </GeometryGroup>
    </Path.Data>
  </Path>

 
     运行结果如下图（图中数字顺序为其代码的分布次序）：

    
 
 
     下面演示使用createFromXaml动态加载上面的xaml内容的js脚本(xaml\CreateFromXaml.js):

Silverlight_JsWeb.CreateFromXaml.prototype =
{
    handleLoad: function(plugIn, userContext, sender) 
    {
        this.plugIn = plugIn;
        
        // 按钮事件挂钩示例: 查找按钮，然后附加事件处理程序
        sender.findName("container").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, 
        this.handleMouseLeftButtonDown));
    },
    
    // 事件处理程序示例
    handleMouseLeftButtonDown:function (sender, eventArgs)
    {    
        this.createXaml(sender);
    },
    
    createXaml:function (sender)
    {
        
        var plugin = sender.getHost();
        //同心圆
        var xamlFragment = '<Path Fill="Gold" Stroke="Black" StrokeThickness="1">';
            xamlFragment += '<Path.Data>';
            xamlFragment += '  <GeometryGroup>';
            xamlFragment += '    <EllipseGeometry Center="60,80" RadiusX="50" RadiusY="50" />';
            xamlFragment += '    <EllipseGeometry Center="60,80" RadiusX="30" RadiusY="30" />';
            xamlFragment += '  </GeometryGroup>';
            xamlFragment += '</Path.Data>';         
            xamlFragment += '</Path>';        

         sender.children.add(plugin.content.createFromXaml(xamlFragment, false));
         
         //矩形RectangleGeometry
         xamlFragment = '<Path Fill="Gold" Stroke="Black" StrokeThickness="1">';
            xamlFragment += '    <Path.Data>';
            xamlFragment += '        <RectangleGeometry Rect="200,30,100,100"  />';
            xamlFragment += '        <!--左，上，长，高-->';
            xamlFragment += '    </Path.Data>';
            xamlFragment += '</Path>';

         sender.children.add(plugin.content.createFromXaml(xamlFragment, false));          
          
         //直线PathGeometry
         xamlFragment = '<Path Stroke="Black" StrokeThickness="1">';
            xamlFragment += '<Path.Data>';
            xamlFragment += '    <PathGeometry>';
            xamlFragment += '        <PathGeometry.Figures>';
            xamlFragment += '            <PathFigure StartPoint="10,200">';
            xamlFragment += '                <!--起点坐标（左，高）-->';
            xamlFragment += '                <PathFigure.Segments>';
            xamlFragment += '                    <LineSegment Point="100,130"/>';
            xamlFragment += '                    <!--终点坐标（左，高）-->';
            xamlFragment += '                </PathFigure.Segments>';
            xamlFragment += '            </PathFigure>';
            xamlFragment += '        </PathGeometry.Figures>';
            xamlFragment += '    </PathGeometry>';
            xamlFragment += '</Path.Data>';
            xamlFragment += '</Path>';
            
         sender.children.add(plugin.content.createFromXaml(xamlFragment, false));   
         
         //  <!--LineGeometry-->
         xamlFragment = '<Path Stroke="Red" StrokeThickness="10" >';
            xamlFragment += '<Path.Data>';
            xamlFragment += '    <LineGeometry StartPoint="100,200" EndPoint="180,140" />';
            xamlFragment += '</Path.Data>';
            xamlFragment += '</Path>';     
            
         sender.children.add(plugin.content.createFromXaml(xamlFragment, false));   
         
         
         //<!--GeometryGroup组合的几何类型-->
         xamlFragment = '<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">';  
            xamlFragment += '<Path.Data>';  
            xamlFragment += '    <!-- Creates a composite shape from two geometries. -->';  
            xamlFragment += '    <GeometryGroup FillRule="EvenOdd">';  
            xamlFragment += '        <LineGeometry StartPoint="220,200" EndPoint="390,250" />';  
            xamlFragment += '        <EllipseGeometry Center="250,200" RadiusX="40" RadiusY="40" />';  
            xamlFragment += '        <RectangleGeometry Rect="250, 150, 100, 100" />';  
            xamlFragment += '    </GeometryGroup>';  
            xamlFragment += '</Path.Data>';  
            xamlFragment += '</Path>';  
            
         sender.children.add(plugin.content.createFromXaml(xamlFragment, false));  

//        sender.children.add(ellipse);
//        var xamlFragment = '<TextBlock Canvas.Top="0" Text="createFromXaml 方法调用!" />';
//        textBlock = plugin.content.createFromXaml(xamlFragment, false); 
//        
//        var xamlFragment2 = '<Ellipse Canvas.ZIndex="1" Canvas.Left="95" Canvas.Top="95" Height="200" 
//                          Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" />';
//        ellipse = plugin.content.createFromXaml(xamlFragment2, false); 
//        ellipse.fill = this.createLinearGradientBrush(plugin);       
//        
//        sender.children.add(textBlock);
//        sender.children.add(ellipse);
    },
    
    createLinearGradientBrush:function (plugin)
    {    
        var xamlFragment = '<LinearGradientBrush>';
           xamlFragment +=   '<GradientStop Color="Yellow" Offset="0.0" />';
           xamlFragment +=   '<GradientStop Color="Orange" Offset="0.5" />';
           xamlFragment +=   '<GradientStop Color="Red" Offset="1.0" />';
           xamlFragment += '</LinearGradientBrush>'; 
        return plugin.content.createFromXaml(xamlFragment);
    }
}

     源码下载，请点击这里:)