首页 > 语言 > JavaScript > 正文

使用js画图之画切线

2024-05-06 14:47:35
字体:
来源:转载
供稿:网友

样例:http://www.zhaojz.com.cn/demo/draw9.html

代码如下:
//画切线
//point 圆外的一点
//dot 圆心
//r 半径
function drawCircleTangent(point, dot, r){
    //画辅助线-start
    var color = 'DarkRed'; //切线的颜色
    var color2 = "#ccc"; //其它辅助线的颜色
    drawLine(dot, [dot[0]+9*r,dot[1]], {color: color2}); // 延长圆心所在的水平线
    drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // 画出圆心所在的垂直线
    drawPoint({
        pw:2,ph:2,color:'DarkRed',point: [dot[0]+9*r,dot[1],'x']
    });
    drawPoint({
        pw:2,ph:2,color:'DarkRed',point: [dot[0],dot[1]-4*r,'y']
    });
    drawLine(point, [point[0],dot[1]], {color: color2}); // 画point到x轴的垂直线
    drawLine(point, dot, {color: color2}); // 连接point与dot
    drawLine([point[0]-2*r, point[1]], [point[0]+2*r, point[1]], {color: color2}); //画point所在的水平线
    //画辅助线-end
    //point.push('point');
    drawPoint({
        pw:2,ph:2,color:'DarkRed',point: point
    });
    //dot.push('centre');
    var r_square = Math.pow(r,2); // r的平方
    var point_v = point[1]-dot[1]; //point到x轴的距离的平方
    var point_h = point[0]-dot[0]; //point到y轴的距离的平方
    var c_square = Math.pow(point_v,2) + Math.pow(point_h,2); //point到圆心的距离的平方
    var c = Math.sqrt(c_square); //point到圆心的距离
    var sinA = Math.abs(point_v)/c; //sinA
    var cosA = Math.abs(point_h)/c; //cosA
    var b_square = c_square-r_square; //point到切点的距离的平方
    var b = Math.sqrt(b_square); //point到切点的距离
    var sinB = b/c; //sinB
    var cosB = r/c; //cosB
    //以圆心为坐标圆点,确定point所在的象限
    var quadrant  = 1; //默认值
    var pm_h = point_h == 0? point_h: point_h/Math.abs(point_h); //水平方向
    var pm_v = point_v == 0? point_v: point_v/Math.abs(point_v); //垂直方向
    var hv = pm_h*pm_v; //相乘,-1时point在一三象限,+1时point在二四象限,0时point在轴上
    switch(hv){
        case 1:
            if((pm_h+pm_v)==-2){

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选