-
2020-09-02 19:01:31
实现效果如下:
思路:封装三角形三个顶点和路径的三角形类,图形渲染时同步更新公共顶点三角形的顶点位置。
步骤:
1、三角形类Triangle.cs
public Point A, B, C;//初始三个顶点 public Point VA, VB, VC;//运动的三个顶点 public Path trianglePath;//三角形路径 public Color triangleColor;//填充 public double ColorIndex;//颜色深度 public Triangle(Point a, Point b, Point c, Color co, double z) { A = VA = a; B = VB = b; C = VC = c; triangleColor = co; ColorIndex = z; trianglePath = new Path(); Draw(); } /// <summary> /// 绘制三角形 /// </summary> public void Draw
更多相关内容 -
wpf的path画三角形、四边形
2021-08-30 17:16:46以StartPoint为原点,画坐标轴,Y轴箭头向下;按顺序画图。StartPoint原点始终在控件左上角,当其他点的坐标值比原点的值小,原点会偏移。 通常为: ArcSegment 、BezierSegment, LineSegment, PolyBezierSegment...PathFigure表示几何图形的一个子部分、一系列单独连接的二维几何线段。
以StartPoint为原点,画坐标轴,Y轴箭头向下;按顺序画图。StartPoint原点始终在控件左上角,当其他点的坐标值比原点的值小,原点会偏移。
通常为: ArcSegment 、BezierSegment, LineSegment, PolyBezierSegment, PolyLineSegment, PolyQuadraticBezierSegment, QuadraticBezierSegment.
例子1:
<Path Grid.Row="0" x:Name="pathLeft" Fill="LightSkyBlue" Stretch="Fill"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,40">
<PathSegmentCollection>
<LineSegment Point="100,30" />
<LineSegment Point="100,60" />
</PathSegmentCollection>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
例子2:((0,0)为控件的左上角坐标)
<Path Grid.Row="0" x:Name="pathLeft" Fill="LightSkyBlue" Stretch="Fill"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0" >
<PathSegmentCollection>
<LineSegment Point="0,60" />
<LineSegment Point="100,40" />
<LineSegment Point="100,80" />
<LineSegment Point="0,60" />
</PathSegmentCollection>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
例子3:
<Path Grid.Row="0" x:Name="pathLeft" Fill="LightSkyBlue" Stretch="Fill"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0" >
<PathSegmentCollection>
<LineSegment Point="0,60" />
<LineSegment Point="100,40" />
<LineSegment Point="100,100" />
<LineSegment Point="0,100" />
</PathSegmentCollection>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
-
WPF 3d坐标系和基本三角形
2020-09-14 03:08:43WPF中二维图形的坐标系将原点定位在呈现区域(通常是屏幕)的左上角。 在二维系统中,x 轴上的正值朝右,y 轴上的正值朝下。 在三维坐标系中,原点位于呈现区域的中心,x 轴上的正值朝右,y 轴上的正值朝上,z 轴上...WPF中二维图形的坐标系将原点定位在呈现区域(通常是屏幕)的左上角。 在二维系统中,x 轴上的正值朝右,y 轴上的正值朝下。
在三维坐标系中,原点位于呈现区域的中心,x 轴上的正值朝右, y 轴上的正值朝上,z 轴上的正值从原点向外朝向观察者。
如下;
在3D的世界里所有的东西都是用一些列的“三角形”来描述的。因为;
三角形是用来描述一个平面的最细微的几何体,渲染引擎能够依据每个三角形的材质以及场景中的灯光角度来计算它的颜色。
其实就是三点确定一个平面,在一个平面上做计算最简单,考虑的因素最少。如果用三维空间中大于三个点来做渲染基本单位,那么如果这些点不在同一个平面上的话,渲染计算是相当复杂的。
下面来画一个最基本三角形;
<MeshGeometry3D Positions="1,0,0 0,-1,0 0,0,1"/> ,定义了三角形的三个顶点;
<PerspectiveCamera Position="-2,2,2" LookDirection="2,-2,-2" UpDirection="0,1,0"/>
定义了摄像机的位置和看的方向等;如果改变摄像机的位置,则如下;
先把坐标系整清楚;以及 <MeshGeometry3D Positions="1,0,0 0,-1,0 0,0,1"/> 是定义三个顶点的坐标,下回再整摄像机的位置等;
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <Viewport3D> <Viewport3D.Camera> <PerspectiveCamera Position="-2,2,2" LookDirection="2,-2,-2" UpDirection="0,1,0"/> </Viewport3D.Camera> <Viewport3D.Children> <ModelVisual3D x:Name="Light"> <ModelVisual3D.Content> <AmbientLight/> </ModelVisual3D.Content> </ModelVisual3D> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="-1,0,0 0,-1,0 0,0,-1"/> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial Brush="Yellow" /> </GeometryModel3D.Material> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D.Children> </Viewport3D> </Grid> </Page>
-
WPF三角形、圆形按钮
2011-09-28 16:42:17<UserControl x:Class="WpfApplication1.UserControl1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc=...例子简单,代码更简单。< Window
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
x:Class = " Custom_Button.Window1 "
x:Name = " Window "
Title = " 圆形按钮 "
Width = " 600 " Height = " 480 " >
< Grid x:Name = " LayoutRoot " >
< Grid.RowDefinitions >
< RowDefinition />
</ Grid.RowDefinitions >
< Button Grid.Column = " 0 " Grid.Row = " 0 " Height = " 400 " Width = " 400 " HorizontalAlignment = " Left " VerticalAlignment = " Top " Content = " Button " Template = " {DynamicResource ButtonControlTemplate1} " Cursor = " Hand " >
< Button.Resources >
< ControlTemplate x:Key = " ButtonControlTemplate1 " TargetType = " {x:Type Button} " >
< Grid >
< Ellipse x:Name = " ButtonEllipse " Width = " Auto " Height = " Auto " StrokeThickness = " 4 " Fill = " White " Stroke = " Gray " ></ Ellipse >
< Polygon x:Name = " ButtonPolygon " Points = " 20,200 300,50 300,350 " Stroke = " White " StrokeThickness = " 2 " >
< Polygon.Fill >
< SolidColorBrush Color = " Gray " Opacity = " 0.4 " />
</ Polygon.Fill >
</ Polygon >
</ Grid >
< ControlTemplate.Triggers >
< Trigger Property = " IsMouseOver " Value = " True " >
< Setter TargetName = " ButtonPolygon " Property = " Fill " Value = " Black " ></ Setter >
</ Trigger >
< Trigger Property = " IsPressed " Value = " True " >
< Setter TargetName = " ButtonPolygon " Property = " Fill " Value = " Gray " />
</ Trigger >
</ ControlTemplate.Triggers >
</ ControlTemplate >
</ Button.Resources >
</ Button >
</ Grid >
</ Window >
修改后三角形自动放大
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Width="305" HorizontalAlignment="Left" Content="Button1" Template="{DynamicResource ButtonControlTemplate1}" Cursor="Hand" Margin="52,45,0,142" Click="Button_Click_1">
<Button.Resources>
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
<Grid>
<Ellipse x:Name="ButtonEllipse" Width="Auto" Height="Auto" StrokeThickness="4" Fill="White" Stroke="Gray"></Ellipse>
<Polygon x:Name="ButtonPolygon" Stretch="Fill" Points="0,50 100,0 100,100" Stroke="White" StrokeThickness="2">
<Polygon.Fill>
<SolidColorBrush Color="Gray" Opacity="0.4"/>
</Polygon.Fill>
</Polygon>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonPolygon" Property="Fill" Value="Black"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonPolygon" Property="Fill" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Resources>
</Button>
</Grid>
自定义控件上使用代创建
xaml:
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="439" d:DesignWidth="437" Loaded="UserControl_Loaded">
<UserControl.Resources>
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
<Grid>
<Polygon x:Name="ButtonPolygon" Stretch="Fill" Points="0,50 100,0 100,100" Stroke="White" StrokeThickness="2">
<Polygon.Fill>
<SolidColorBrush Color="Gray" Opacity="0.4"/>
</Polygon.Fill>
</Polygon>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonPolygon" Property="Fill" Value="Black"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonPolygon" Property="Fill" Value="red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
</UserControl>
code:public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Button button1 = new Button();
this.AddChild(button1);
button1.Template = (ControlTemplate)(this.Resources["ButtonControlTemplate1"]);
button1.Click += button1_Click;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("sss");
}
}
-
WPF中的步行机器人系列-第1部分:三角形,矩形和立方体
2021-04-02 19:15:23有关如何使用C#代码在WPF中制作动画3D机器人的系列文章的第一部分 -
WPF之路——绘制几何图形
2013-11-26 19:00:24为简化上面xaml,wpf提供了路径语法解析器,由 Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" /> LineSegment对 利用LineSegment对象创建直线对象 ... -
WPF实现五角星绘制(可绘制半颗五角星)修改一个错误
2013-07-19 12:29:53对资源:http://download.csdn.net/detail/yysyangyangyangshan/5743911 和http://download.csdn.net/detail/yysyangyangyangshan/5738491 修改一个bug,支持控件的绑定。 文章:... -
wpf_绘画圆形.zip
2020-08-12 18:07:40实现了在画布上绘画三角形,正方形,直线,五角星,等形状的图形,代码简洁易懂,使用方便,使用Canvas画布。 -
WPF使用Blend
2022-05-19 16:11:33纯粹是了为了摸索和学习,所以进行记录。 1.打开Blend建立一个项目 2.拖动3个按钮(3个好看一点,其实一个按钮操作也是一样的 ) 3.建立动画,点击新建 这里选择了Grid,也就是应用下面3个按钮。... -
WPF中InkCanvas画图
2015-08-27 09:05:15vs2010内使用WPF的InkCanvas控件内画图,可以画直线,虚线,箭头,矩形,椭圆,三角形 -
WPF XAML 画线
2018-08-13 14:23:53--三角形线头--> StrokeThickness="8"> <!--竖线--> <Line X1="200" Y1="10" X2="200" Y2="500" Stroke="Red" StrokeDashArray="10" StrokeThickness="9"></Line> <!--渐变线--> ... -
[C#]WPF 3D 绘制一个正方体并调整视场角
2022-04-10 15:51:17大部分源码参考Github,是一本名为WPF-3D的书的代码,有条件的可以买下实体书。 文章目录xml写法调整相机视场角cs写法 xml写法 若只是希望新建一个下面这样简单的3D图形,那么只需修改xml就能实现。 其主要分为两个... -
WPF实现背景灯光随鼠标闪动效果
2020-12-30 08:53:43本文实例为大家分享了WPF实现背景灯光随鼠标闪动的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:将容器分割成组合三角形Path,鼠标移动时更新每个三角形的填充颜色。 步骤: 1、窗体xaml 只需放置一个... -
WPF中的简单水动画
2019-05-01 11:53:00WPF中的简单水动画 原文https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前(80年代中期),我在一家拥有Silicon Graphics工作站的公司工作。在旨在展示SGI机器高端图形的... -
InkCanvas-WPF.rar
2021-09-26 15:17:21WPF inkCanvas实现画板功能,画直线,箭头直线,虚线,三角形,圆形,长方形,平行四边形,并可以改变图形背景色和边框色 -
wpf 鼠标拖动绘制几何图形
2021-12-26 15:27:25最近在学习wpf,简单的使用Button控件创建了一个绘制自由线条,直线,矩形和圆形的绘制,学习事件不多,所以只是使用控件完成的这些功能,没有使用类来进行编辑(如果使用类的话可以实现更多功能,像选中已经绘制的... -
WPF绘制简单常用的Path
2018-05-24 16:20:00原文:WPF绘制简单常用的Path 写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值... -
WPF 绘画板,编写了一些基础功能
2018-11-20 11:26:23这个DEMO包含的内容: 1、WPF调用摄像头识别二维码; 2、WPF绘画板 可绘制 2.1、可变圆形 2.2、可变矩形 2.3、文字 2.4、图片 2.5、空实心圆形 2.6、空实心三角形 2.7、空实心五角星 下载麻烦给五星好评、谢谢 -
利用border画一个黑色的三角形
2021-12-06 17:10:01利用border的四个角和transparent属性来绘制三角形 -
WPF Charts控件库的全面扩展(最新20161006)
2016-10-06 18:57:1911、对LineDataPoint样式进行了设计,现在可以选择线图的点样式(如空心圆、五角星、三角形,矩形等),同时这些不同的点样式可以体现在Legend上,从而实现颜色和图形的双重区分。 总而言之,微软的控件库做得很标准... -
WPF 实现自定义的笔迹橡皮擦
2021-03-15 16:02:39本文来告诉大家使用比较底层的方法来实现 WPF 的笔迹橡皮擦 在 WPF 里面,对于笔迹来说,应该放在 Stroke 类里面,而不是作为点的集合存储。在 Stroke 类里面将作为管理笔迹的类提供笔迹的渲染和橡皮擦等功能。咱... -
【前端小技巧】用border画三角形和梯形
2021-12-09 22:10:22在复习 CSS 基础的时候,我被一个网友的奇思妙想震惊了,居然可以用 border 来画三角形。在此之前,我都只是用 border 来打框框的。-.-!! 正文 我们比较常规的用法,就是用 border 属性来设置边框,如下所示: ... -
WPF 3D
2021-07-25 12:57:55WPF 3D开发基础知识 坐标系 Coodinate System WPF中二维图形的坐标系将原点定位在呈现区域(通常是屏幕)的左上角。 在二维系统中,x 轴上的正值朝右,y 轴上的正值朝下。而在三维坐标系中,原点位于呈现区域的... -
WPF Charts控件库的全面扩展(最新20161117)
2016-11-17 14:38:5911、对LineDataPoint样式进行了设计,现在可以选择线图的点样式(如空心圆、五角星、三角形,矩形等),同时这些不同的点样式可以体现在Legend上,从而实现颜色和图形的双重区分。 12、对饼图的标签排布进行了深度扩展... -
WPF特效系列简介
2020-09-04 15:49:22WPF(Windows Presentation Foundation) 是微软推出的用于构建桌面客户端应用程序的 UI 框架,集成了矢量图形,丰富的流动文字支持,3D视觉效果和强大无比的控件模型,这使得开发人员和设计人员可以创建更好的视觉... -
Canvas绘制三角形
2020-03-29 18:55:51canvas画出的三角形和矩形一样,也分为填充三角形和描边三角形。通过beginPath开始画图到closePath结束画图。使用moveTo作为起始点,lineTo连接各点 -
使用canvas绘制一个三角形
2020-10-12 16:15:37绘制一个三角形的例子: <template> <div class> <canvas id="tutorial2" width="150" height="150"></canvas> </div> </template> <script> export default { ... -
【前端小技巧】利用border画三角形及梯形
2018-03-27 13:46:441.设置一个边border有颜色,设置旁边两条边border颜色透明,不设置对边border,三角形指向无设置边的方向(如6,7情况) 2.设置一个边border有颜色,设置旁边1条边border颜色透明,其他两条边border不设置(如8情况,...