WPF如何绘制光滑连续贝塞尔曲线示例代码

1.需求

WPF本身没有直接把点集合绘制成曲线的函数。可以通过贝塞尔曲线函数来绘制。  

贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。当然在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。

贝塞尔曲线类是:BezierSegment,三次贝塞尔曲线,通过两个控制点来控制开始和结束方向。

QuadraticBezierSegment,二次贝塞尔,通过一个控制点来控制弯曲方向。

本文使用的是三次。

图片来源维基百科

2.思路

大值思路是根据当前点,前一个点,后一个点,再后一个点。共四个点,来生成一条三次贝塞尔曲线。

曲线需要(开始点,结束点,控制点1,控制点2),图中标识的两个红色点即是控制点。

代码主要是计算两个红色的控制点。

先计算相邻点的中点【橙色】。

再将中点的连线平移到相邻的位置【蓝色点】,取得虚线,得到虚线的端点【红色】。

红色,即为控制点。

3.主要代码

/// <summary>
 /// 获得贝塞尔曲线
 /// </summary>
 /// <param name="currentPt">当前点</param>
 /// <param name="lastPt">上一个点</param>
 /// <param name="nextPt1">下一个点1</param>
 /// <param name="nextPt2">下一个点2</param>
 /// <returns></returns>
 private BezierSegment GetBezierSegment(Point currentPt, Point lastPt, Point nextPt1, Point nextPt2)
 {
  //计算中点
  var lastC = GetCenterPoint(lastPt, currentPt);
  var nextC1 = GetCenterPoint(currentPt, nextPt1); //贝塞尔控制点
  var nextC2 = GetCenterPoint(nextPt1, nextPt2);
  //计算相邻中点连线跟目的点的垂足
  //效果并不算太好,因为可能点在两个线上或者线的延长线上,计算会有误差
  //所以就直接使用中点平移方法。
  //var C1 = GetFootPoint(lastC, nextC1, currentPt);
  //var C2 = GetFootPoint(nextC1, nextC2, nextPt1);
  //计算“相邻中点”的中点
  var c1 = GetCenterPoint(lastC, nextC1);
  var c2 = GetCenterPoint(nextC1, nextC2);
  //计算【"中点"的中点】需要的点位移
  var controlPtOffset1 = currentPt - c1;
  var controlPtOffset2 = nextPt1 - c2;
  //移动控制点
  var controlPt1 = nextC1 + controlPtOffset1;
  var controlPt2 = nextC1 + controlPtOffset2;
  //如果觉得曲线幅度太大,可以将控制点向当前点靠近一定的系数。
  controlPt1 = controlPt1 + 0 * (currentPt - controlPt1);
  controlPt2 = controlPt2 + 0 * (nextPt1 - controlPt2);
  var bzs = new BezierSegment(controlPt1, controlPt2, nextPt1, true);
  return bzs;
 }

效果图如下:

4.源码下载

