Question

请原谅我对几何/数学术语不熟悉。图像将更好地描述我想要完成的任务：

Triangle Example

我想取一个三角形，例如左边的一个三角形，并从中生成一条路径，例如右边的路径。每个三角形都将伴有亮度值，可用于确定着色线的频率。

路径上的前两个点应该代表三角形的一边，但最后一个点不一定需要落在三角形的第三个点上（尽可能接近）。

我正在尝试在javascript中完成此操作，但框架或库特定的解决方案并不重要。我希望有人可以指出一些想法/概念，这些想法/概念将帮助我理解几何并设计算法。

由于

Answer 1

一项有趣的练习。这是我使用纯Javascript的解决方案。

基本上我们计算两个线方程（A-> C和B-> C）。然后将它们分成适当数量的步骤。然后在我们沿着这两条线前后来回绘制折线。

// 'pts' is a 3x2 array ([3][2]) for the three triangle points
// 'step' is the approximate step distance between lines
function makeTriangle(pts, step)
{
    var  ax = pts[0][0];
    var  ay = pts[0][1];
    var  bx = pts[1][0];
    var  by = pts[1][1];
    var  cx = pts[2][0];
    var  cy = pts[2][1];

    // Get AC line length
    var  a_dx = cx - ax,
         a_dy = cy - ay;
    var  ac_len = Math.sqrt(a_dx * a_dx + a_dy * a_dy);
    // Get BC line length
    var  b_dx = cx - bx,
         b_dy = cy - by;
    bc_len = Math.sqrt(b_dx * b_dx + b_dy * b_dy);

    // Whichever line is shortest will determine the number of steps
    var  len = (ac_len < bc_len) ? ac_len : bc_len;

    // ac step amounts
    a_dx = step * a_dx / len;
    a_dy = step * a_dy / len;

    // bc step amounts
    b_dx = step * b_dx / len;
    b_dy = step * b_dy / len;

    var  poly = [];
     // first two points
    poly.push(ax);
    poly.push(ay);
    poly.push(bx);
    poly.push(by);
    while (len > step) {
        // step along the ac and bc lines
        ax += a_dx;
        ay += a_dy;
        bx += b_dx;
        by += b_dy;
        // add the line going from the bc line to the ac line
        poly.push(bx);
        poly.push(by);
        poly.push(ax);
        poly.push(ay);
        len -= step;
        if (len < step) break;
        // step again
        ax += a_dx;
        ay += a_dy;
        bx += b_dx;
        by += b_dy;
        // add line going back again
        poly.push(ax);
        poly.push(ay);
        poly.push(bx);
        poly.push(by);
        len -= step;
    }
    poly.push(cx);
    poly.push(cy);

    // Now we have all our points, build the SVG element
    var  svg = document.getElementById("mysvg");

    var  tri = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    tri.setAttribute("fill", "none");
    tri.setAttribute("stroke", "black");
    tri.setAttribute("stroke-width", 4);
    tri.setAttribute("points", poly.join(","));
    svg.appendChild(tri);
}


makeTriangle([[117,0],[255,159],[2,279]], 15);

Demo here

如何将这个SVG三角形变成一个＆＃34;游荡＆＃34;路径表示？

1 个答案: