白板通常会提供多种工具类型，每种工具的用途也各不相同，如下表：工具名称及用途方框选择工具方框选择其他图形涂鸦toolsGraffitiEraser擦除画笔痕迹或图形的工具Laserpointertool激光笔straightlinetool画直线Arrowtool画箭头rectangletool画矩形ellipsetool画椭圆texttool插入文字区分处理工具类型在白板上的表示，这项工作会面临很多条件判断，所以我们会用一些算法来辅助我们判断是否满足条件，根据不同的条件执行不同的动作，从而得到一张不同的图片呈现在白板上。例如：在白板中，我们经常使用碰撞检测算法来辅助判断以下几种情况：-框选工具是否框选了图形，选择了哪些图形？-鼠标选中的图形是空心的还是填充的？-图形是否相交/切割？-等到我们最终一步步拆解这些检测算法时，我们会发现它们的实现往往会用到一些我们熟悉的函数和方程：三角函数、勾股定理、圆的标准方程等，如果是一个动画用语还包括重力加速度、平均速度、抛物线等。那么今天我们就主要说一下函数和方程在白板上的一些简单的应用场景吧！复习：什么是笛卡尔坐标系、三角函数、勾股定理、圆的标准方程？在哪些情况下应用这些函数和方程式？实战直接坐标系通常我们接触到的直角坐标系的Y轴是向上的，但是由于前端渲染机制是从左上角开始，到右下角结束，所以前面的Y轴端坐标系全部向下。绘制两个相互垂直且在平面内有共同原点的数轴。横轴为X轴，纵轴为Y轴。这样，我们就说在平面上建立了一个平面笛卡尔坐标系，简称笛卡尔坐标系。又分为第一象限、第二象限、第三象限和第四象限。从右上角开始计数（逆时针方向）。毕达哥拉斯定理毕达哥拉斯定理，常用于数学和几何，是一个基本的几何定理，意思是直角三角形两条边的平方和等于斜边的平方。公式：a2+b2=c2应用场景在白板中，我们经常用勾股定理来：计算两个坐标点之间的距离计算两个图形是否相交（相切）判断坐标是否在圆上高阶：计算物理movementVelocitytrigonometricfunctions三角函数是数学学科中的初等函数，通常定义在平面笛卡尔坐标系中。三角函数看似很复杂，公式也很多，但都是可以相互推导出来的。我们在研究圆的标准方程时会发现，三角函数结合勾股定理也可以推导出圆的标准方程。首先我们看一下几个简单常用的三角函数在几何和直角坐标系下的实现：sideb/斜边ccosθ=x/r正切函数tanA=对边a/相邻边btanθ=y/x根据上图，我们应该能很快回忆起来：数学老师是第一个上讲台的sin和cos的读法让人忍俊不禁，还有对边比邻边、邻边比对边等一系列催眠公式。再来看看三角函数的定义：任意一组角之间的映射和一组可变的比率。那么用我的话来说：知道两条边，求出两条边之间的夹角知道了一条边和这条边的夹角，在上面的基础上求出夹角的另一边，我们要举一反三，互相推演。应用场景在白板中，我们经常使用三角函数来：绘制箭头，计算旋转角度。圆的标准方程。圆的两个基本概念：圆心和半径。圆心坐标为圆的定位条件，半径为圆的设置条件。当圆心坐标和半径确定后，圆在直角坐标系中的位置和大小也就确定了。圆心的坐标为(a,b)，r为圆的半径。公式：(x-a)2+(y-b)2=r2应用场景在白板中，我们经常会用圆的标准方程来判断坐标是否在圆上。实战演练针对的是以上函数和表达式。为了避免过于枯燥，我在下面举了几个例子。也可以举一反三，慢慢推导：计算两个图形是否相交（切）画箭头笔（签字笔、钢笔、画笔）通常我们会组合多个函数和方程，相互配合来实现一个功能或实现一个算法。比如我们需要结合物理学的速度计算公式和数学的勾股定理来计算两点之间的距离（在平面直坐标系下）。计算两个图形是否相交（切）白板相交判断通常有两种：一种是外接矩形判断法，另一种是外接圆判断法。为了保证真实性，我们通常对近似圆形的图形采用外接圆判定法，否则采用外接矩形判定法。外接矩形确定方法和外接圆确定方法都可以使用圆心确定方法来实现。不同的是，对于一个圆，只需要判断两个圆心的距离是否小于两个圆的半径之和即可。对于一个矩形，需要确定两个矩形的中心。points:x轴的距离是否小于两个矩形宽度之和的1/2Y轴的距离是否小于两个矩形高度之和的1/2定心法的实质是计算两点（中心）之间的距离。画箭头要画箭头，我们需要用到勾股定理和三角函数。这里我们以在直线的末端画一个箭头为例，其实现步骤如下：第一步，我们需要从点A(x0,y0)画一条直线到点B(x1,y1)第二步，设置箭头的headlen长度和箭头与上一步的夹角θ。第三步，计算这条线与X轴正方向的夹角。这里我们使用atan2函数，可以计算出原点(0,0)到(x,y)的距离）为该点的线段与x-正方向的平面夹角（以弧度为单位）轴。我们把A(x0,y0)作为原点(0,0)，即原点A(x0,y0)到B(x1,y1)的线段与正方向的平面夹角(弧度)x轴值）并将其转换为度数。//将弧度转换为度数constangle=Math.atan2(y1-y0,x1-x0)*180/Math.PI;第四步，推断出箭头的左右（上下）边和X轴的正方向根据步骤3，我们可以计算出箭头两侧斜线之间的平面夹角（弧度值）箭头和x轴的正方向。已知箭头与直线的夹角θ是固定的。另外，已知直线与X轴正方向的夹角，只需减去或加上θ，即箭头两边斜线与正方向的平面夹角x轴的方向。可以在箭头的末端画一条延长线（如下图），箭头上方（下图左侧）的角度为π+α-θ，箭头下方的角度（下图右侧）图）是π+α+θ。下面是一个代码示例：//箭头的左角constangle1=(angle-theta)*Math.PI/180;//右箭头的角度constangle2=(angle+theta)*Math.PI/180;//计算右箭头的坐标点consttopX=headlen*Math.cos(angle1);consttopY=headlen*Math.sin(angle1);//计算左箭头的坐标点constbotX=headlen*Math.cos(angle2);constbotY=headlen*Math.sin(angle2);最后，我们计算了箭头的两个关键坐标：(topx,topy)和(botx,boty)。更详细的介绍请移步这里。在开始介绍Bifeng之前，推荐一个第三方库points-on-curve，它将一系列坐标点转换成易于查看的Bifeng（svg或canvas），还提供了很多丰富的配置，点击查看细节。下面说说画笔描边的实现。最常见的步骤如下：着陆点是一个圆圈。通过计算笔刷移动的距离和时间得到笔刷的速度，并根据速度设置笔刷的粗细。使用二次贝塞尔曲线或者三次贝塞尔曲线绘制，笔刷粗细逐渐变细（可以根据笔的种类自由发挥：钢笔、毛笔、签字笔等）这里只讲解如何实现笔划效果很简单，更多的实现方法在文末的参考文献中也有提供。我们来看看如何绘制从点A(x0,y0)到点B(x1,y1)的笔画。第一步是通过勾股定理计算两点AB之间的距离。//计算两点在X轴上的距离constx=x1-x0;//计算两点在Y轴上的距离consty=y1-y0;//计算两点之间的直线距离consts=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));第二步通过速度计算公式计算两点之间的移动距离Speed一般我们会在白板上记录每个坐标的绘制时间，这样我们就可以很方便的计算出从A点到B点的时间t。应用速度计算公式，我们可以计算出从A画到B的速度v。//速度计算公式速度v=距离s/时间t第三步，根据速度调整画笔的粗细。最后根据转速，再根据变速比，算出转速多少变粗，多少则变细。除了上面我介绍的一些场景，白板上还有很多其他的场景，比如：图形旋转-使用矩阵变换的公式动画-抛物线、匀速运动、加速运动、重力加速度等。本文的目的只是一个介绍。虽然大部分讲的都是2D平面上的应用，但是3D纬度上的一些知识还是有用的。想必有些同学已经挠了挠手，准备试一试了。欢迎留言、转发、评论。参考文献笛卡尔坐标系-百度百科三角函数-百度百科勾股定理-百度百科圆的标准方程-百度百科箭头的绘制
