silverlight系列(Geometry、Path、Transforms、3DEffects)

最新推荐文章于 2024-01-22 22:08:27 发布
最新推荐文章于 2024-01-22 22:08:27 发布
阅读量542 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendykeysky/article/details/22397549
版权

一、Geometry:

简单几何图形包括LineGeometry、RectangleGeometry 和 EllipseGeometry，用于创建基本的几何形状，如直线、矩形和圆。

  • LineGeometry 通过指定直线的起点和终点来定义。
  • RectangleGeometry 通过使用 Rect 结构来定义，该结构指定矩形的相对位置、高度和宽度。您可以通过设置 RadiusX 和RadiusY 属性来创建圆角矩形。
  • EllipseGeometry 通过中心点、x 半径和 y 半径来定义。

二、Path

路径几何图形PathGeometry是PathFigure对象的集合，每个PathFigure由一个或多个PathSegment对象组成，每个对象描绘图形的一条线段。

  • ArcSegment:在两个点之间创建一个椭圆弧线。
  • BezierSegment:在两个点之间创建一条三次方贝塞尔曲线。
  • LineSegment:两个点之间创建一条直线。
  • PolyBezierSegment:创建一系列三次方贝赛尔曲线。
  • PolyLineSegment:创建一系列直线。
  • PolyQuadraticBezierSegment:创建一系列二次贝塞尔曲线。
  • QuadraticBezierSegment:创建一条二次贝塞尔曲线。

三、Transforms

Transform定义如何将一个坐标空间的点映射或变换到另一个坐标空间。映射由Matrix来（三行三列的Double集合）描述。

矩阵结构：M11,M12 M21,M22 OffsetX,OffsetY.默认值都为0。

变换类：

  • RotateTransform:指定Angle旋转元素,默认旋转为(0,0)，用CenterX，CenterY改变旋转点。
  • ScaleTransform:按指定的ScaleX和ScaleY量按比例缩放元素。
  • SkewTransform:按指定的AngleX和AngleY量扭曲元素。
  • TranslateTransform:按指定的X和Y变量移动元素。

四、3DEffects

  • RotationX 属性指定围绕对象的水平轴旋转。
  • RotationY 属性围绕旋转中心的 y 轴旋转。
  • RotationZ 属性围绕旋转中心的 z 轴（直接穿过对象平面的直线）旋转。
  • GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
  • GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
  • GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。

