Question

我目前是javascript的初学者并学习画布。我很想知道是否有人会解释为什么如果你从右向左向后退，它会显示输入中的负数。无论如何都要显示矩形的实际大小，无论你在哪个方向绘制它？

这是JS小提琴。 https://jsfiddle.net/asn6wzw4/2/

HTML

    id time_point event exp_recode
 1:  1          1     b          b
 2:  1          2     b          b
 3:  1          3     c          c
 4:  1          4     z          z
 5:  1          5     0          0
 6:  1          6     0          0
 7:  2          1     e          e
 8:  2          2     b          b
 9:  2          3     z          z
10:  2          4     0          0

JS

<form id="areaform">
<label for="wid">Width:</label>
<input id="wid" type="number">
<label for="hgt">Height:</label>
<input id="hgt" type="number">
<br/>
<label for="area1">Area:</label>
<output id="area"></output>
<br/>
<label for="perimeter1">Perimeter:</label>
<output id="perim"></output>
<br/>
<button onclick="getarea()" type="button">Get Area</button>
</form>

<div id="drawRectangle">
<canvas id="rectCanvas"  width=500 height=500></canvas>
</div>

Answer 1

在这里可以看到关于为什么当你向下和向右显示负片的答案的第一部分：

https://www.w3schools.com/graphics/canvas_coordinates.asp

画布明确指出左上角是（0,0），因此向下将始终为负。

要回答你的第二个问题，＆＃34;你能否确保它总是积极的，＆＃34;你可以轻松地对所有数字做一个绝对值，以确保它们始终是正数。

Answer 2

Math.min和Math.max

对于矩形，您可以将坐标设为

const rect = {
    top : 0, 
    left : 0,
    width : 0,  // these two have to be positive for this to make any sense
    height : 0,
}

如果您的坐标不受控制，即您在获取值时不知道哪个是顶部或左侧，则需要转换它们。

以下是对上述rect结构的简单转换

rect.left = Math.min(startX, endX);
rect.top = Math.min(startY, endY);
rect.width = Math.max(startX, endX) - rect.left;
rect.height = Math.max(startY, endY) - rect.top;

你的宽度和高度总是正的，左上角总是左上角。

数学最小值和最大值如下工作

Math.min(a,b) //returns the smallest number from the arguments a,b
Math.max(a,b) //returns the largest number from the arguments a,b

他们可以采取许多论点

Math.max(a,b,c,d); // get largest of a,b,c,d

或数组

var numbers = [10,20,30,183,1823,1,10];
Math.min(...numbers); // will return 1

Answer 3

当然，只需在结果计算中使用Math.abs()：

var width  = Math.abs(endX - startX);
var height = Math.abs(endY - startY);

原因是您通常先使用终点计算宽度/高度，然后减去起点：

        START       END
        10          30

END - START = 20

但是，当您的终点在起点之前开始时，该值会反转：

 END    START
 2      10

END - START = -8

使用ABS无论如何都会使值为正。

＆＃13;

var ctx = c.getContext("2d");
var startX = 200, startY = 150, endX, endY;

ctx.font = "16px sans-serif";
window.onmousemove = function(e) {
  endX = e.clientX;
  endY = e.clientY;
  var width = endX - startX;
  var height = endY - startY;
  var absWidth = Math.abs(width)
  var absHeight = Math.abs(height);
  
  ctx.clearRect(0,0,c.width,c.height);
  ctx.strokeRect(startX, startY, width, height);
  
  ctx.fillText("W: " + absWidth + " H: " + absHeight, 10, 20);
};

＆＃13;

body {margin:0}
canvas {background:#ccc}

＆＃13;

<canvas id=c width=400 height=300></canvas>

＆＃13;

如果你只是想阻止它在负面时绘制，你会改为限制值：

var width = endX - startX;
var height = endY - startY;

if (width < 0) width = 0;
if (height < 0) height = 0;

矩形允许0个值，但如果是这样，最好跳过绘图步骤：

if (width && height) /* draw rectangle */

注意：要计算正确的鼠标位置，请参阅this answer。

如何在画布中停止负面绘制矩形？

3 个答案:

Math.min和Math.max