模拟圆规-内容输出

最近接到了一个需求，使用JS制作一个圆规课件

功能如下：

图1
图2

图1和图2 分析

最开始的想法是 使用斜率 k=tanα=(y1-y2)/(x1-x2) 来时时的计算倾斜角来控制圆规的三部分运动；

可是后来我发现，我想多了：

• 圆规的三部分不是直线运动而是抛物线
• 还有一个最关键的点就是，常规的数学坐标系是从左下方开始的，而前端的坐标系默认是从左上方开始的

所以我必须转换思路

机智的我想想到了一个极简的想法，不管他是曲线运动还是什么斜率，无非逃不出一个界定的范围，运动什么的都让代码自行事项吧。

1. 首先是记录圆规的三部分的初始坐标和倾斜角
2. 其次是利率圆规的三部分的最大范围的坐标和倾斜角
3. 拉伸范围是固定的，我们可以计算出圆规被拖动的距离的比例
4. 在拉伸的时候时时改变圆规的三部分的最大范围的坐标和倾斜角的比例

这样就完成了图1和图2的需求

效果如下：图3

图3

接下来来到了画圆的环节了

效果如下：

图4

首先是画圆

这个画圆可是让我选择了好久，我的方案有这么几种：

序号	方案	采用与否的原因
1	直接用 JS 生成 Dom元素 往页面里不断push就行	不可行 生成Dom太多了 不太好
2	使用css boder 滚动（类似圆形进度条）	可行 备选状态 但是它消耗页面性能
3	使用canvas 画圆	尝试 感觉不可行(使用style 动态改变画布宽高是 内部画出来的圆是椭圆形) 有明显锯齿 需要优化
4	使用svg 画圆	目前采用的是这个方案

！！！ 但是使用 svg circle 画圆他默认是顺时针旋转的 这里我用了一个骚操作 使用 transform:scaleY(-1); 使svg 水平镜像翻转。

<svg id="svg" :style="svgCss">
 <circle class="path" 
  stroke="hotpink" // 划线的颜色
  fill="none"  // 填充颜色
  stroke-width="1%" // 划线的宽度  可以使用百分比这是太棒了
  cx="50%" // 圆心X轴位置
  cy="50%" // 圆心Y轴位置
  r="49.5%" //圆的半径
 />
</svg>

stroke-dasharray: 360%; //展示比例
stroke-dashoffset: 360%; //绘画比例

后续还需使用 Math.atan2 来时时计算倾斜度 来进行拖动画圆