主页 / 问题 / 1548851
Accepted
Mikhail Krivosheev
Asked:2023-10-31 13:50:10 +0000 UTC2023-10-31 13:50:10 +0000 UTC

如何继续一条线并获取其终点的坐标？

  • 772

沿轴有一个坐标系X и Y。例如，我们以493宽度和94高度来获取画布的宽度。根据以下 2 点坐标绘制一条直线：

x1 y1 x2 y2:
84 90 389 75

这条直线的角度将是-16.015905961155084

问题：
在给定线的当前角度的情况下，如何将这条线延伸到画布的末端？以及如何以当前角度从画布的起点到该线的起点绘制一条线？然后你需要得到 2 个点，第一个点是这条新的大线的起点，最后一个点是它的终点。画布本身是 SVG 格式。

我找到了一个远程示例，说明如何完成此操作，Canvas但没有获得最后一行的最终坐标： https: //codepen.io/yazmeyaa/pen/mdvPwYj

为了更好地理解该任务，我将附上一些屏幕截图，说明为什么需要这样做：

在此输入图像描述

需要在图表上绘制一条白线，其末端分别向右和向左形成适当的角度。并按照以下原则完成绘制：

在此输入图像描述

javascript

1 个回答

  1. Best Answer

    如果你确定直线会落入垂直边缘，那么从三角形的相似度来写就足够了

    y_left = y1 + (y2-y1)*(-x1)/(x2-x1)
y_right = y1 + (y2-y1)*(width-x1)/(x2-x1)

    一般情况下，可以将直线写成参数形式，并求出下面射线末端朝向第二点的解（第二个交点同理）

    //параметрические уравнения прямой для справки
//x = x1 + dx * t
//y = y1 + dy * t

dx = x2 - x1
dy = y2 - y1

//возможные границы
if dx > 0 then
   bx = width
else
   bx = 0

if dy > 0 then
   by = height
else
   by = 0

//проверим на вертикаль/горизонталь
if dx = 0 then
    return ix = x1,  iy = by

if dy = 0 then
    return iy = y1,  ix = bx

//в общем случае считаем параметры, при которых будет пересечение с гор/верт ребром
tx = (bx - x1) / dx
ty = (by - y1) / dy

//и выбираем меньший параметр
if tx <= ty then
   ix = bx
   iy = y1 + tx * dy
else
   iy = by
   ix = x1 + ty * dx

return ix, iy

    添加：问题作者处理双向行扩展的代码

    function drawLineToEdges(x1, y1, x2, y2, width, height) {
  let dx = x2 - x1;
  let dy = y2 - y1;
  let bxRight, bxLeft;
  let byTop, byBottom;
  let ixRight, iyRight;
  let txRight, tyRight;
  let ixLeft, iyLeft;
  let txLeft, tyLeft;

  if (dx > 0) {
    bxRight = width;
    bxLeft = 0;
  } else {
    bxRight = 0;
    bxLeft = width;
  }

  if (dy > 0) {
    byTop = height;
    byBottom = 0;
  } else {
    byTop = 0;
    byBottom = height;
  }

  if (dx === 0) {
    ixRight = x1;
    iyRight = Math.min(byTop, height);
    ixLeft = x1;
    iyLeft = Math.max(byBottom, height);
  } else if (dy === 0) {
    iyRight = y1;
    ixRight = Math.min(bxRight, width);
    iyLeft = y1;
    ixLeft = Math.max(bxLeft, 0);
  } else {
    txRight = (bxRight - x1) / dx;
    tyRight = (byTop - y1) / dy;

    txLeft = (bxLeft - x1) / dx;
    tyLeft = (byBottom - y1) / dy;

    if (txRight <= tyRight) {
      ixRight = bxRight;
      iyRight = y1 + txRight * dy;
    } else {
      iyRight = byTop;
      ixRight = x1 + tyRight * dx;
    }

    if (txLeft <= tyLeft) {
      ixLeft = bxLeft;
      iyLeft = y1 + txLeft * dy;
    } else {
      iyLeft = byBottom;
      ixLeft = x1 + tyLeft * dx;
    }
  }

  return { x1: ixLeft, y1: iyLeft, x2: ixRight, y2: iyRight };
}
    • 1

相关问题