http://xiazai.jb51.net/201804/yuanma/WPF-BezierSegment(jb51.net).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • WPF如何绘制光滑连续贝塞尔曲线示例代码

    1.需求 WPF本身没有直接把点集合绘制成曲线的函数.可以通过贝塞尔曲线函数来绘制. 贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的.当然在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等. 贝塞尔曲线类是:BezierSegment,三次贝塞尔曲线,通过两个控制点来控制开始和结束方向. QuadraticBezierSegment,二次贝塞尔,通过一个控制点来控制弯曲方向. 本文使用的是三次. 图片来源维

  • WPF实现好看的Loading动画的示例代码

    实现思路 框架使用大于等于.NET40: Visual Studio 2022; 项目使用 MIT 开源许可协议: 老板觉得公司系统等待动画转圈太简单,所以需要做一个稍微好看点的,就有这篇等待RingLoading动画 最外层使用Viewbox为父控件内部嵌套创建三组 Grid -> Ellipse . Border分别给它们指定不同的Angle从左侧开始 -135 225 54,做永久 Angle 动画: PART_Ring1.RotateTransform.Angle从From -135 到

  • python绘制BA无标度网络示例代码

    如下所示: #Copyright (c)2017, 东北大学软件学院学生 # All rightsreserved #文件名称:a.py # 作 者:孔云 #问题描述: #问题分析:.代码如下: import networkx as ne #导入建网络模型包,命名ne import matplotlib.pyplot as mp #导入科学绘图包,命名mp #BA scale-free degree network graphy BA=ne.barabasi_albert_graph(50,1)

  • 使用Python绘制台风轨迹图的示例代码

    参考: 1.Basemap绘制中国地图 2.Basemap生成的图中绘制轨迹 使用CMA热带气旋最佳路径数据集,对我国周边的台风进行绘制 import re import os import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.basemap import Basemap path=r"E:\Computer Science\数学建模\第二次模拟赛题\附件" files= os.listdir(pa

  • OpenCV绘制圆端矩形的示例代码

    目录 功能函数 测试代码 测试效果 本文主要介绍了OpenCV绘制圆端矩形的示例代码,分享给大家,具体如下: 功能函数 // 绘制圆端矩形(药丸状,pill) void DrawPill(cv::Mat mask, const cv::RotatedRect &rotatedrect, const cv::Scalar &color, int thickness, int lineType) { cv::Mat canvas = cv::Mat::zeros(mask.size(), CV

  • python绘制字符画视频的示例代码

    目录 读取视频 转为字符 动画 已经11月了,不知道还有没有人看华强买瓜...要把华强卖瓜做成字符视频,总共分为三步 读取视频 把每一帧转为字符画 把字符画表现出来 读取视频 通过imageio读取视频,除了pip install imageio之外,还需要pip install imageio-ffmpeg. 由于视频中的图像都是彩色的,故而需要将rgb三色转为单一的强度,并将转化后的图像装入一个列表中. import imageio import numpy as np import mat

  • 通过Python绘制冰墩墩的示例代码

    目录 效果 基础绘制圆 基础彩色填充形状 冰墩墩代码 效果 基础绘制圆 基础知识: forward(x):将笔向前移动 x 个单位. right(x):将笔顺时针旋转角度 x. left(x):将笔逆时针旋转角度 x. penup():停止绘制海龟笔. pendown():开始绘制海龟笔. backward(x):将笔向后移动 x 单位. circle(radius):此函数以“海龟”位置为中心,绘制一个给定半径的圆. 画半径为50的圆: import turtle # 初始化 t = turt

  • WPF实现文本描边+外发光效果的示例代码

    解决思路: (1)描边效果可以将文本字符串用GDI+生成Bitmap,然后转成BitmapImage,再用WPF的Image控件显示. (2)外发光效果用WPF自带的Effect实现 代码: using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Text; using System.IO; namespace TextHighLighthDemo { public clas

  • WPF实现环(圆)形菜单的示例代码

    目录 前言 实现代码 1.CircularMenuItemCustomControl.cs 2.CircularMenuItemCustomControlStyle.xaml 3.MainWindow.xaml 4.MainWindow.xaml.cs 前言 需要实现环(圆)形菜单. 效果预览(更多效果请下载源码体验): 实现代码 1.CircularMenuItemCustomControl.cs using System; using System.Collections.Generic;

  • WPF模拟实现Gitee泡泡菜单的示例代码

    WPF实现 Gitee泡泡菜单 框架使用大于等于.NET40: Visual Studio 2022; 项目使用 MIT 开源许可协议: 需要实现泡泡菜单需要使用Canvas画布进行添加内容: 保证颜色随机,位置不重叠: 点击泡泡获得当前泡泡的值: 实现代码 1) BubblleCanvas.cs 代码如下: using System.Windows; using System.Windows.Controls; using WPFDevelopers.Helpers; using WPFDev

随机推荐