如何通过起点和终点绘制矩形？答案

【问题标题】：How to draw a rectangle by start point and end point?如何通过起点和终点绘制矩形？
【发布时间】：2017-12-27 04:58:39
【问题描述】：

现在我可以通过宽度和高度的起点绘制一个矩形。

context.strokeStyle = "red";
context.beginPath();
context.rect(startX, startY, width, height);
context.stroke();

我的问题可以用 , startX, startY, EndX, EndY 绘制吗？

【问题讨论】：

你是什么意思？所以我可以直接使用 rect(startX, startY, endX, endY) 在画布上画一个矩形？
不，当然不能，因为 rect 方法不能那样工作。但是您可以轻松编写自己的函数来获取这些值并计算调用 rect 所需的值。
你的意思是像画4条线把它们放在一起？
还是不明白，真的很抱歉。你能显示一些代码吗？
对不起大家。这真的是一个简单的数学。我现在真的需要一杯咖啡。

标签： javascript html canvas

【解决方案1】：

只需编写您自己的函数来为您绘制矩形。如果你有两个点(x1 , y1) 和(x2, y2)，那么宽度是 x 的差值，所以 x2 - x1，高度是 y 的差值，所以 y2 - y1。

使用这个，你的函数可能是这样的：

function drawRect(x1, y1, x2, y2){
    context.beginPath();
    context.rect(x1, y1, x2 - x1, y2 - y1);
    context.stroke();
}

或者，如果您不想使用函数，只需执行以下操作：

context.rect(x1, y1, x2 - x1, y2 - y1)

【讨论】：

【解决方案2】：

试试这个。希望这会有所帮助。

func rectFromStartAndEnd(_ startPoint:CGPoint, endPoint: CGPoint) -> CGRect
{
  var  top, left, bottom, right: CGFloat;
  top = min(startPoint.y, endPoint.y)
  bottom = max(startPoint.y, endPoint.y)

  left = min(startPoint.x, endPoint.x)
  right = max(startPoint.x, endPoint.x)

  let result = CGRect(x: left, y: top, width: right-left, height: bottom-top)
  return result
}

【讨论】：