画布通过锚点将矩形与矩形连接起来

Posted 2023-02-26

【中文标题】画布通过锚点将矩形与矩形连接起来

【英文标题】：canvas connect rectangle with rectangle by anchor points

【发布时间】：2018-06-20 11:19:09

【问题描述】：

我创建了一个画布来绘制。我画了一些矩形对象

class Rectangle extends Shape
    constructor(posTopLeft, width, height)
    const halfWidth = width * 0.5;
    const halfHeight = height * 0.5;

    super(width, height, new Position(posTopLeft.x + halfWidth, posTopLeft.y + halfHeight)); // set width, height and center position

    this.centerLeftPosition = new Position(this.centerPosition.x - halfWidth, this.centerPosition.y);
    this.centerRightPosition = new Position(this.centerLeftPosition.x + width, this.centerLeftPosition.y);
    this.centerTopPosition = new Position(this.centerPosition.x, this.centerPosition.y - halfHeight);
    this.centerBottomPosition = new Position(this.centerPosition.x, this.centerTopPosition.y + height);

    this.topLeftPosition = posTopLeft;
    this.bottomLeftPosition = new Position(this.topLeftPosition.x, this.topLeftPosition.y + height);
    this.topRightPosition = new Position(this.topLeftPosition.x + width, this.topLeftPosition.y);
    this.bottomRightPosition = new Position(this.topRightPosition.x, this.bottomLeftPosition.y);
  

我还想在一个矩形到另一个矩形之间画一条线。

class Lane
    constructor(startRect, targetRect)
       this.startRect = startRect;
       this.targetRect = targetRect;
  

如果车道试图计算最短路径，如何通过车道连接这两个矩形？

表示如果一个矩形正好在另一个矩形上方，则车道将从第一个矩形的中心底部到第二个矩形的中心顶部。

如果第一个矩形在左侧，第二个在右侧，则车道将从另一个矩形的右侧中心到左侧中心。

【问题讨论】：

检查所有可能的连接并找到最短的

【参考方案1】：

只需计算一个矩形的每个点到另一个矩形的每个点的距离，然后对列表进行排序并取最短的一个

因此，例如，您将有两个列表，一个用于矩形中的所有点 - 现在您遍历第一个列表，并为每个点计算到另一个矩形的所有点的距离

rectangle1[].foreach(function(point) 
distances.push(getDistance(point, point));
);

然后你只需distances.sort() 得到最短的一个

要知道哪个是您可以保存一个包含其他点的坐标或名称的距离的对象，或者您制作一本字典，在其中保存与哪些名称对应的距离 - 对于后一个您只需要处理多个点的距离分别相等的情况，而对于第一个点，您可能不能只对42, pointA: [32,12], pointB: [42, 64] 之类的东西进行排序，因此您必须编写一个收集距离然后执行此操作的函数

最后都是一样的，希望能帮到你，干杯