Geometry.xaml:

  
  

   
   
   
   <
   
   UserControl 
   
   x:Class
   
   ="GeoMetry.MainPage"
   
   
    xmlns
   
   ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   
    
    xmlns:x
   
   ="http://schemas.microsoft.com/winfx/2006/xaml"
   
   
    xmlns:d
   
   =http://schemas.microsoft.com/expression/blend/2008
  
  

  
  

   
   
   
    xmlns:mc
   
   ="http://schemas.openxmlformats.org/markup-compatibility/2006"
   
    
    mc:Ignorable
   
   ="d"
   
    d:DesignWidth
   
   ="640"
   
    d:DesignHeight
   
   ="480"
   
   >
   
   
    
   
   <
   
   Canvas 
   
   HorizontalAlignment
   
   ="Left"
   
    VerticalAlignment
   
   ="Top"
   
    Width
   
   ="500"
   
    Height
   
   ="400"
   
    
  
  

  
  

   
   Background
   
   ="Wheat"
   
   >
   
   
        
   
   <
   
   Path 
   
   Stroke
   
   ="Black"
   
    StrokeThickness
   
   ="1"
   
   >
   
   
            
   
   <
   
   Path.Data
   
   >
   
   
                
   
   <
   
   LineGeometry 
   
   StartPoint
   
   ="10,10"
   
    EndPoint
   
   ="80,150"
   
   />
   
   
            
   
   </
   
   Path.Data
   
   >
   
   
        
   
   </
   
   Path
   
   >
   
   
        
   
   <
   
   Path 
   
   Fill
   
   ="Red"
   
    Stroke
   
   ="Black"
   
    StrokeThickness
   
   ="2"
   
   >
   
   
            
   
   <
   
   Path.Data
   
   >
   
   
                
   
   <
   
   EllipseGeometry 
   
   Center
   
   ="150,80"
   
    RadiusX
   
   ="50"
   
    RadiusY
   
   ="50"
   
   />
   
   
            
   
   </
   
   Path.Data
   
   >
   
   
        
   
   </
   
   Path
   
   >
   
   
        
   
   <
   
   Path 
   
   Fill
   
   ="Gold"
   
    Stroke
   
   ="Blue"
   
    StrokeThickness
   
   ="2"
   
   >
   
   
            
   
   <
   
   Path.Data
   
   >
   
   
                
   
   <
   
   RectangleGeometry 
   
   Rect
   
   ="10,150,50,50"
   
   />
   
   
            
   
   </
   
   Path.Data
   
   >
   
   
        
   
   </
   
   Path
   
   >
   
   
        
   
   <!--
   
   
          简单几何图形包括LineGeometry、RectangleGeometry 和 EllipseGeometry，
  
  

  
  

   
   用于创建基本的几何形状，如直线、矩形和圆。 
          LineGeometry 通过指定直线的起点和终点来定义。 
          RectangleGeometry 通过使用 Rect 结构来定义，该结构指定矩形的相对位置、高度和宽度。
  
  

  
  

   
   您可以通过设置 RadiusX 和 RadiusY 属性来创建圆角矩形。 
          EllipseGeometry 通过中心点、x 半径和 y 半径来定义。

        
   
   -->
   
   
        
   
   <
   
   Path 
   
   Stroke
   
   ="Green"
   
    StrokeThickness
   
   ="2"
   
   >
   
   
            
   
   <
   
   Path.Data
   
   >
   
   
                
   
   <
   
   PathGeometry
   
   >
   
   
                    
   
   <
   
   PathGeometry.Figures
   
   >
   
   
                        
   
   <
   
   PathFigure 
   
   StartPoint
   
   ="20,180"
   
   >
   
   
                            
   
   <
   
   PathFigure.Segments
   
   >
   
   
                                
   
   <
   
   LineSegment 
   
   Point
   
   ="80,270"
   
   />
   
   
                                
   
   <
   
   BezierSegment 
   
   Point1
   
   ="130,180"
   
    Point2
   
   ="190,250"
   
    Point3
   
   ="300,170"
   
   />
   
   
                                
   
   <
   
   ArcSegment 
   
   Size
   
   ="100,100"
   
    RotationAngle
   
   ="45"
   
    IsLargeArc
   
   ="True"
   
   
                                            SweepDirection
   
   ="Counterclockwise"
   
    Point
   
   ="20,180"
   
   />
   
   
                            
   
   </
   
   PathFigure.Segments
   
   >
   
   
                        
   
   </
   
   PathFigure
   
   >
   
   
                    
   
   </
   
   PathGeometry.Figures
   
   >
   
   
                
   
   </
   
   PathGeometry
   
   >
   
   
            
   
   </
   
   Path.Data
   
   >
   
   
        
   
   </
   
   Path
   
   >
   
   
        
   
   <!--
   
   
          路径几何图形PathGeometry是PathFigure对象的集合
  
  

  
  

   
           ，每个PathFigure由一个或多个PathSegment对象组成，每个
          对象描绘图形的一条线段。
          ArcSegment:在两个点之间创建一个椭圆弧线
          BezierSegment:在两个点之间创建一条三次方贝塞尔曲线
          LineSegment:两个点之间创建一条直线
          PolyBezierSegment:创建一系列三次方贝赛尔曲线
          PolyLineSegment:创建一系列直线
          PolyQuadraticBezierSegment:创建一系列二次贝塞尔曲线
          QuadraticBezierSegment:创建一条二次贝塞尔曲线
        
   
   -->
   
   
        
   
   <
   
   Path 
   
   Stroke
   
   ="Black"
   
    StrokeThickness
   
   ="1"
   
    Fill
   
   ="#CCCCFF"
   
   >
   
   
            
   
   <
   
   Path.Data
   
   >
   
   
                
   
   <
   
   GeometryGroup 
   
   FillRule
   
   ="EvenOdd"
   
   >
   
   
                    
   
   <
   
   LineGeometry 
   
   StartPoint
   
   ="10,10"
   
    EndPoint
   
   ="50,30"
   
    
   
   />
   
   
                    
   
   <
   
   EllipseGeometry 
   
   Center
   
   ="40,70"
   
    RadiusX
   
   ="30"
   
    RadiusY
   
   ="30"
   
    
   
   />
   
   
                    
   
   <
   
   RectangleGeometry 
   
   Rect
   
   ="30,55 100 30"
   
    
   
   />
   
   
                
   
   </
   
   GeometryGroup
   
   >
   
   
            
   
   </
   
   Path.Data
   
   >
   
   
        
   
   </
   
   Path
   
   >
   
   
    
   
   </
   
   Canvas
   
   >
   
   

   
   </
   
   UserControl
   
   >

