d3.js画圆弧和圆的坐标、弧长计算方法

JavaScript022

d3.js画圆弧和圆的坐标、弧长计算方法,第1张

svg路径画圆的特性:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。

rx,ry: 是椭圆的两个半轴的长度。

x-axis-rotation: 是椭圆相对于坐标系的旋转角度,角度数而非弧度数。

large-arc-flag: 是标记绘制大弧(1)还是小弧(0)部分。

sweep-flag: 是标记向顺时针(1)还是逆时针(0)方向绘制。

x,y: 是圆弧终点的坐标。

已知两点和半径求弧路径。

已知圆上两点和半径求弧长。

已知圆上的y轴半径和圆心求相交的x轴坐标。

已知圆上的x轴半径和圆心求y轴坐标。

你可以用添加/删除覆盖物这个API试试// 百度地图API功能var map = new BMap.Map("allmap")var point = new BMap.Point(116.404, 39.915)map.centerAndZoom(point, 15)var marker = new BMap.Marker(new BMap.Point(116.404, 39.915))// 创建点var polyline = new BMap.Polyline([new BMap.Point(116.399, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) //创建折线var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})//创建圆var polygon = new BMap.Polygon([new BMap.Point(116.387112,39.920977),new BMap.Point(116.385243,39.913063),new BMap.Point(116.394226,39.917988),new BMap.Point(116.401772,39.921364),new BMap.Point(116.41248,39.927893)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) //创建多边形var pStart = new BMap.Point(116.392214,39.918985)var pEnd = new BMap.Point(116.41478,39.911901)var rectangle = new BMap.Polygon([new BMap.Point(pStart.lng,pStart.lat),new BMap.Point(pEnd.lng,pStart.lat),new BMap.Point(pEnd.lng,pEnd.lat),new BMap.Point(pStart.lng,pEnd.lat)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) //创建矩形//添加覆盖物function add_overlay(){map.addOverlay(marker) //增加点map.addOverlay(polyline) //增加折线map.addOverlay(circle) //增加圆map.addOverlay(polygon) //增加多边形map.addOverlay(rectangle)//增加矩形}//清除覆盖物function remove_overlay(){map.clearOverlays()}不过这需要三角函数,关于三角函数可以去看一下《揭秘javascript的三角函数》这篇文章,那里面对三角函数讲得很清楚了。参考资料:《揭秘javascript的三角函数》来自:http://www.tulingit.cn/?p=320