silverlight:贝塞尔曲线
时间:2022-04-23
本文章向大家介绍silverlight:贝塞尔曲线,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Silverlight并没有象flash那样直接提供画线、画圆、画曲线的方法,只能用Path来生成贝塞尔曲线。
下面是示例代码:
XAML部分:
<UserControl x:Class="SLCurveSample.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:DesignHeight="400" d:DesignWidth="400">
<Canvas x:Name="LayoutRoot" Background="White">
<Ellipse Width="10" Height="10" StrokeThickness="1" Stroke="Red" x:Name="point1"></Ellipse>
<TextBlock Text="Left Point" Name="tbLeftPoint" Visibility="Collapsed"></TextBlock>
<Ellipse Width="10" Height="10" StrokeThickness="1" Stroke="Red" x:Name="point2"></Ellipse>
<TextBlock Text="Right Point" Name="tbRightPoint" Visibility="Collapsed"></TextBlock>
<Path Stroke="Red" StrokeThickness="1" x:Name="p" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure>
<PathFigure.Segments>
<BezierSegment />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</UserControl>
Xaml.cs部分:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace SLCurveSample
{
public partial class MainPage : UserControl
{
Point _leftPoint = new Point();
Point _rightPoint = new Point();
BezierSegment seg = null;
public MainPage()
{
InitializeComponent();
this.Loaded += PageLoaded;
}
void PageLoaded(object sender, RoutedEventArgs e)
{
this.SizeChanged += PageSizeChanged;
this.MouseMove += PageMouseMove;
this.Loaded -= PageLoaded;
}
void PageMouseMove(object sender, MouseEventArgs e)
{
Point mousePos = e.GetPosition(this);
//根据鼠标的位置对线条粗细、左右圈圈大小做一些交互
double scale = Math.Abs(_leftPoint.Y - mousePos.Y) / _leftPoint.Y;
point1.Width = point1.Height = 10 + 40 * scale;
point2.Width = point2.Height = point1.Width;
p.StrokeThickness = 3 - 2 * scale;
//重绘
Draw();
//计算二个控制点的位置
Point ctlPoint1 = new Point() { X = (mousePos.X + _leftPoint.X) * 0.5, Y = (mousePos.Y + _leftPoint.Y) * 0.5 };
Point ctlPoint2 = new Point() { X = (mousePos.X + _rightPoint.X) * 0.5, Y = (mousePos.Y + _rightPoint.Y) * 0.5 };
if (seg != null)
{
seg.Point1 = ctlPoint1;//贝兹曲线的第一个控制点
seg.Point2 = ctlPoint2;//贝兹曲线的第二个控制点
}
}
void PageSizeChanged(object sender, SizeChangedEventArgs e)
{
Draw();
}
void Draw()
{
double _stageWidth = this.ActualWidth;
double _stageHeight = this.ActualHeight;
double _margin = 80;
//将二个小圈定位于左右二侧
point1.SetValue(Canvas.TopProperty, _stageHeight * 0.5);
point1.SetValue(Canvas.LeftProperty, _margin);
point2.SetValue(Canvas.TopProperty, _stageHeight * 0.5);
point2.SetValue(Canvas.LeftProperty, _stageWidth - _margin);
//计算左侧小圈的中心
_leftPoint.X = (double)point1.GetValue(Canvas.LeftProperty) + point1.Width * 0.5;
_leftPoint.Y = (double)point1.GetValue(Canvas.TopProperty) + point1.Height * 0.5;
tbLeftPoint.SetValue(Canvas.LeftProperty, _leftPoint.X - 20);
tbLeftPoint.SetValue(Canvas.TopProperty, _leftPoint.Y + 10);
//计算右侧小圈的中心
_rightPoint.X = (double)point2.GetValue(Canvas.LeftProperty) + point2.Width * 0.5;
_rightPoint.Y = (double)point2.GetValue(Canvas.TopProperty) + point2.Height * 0.5;
tbRightPoint.SetValue(Canvas.LeftProperty, _rightPoint.X - 20);
tbRightPoint.SetValue(Canvas.TopProperty, _rightPoint.Y + 10);
PathFigure figure = (p.Data as PathGeometry).Figures[0];
figure.StartPoint = _leftPoint;//设置(贝兹曲线的)起点
seg = figure.Segments[0] as BezierSegment;
seg.Point3 = _rightPoint;//贝兹曲线的终点
}
}
}
以上的代码,先在Canvas中放置了一段Path,然后在后台去动态修改贝塞尔曲线的控制点,并加入了与鼠标的一些简单交互。更详细的原理也可参见我之前记录的Flash/Flex学习笔记(20):贝塞尔曲线
运行截图:
- 以后去Vero Moda买衣服,可以问会“看脸”的AI导购了
- Tensorflow新手通过PlayGround可视化初识神经网络
- [大数据之Spark]——快速入门
- [大数据之Spark]——Actions算子操作入门实例
- [大数据之Spark]——Transformations转换入门经典实例
- 字符串的排列
- 斐波那契额数列及青蛙跳台阶问题
- 在Mac OS X上配置Apache2
- 合并两个排序的链表
- 还有5天,你的比特币最重要的孩子UB-UBTC 可能就永远不属于你了
- Spark SQL 用户自定义函数UDF、用户自定义聚合函数UDAF 教程(Java踩坑教学版)
- Webpack多入口文件、热更新等体验
- 从hello world 解析程序运行机制
- 万达大量员工“被”辞职?曲德君回应:万达网科没有倒
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下安装或升级Python 2.7的操作方法
- Linux中git用https连接时不用每次输入密码的方法
- Centos7.3 RabbitMQ分布式集群搭建示例
- Ubuntu16.04环境下搭建FTP服务器的教程
- Linux 查看空间使用情况的实例详解
- CentOS 6.8 安装vsftpd的方法步骤
- centos7下搭建ZooKeeper3.4中间件常用命令小结
- Linux性能测试 pmap命令详解
- Linux7.7设置交换分区SWAP的方法
- 在Linux里安装和启动nginx的方法
- Linux下如何对ISO文件编辑的方法示例
- Linux中创建新用户并赋予指定目录的相关权限
- Linux服务器下安装配置Nginx的教程
- Linux文件目录结构(小白版)
- 基于Linux中vnc配置端口号的修改方法