运行效果：

Transforms.xaml:

  
  

   
   
   
   <
   
   Canvas 
   
   Background
   
   ="AliceBlue"
   
    Width
   
   ="500"
   
    Height
   
   ="400"
   
    HorizontalAlignment
   
   ="Left"
   
    VerticalAlignment
   
   ="Top"
   
   >
   
   
        
   
   <
   
   Rectangle 
   
   Width
   
   ="50"
   
    Height
   
   ="50"
   
    Fill
   
   ="Red"
   
    Margin
   
   ="5,5,5,5"
   
     
   
   >
   
   
            
   
   <
   
   Rectangle.RenderTransform
   
   >
   
   
                
   
   <
   
   RotateTransform 
   
   Angle
   
   ="30"
   
    CenterX
   
   ="20"
   
    CenterY
   
   ="20"
   
   />
   
   
            
   
   </
   
   Rectangle.RenderTransform
   
   >
   
   
            
   
   </
   
   Rectangle
   
   >
   
   
        
   
   <
   
   Rectangle 
   
   Width
   
   ="50"
   
    Height
   
   ="50"
   
    Fill
   
   ="Green"
   
    Margin
   
   ="5,5,5,5"
   
    Canvas.Left
   
   ="75"
   
     
   
   >
   
   
            
   
   <
   
   Rectangle.RenderTransform
   
   >
   
   
                
   
   <
   
   ScaleTransform 
   
   ScaleX
   
   ="0.8"
   
    ScaleY
   
   ="0.7"
   
   />
   
   
            
   
   </
   
   Rectangle.RenderTransform
   
   >
   
   
        
   
   </
   
   Rectangle
   
   >
   
   
        
   
   <
   
   Rectangle 
   
   Width
   
   ="50"
   
    Height
   
   ="50"
   
    Fill
   
   ="Gray"
   
    Margin
   
   ="5,5,5,5"
   
    Canvas.Left
   
   ="150"
   
     
   
   >
   
   
            
   
   <
   
   Rectangle.RenderTransform
   
   >
   
   
                
   
   <
   
   SkewTransform 
   
   AngleX
   
   ="15"
   
    AngleY
   
   ="20"
   
   />
   
   
            
   
   </
   
   Rectangle.RenderTransform
   
   >
   
   
        
   
   </
   
   Rectangle
   
   >
   
   
        
   
   <!--
   
   
        Transform定义如何将一个坐标空间的点映射或变换到另一个坐标空间。映射由Matrix来（三行三列的Double集合）描述。
        矩阵结构：M11,M12 M21,M22 OffsetX,OffsetY.默认值都为0
        变换类：
        RotateTransform:指定Angle旋转元素,默认旋转为(0,0)，用CenterX，CenterY改变旋转点
        ScaleTransform:按指定的ScaleX和ScaleY量按比例缩放元素
        SkewTransform:按指定的AngleX和AngleY量扭曲元素
        TranslateTransform:按指定的X和Y变量移动元素
        
   
   -->
   
   
    
   
   </
   
   Canvas
   
   >

运行效果：

3DEffects.xaml:

  
  

   
   
   
   <
   
   Canvas 
   
   Background
   
   ="AliceBlue"
   
    Width
   
   ="500"
   
    Height
   
   ="400"
   
    HorizontalAlignment
   
   ="Left"
   
    VerticalAlignment
   
   ="Top"
   
   >
   
   
        
   
   <
   
   StackPanel 
   
   Canvas.Left
   
   ="5"
   
    Canvas.Top
   
   ="5"
   
   >
   
   
            
   
   <
   
   StackPanel.Projection
   
   >
   
   
                
   
   <
   
   PlaneProjection 
   
   RotationX
   
   ="0"
   
    RotationY
   
   ="-60"
   
   />
   
   
            
   
   </
   
   StackPanel.Projection
   
   >
   
   
            
   
   <
   
   Image 
   
   Source
   
   ="1.JPG"
   
    Width
   
   ="150"
   
    Height
   
   ="120"
   
   />
   
   
        
   
   </
   
   StackPanel
   
   >
   
   
        
   
   <
   
   StackPanel 
   
   Canvas.Left
   
   ="155"
   
    Canvas.Top
   
   ="5"
   
   >
   
   
            
   
   <
   
   StackPanel.Projection
   
   >
   
   
                
   
   <
   
   PlaneProjection 
   
   RotationX
   
   ="-60"
   
    
   
   />
   
   
            
   
   </
   
   StackPanel.Projection
   
   >
   
   
            
   
   <
   
   Image 
   
   Source
   
   ="2.JPG"
   
    Width
   
   ="150"
   
    Height
   
   ="120"
   
   />
   
   
        
   
   </
   
   StackPanel
   
   >
   
   
        
   
   <
   
   StackPanel 
   
   Canvas.Left
   
   ="320"
   
    Canvas.Top
   
   ="5"
   
   >
   
   
            
   
   <
   
   StackPanel.Projection
   
   >
   
   
                
   
   <
   
   PlaneProjection 
   
   RotationX
   
   ="0"
   
    RotationY
   
   ="60"
   
   />
   
   
            
   
   </
   
   StackPanel.Projection
   
   >
   
   
            
   
   <
   
   Image 
   
   Source
   
   ="3.JPG"
   
    Width
   
   ="150"
   
    Height
   
   ="120"
   
   />
   
   
        
   
   </
   
   StackPanel
   
   >
   
   
        
   
   <!--
   
   
          RotationX 属性指定围绕对象的水平轴旋转
          RotationY 属性围绕旋转中心的 y 轴旋转。
          RotationZ 属性围绕旋转中心的 z 轴（直接穿过对象平面的直线）旋转
          GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
          GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
          GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。
        
   
   -->
   
   
    
   
   </
   
   Canvas
   
   >

