在SVG路径中获取切点

时间:2018-08-22 12:52:32

标签: javascript jquery d3.js

我要优化关于特定点处路径的切角的函数 有没有一种方法可以优化此代码 但在大道路上并没有优化 我希望这可以在短时间内与大型svg路径配合使用

function getTangent(pathNode, point){

    var line_path = pathNode;
    var length_at_point = 0,
            total_length = line_path.getTotalLength();
    while ((Math.trunc(
            line_path.getPointAtLength(length_at_point).x) != Math.trunc(point[0]) || 
            Math.trunc(line_path.getPointAtLength(length_at_point).y) != Math.trunc(point[1])) && 
            length_at_point < total_length) {
        length_at_point++;
    };

    var point = line_path.getPointAtLength(length_at_point),
            prev = {},
            next = {},
            delta = {};


    if (length_at_point > 1 && length_at_point < (total_length - 1)) {
        prev = line_path.getPointAtLength(length_at_point - 1);
        next = line_path.getPointAtLength(length_at_point + 1);
        delta = {
            x: next.x - prev.x,
            y: next.y - prev.y
        }
    } else {

        // don't worry about the first and last pixel or so
        return;
    };

    var LENGTH = 700; // length of tangent line

    return {
        id:'tangent'
        , "stroke-width":0.5
        , stroke:'rgb(6,120,155)'
             , x1:(point.x - delta.x * LENGTH)
             , y1:(point.y - delta.y * LENGTH)
             , x2:(point.x + delta.x * LENGTH)
             , y2:(point.y + delta.y * LENGTH)

            };
}

0 个答案:

没有答案