canvas绘制曲线,WPF绘制光滑连续贝塞尔曲线

 

绘制曲线有几种思路:

1.需求

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

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

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

本文使用的是三次。

永利皇宫 1

 

图片来源维基百科

1、通过quadraticCurveTo(controlX, controlY, endX,
endY)方法来绘制二次曲线
2、通过bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX,
endY)方法,来绘制贝塞尔曲线
3、通过画圆的方法arc(x, y, radius, startAngle, endAngle,
antiClockwise)来取得某一段圆弧,作为要画出的曲线

2.思路

参考文档是:

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

永利皇宫 2

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

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

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

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

红色,即为控制点。

1、二次曲线quadraticCurveTo

quadraticCurveTo(cpx,cpy,x,y) 
  二次曲线也称二次贝塞尔曲线或圆锥曲线或圆锥截线,是直圆锥面的两腔被一平面所截而得的曲线。当截面不通过锥面的顶点时,曲线可能是圆、椭圆、双曲线、抛物线。当截面通过锥面  的顶点时,曲线退缩成一点、一直线或二相交直线。在截面上的直角坐标系(x,y)之下,这些曲线的方程是x,y的二元二次方程

  • 参数1:控制点x
  • 参数2:控制到y
  • 参数3:结束点x
  • 参数4:结束点y

数学公式表示如下:

永利皇宫 ,二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:

永利皇宫 3

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta 
charset="utf-8">
<title>canvas直线</title>
<meta 
name="Keywords" content="">
<meta name="author" 
content="@my_programmer">
<style type="text/css">
body, 
h1{margin:0;}
canvas{margin: 
20px;}
</style>
</head>
<body 
onload="draw()">
<h1>二次贝塞尔曲线</h1>
<canvas id="canvas" 
width=200 height=200 style="border: 1px solid 
#ccc;"></canvas>
<script>
function draw() {
var 
canvas=document.getElementById('canvas');
var 
context=canvas.getContext('2d');
//绘制起始点、控制点、终点 
context.beginPath(); 

context.moveTo(20,170); 
context.lineTo(130,40); 

context.lineTo(180,150); 
context.stroke(); 
//绘制2次贝塞尔曲线 
context.beginPath(); 
context.moveTo(20,170); 

context.quadraticCurveTo(130,40,180,150); 
context.strokeStyle = "red"; 

context.stroke(); 

}
</script>
</body>
</html>

代码效果:

永利皇宫 4

网站地图xml地图