运行效果：

wendy_soft
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
路径转换
萧涯的专栏
03-28 457
public String pathTransform(String path){ String os= System.getProperty("os.name"); if(os.indexOf("Windows") != -1){ path = path; } else { path = path.replace("\\","/"); } return path; }
Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
BADAO_LIUMANG_QIZHI的博客
04-07 2066
场景 Leaflet快速入门与加载OSM显示地图： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础上，实现对图形进行旋转。 Leaflet的L.Path.Transform插件实现了图形了旋转、拖拽、比例缩放等功能。 插件地址： https://github.com/w8r/Leaflet.Path.Transform 注： 博客：https://blog.csdn.net/bada..
【Flutter 绘制技巧】Path 路径变换
张风捷特烈的博客
05-15 594
本文来探讨一下路径的变换，我们知道 Canvas 本身也支持变换，那 Path 的变换有什么必要性吗？和 Canvas 变换又有什么区别呢？如何在一次变换中叠加多种变换效果，如何修改变换中心？这些都是绘制的基本技能。本文将作为 《Flutter 绘制指南 - 妙笔生花》的补充内容，被同步到小册中。本文源码见 【idraw/extra03path】 1. 绘制路径测试 如下，通过 PathP...
WPF 使用Path绘制几何图形
chulijun3107的博客
05-02 4520
Path类继承自Shape,可以绘制很多简单的，复合的图形。Path类通过提供的Data属性，Data属性接受一个Geometry对象(我的理解就是Data要装什么集合图形呀)，Geometry一共有7个派生类，说明如下： 名称 说明 LineGeometry 绘制直线 RectangleGeometry 绘制矩形（包括原型拐角的举行） EllipseGeometr...
3. 几何图形(Geometry)
singhwong
08-24 1553
前面示例中，其中一种形状Path使用Geometry来绘图。Geometry元素也用于其他地方，如用于DrawingBrush。 在某些方面，Geometry元素非常类似于形状。与Line、Ellipse和Rectangle形状一样，也有绘制这些形状的Geometry元素：LineGeometry、EllipseGeometry和RectangleGeometry。形状与几何图形有显著的区别。Shape是一个FrameworkElement，可以用于把派生自UIElement的任意类用作其子元素。Fram
Geometry_geometry_3dprinter_
10-03
标题中的"Geometry_geometry_3dprinter_"暗示了我们即将探讨的主题是关于3D打印技术中的几何建模。在3D打印领域，几何形状的构建是至关重要的，因为它是从数字模型到实体对象转化的基础。3D打印机的工作原理是将设计...
geometry_3d:用于3D几何和建模的可视化工具
05-26
geometry_3d 用于3D几何和建模的可视化工具 要运行该应用程序： git clone the repo，然后进行yarn install和expo start您应该在物理设备上运行该应用程序，因为该应用程序使用大量图形处理模块。 当前默认形状：框...
OSG3D-master.zip_geometry_osg3d_osgearth_水淹_长度测量
07-14
- **线**：线是由一系列连续的点组成，可以表示路径、边界的轮廓等。 - **面**：面是由多条线围成的闭合区域，可以表示平面、曲面或者复杂的3D形状。在OSG3D中，可以通过三角形网格（Triangle Mesh）来构建复杂的...
Matlab geometry toolbox for 2D3D geometric computing.zip
07-19
Matlab几何计算工具箱，即Matlab geometry toolbox，是Matlab平台下专门用于2D和3D几何计算的强大工具。它提供了丰富的函数库，支持各种几何对象的创建、操作、分析以及可视化，极大地扩展了Matlab在几何建模和计算...
3D投射 silverlight 3D投射
08-27
在IT领域，Silverlight是一种由微软开发的网络插件，用于在Web浏览器中创建丰富的交互式用户界面，尤其是在多媒体和图形方面。它支持2D和3D图形渲染，使得开发者可以构建具有高度视觉吸引力的应用程序。本文将深入...
Three.js - 绘制线框几何模型
ithanmang
06-29 7206
通过 three.js 可以绘制线段模型，包括虚线和基础线条。 var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push(new THREE.Vector3(-200, -200, -200)); lineGeometry.vertices.push(new THREE.Vector3(200, 200, 200)...
Android关于Path你所知道的和不知道的一切
我的专栏
04-25 715
Android关于Path你所知道的和不知道的一切 转载于https://juejin.cn/post/6844903705939050503?share_token=3ab92da7-c7fa-4a0a-af6d-147018341fd6&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_android&utm_campaign=client_share 零、前言 1.canvas本身提供了很多绘制基本图形的
WPF学习之绘图和动画
热门推荐
星火燎猿
11-13 5万+
如今的软件市场,竞争已经进入白热化阶段,功能强、运算快、界面友好、Bug少、价格低都已经成为了必备条件。这还不算完，随着计算机的多媒体功能越来越强，软件的界面是否色彩亮丽、是否能通过动画、3D等效果是否吸引用户的眼球也已经成为衡量软件的标准。 软件项目成功的三个要素是：资源、成本、时间。无论是为了在竞争中保持不败还是为了激发起用户对软件的兴趣，提高软件界面的美化程度、恰当的将动画和3D等效果引入
Flutter 笔记 | Flutter 核心原理（五）Box 布局模型和 Sliver 布局模型
川峰的博客
06-01 1098
Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型和 Sliver 布局模型，Flutter Box 布局模型
Flutter - 循序渐进 Sliver
大灰狼的小绵羊哥哥的博客
06-14 4131
列表组件在移动端上尤为重要，Sliver 作为 Flutter 列表组件中重要的一部分，开发者非常有必要了解 Sliver 的原理和用法。 两种类型的布局 Flutter 的布局可以分为两种： Box ( RenderBox ): 2D 绘制布局 Sliver ( RenderSliver )：滚动布局 重要的概念 Sliver Sliver 是 Flutter 中的一个概念，表示可滚动布局中的一部分，它的 child 可以是普通的 Box Widget。 ViewPort ViewPort
Flutter 滚动布局：sliver模型
最新发布
Mamong's blog
01-22 2100
Flutter中可滚动布局基本都来自Sliver模型，本文探讨sliver模型原理。
cesium绘制不同颜色的多段线（SimplePolylineGeometry）
一见终秦的博客
06-17 7077
记录一下用SimplePolylineGeometry绘制不同颜色的多段线，代码看下面 //创建多段线和每段颜色 const positions = []; const colors = []; for (let j = 0; j <= 50; j += 5) { positions.push( Cesium.Cartesian3.fromDegrees(-124.0 + j, 40, 50000.0 * (j % 10)) ); colors.push(Ces
WPF之几何图形Geometry
weixin_33749242的博客
10-12 3960
在WPF的DrawingContext对象中，提供了基本的绘制椭圆和矩形的API：DrawEllipse和DrawRectangle。但是，这些是远远不够用的，我们在日常应用中，更多的是使用DrawGeometry函数，它可以绘制更多复杂的几何图形，并且提供了许多强大而易用的函数，在大多数场景下，甚至可以取代DrawEllipse和DrawRectangle函数。 在WPF图形体系中，Geome...
flutter绘制指南04-路径的操作方法
title_martin的博客
06-19 692
2. 和 3.:路径变换 4.:路径联合 二. 路径测量的使用 1.认识 2. 路径测量获取路径某个位置的信息 3.路径测量和动画相结合
open3d geometry mesh
12-19
要创建一个Open3D的网格对象，你可以使用`open3d.geometry.TriangleMesh`类。这个类提供了一些方法来操作和可视化网格。 下面是一个示例代码，演示了如何创建一个简单的网格对象并进行可视化： ```python import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值