我是使用HTML5 Canvas的新手，并且正在尝试构建图像注释工具。由于感兴趣的区域可以是正方形或矩形的任意尺寸，因此我想绘制一个平行四边形。我已经使用了github page中的代码。此页面上的代码仅允许在页面上绘制一个平行四边形，并且在绘制另一个平行四边形之前必须重新设置页面。这就是我想要更改的地方，其中我想要一种在同一画布上绘制多个平行四边形的工具。
我的适应方法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>parallelogram</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas>
</body>
</html>
<script type="text/javascript">
//Declare all the variables
var first = {x: null, y: null};
var second = {x: null, y: 0};
var third = {x: null, y: null};
var fourth = {x: null, y: null};
var parallels = [];
var newRect;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pointsNum = 0;
//Code that draws a point on the canvas
var drawpoint = function (x, y) {
ctx.clearRect(0, 0, 11, 11);
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.arc(x, y, 4.5, 0, Math.PI * 2, false);
ctx.stroke();
}
//Code that connects two points on the canvas
var drawLine = function (pointone, pointwo) {
ctx.beginPath();
ctx.strokeStyle = 'purple';
ctx.moveTo(pointone.x, pointone.y);
ctx.lineTo(pointwo.x, pointwo.y);
ctx.stroke();
}
//Code that calculates fourth coordinate
var fourthCoordsCal = function () {
var restxfs = second.x - first.x;
fourth.x = third.x - restxfs;
var restyfs = second.y - first.y;
fourth.y = third.y - restyfs;
}
//Code that draws all the lines
var drawParrall = function () {
drawLine(first, second);
drawLine(second, third);
drawLine(third, fourth);
drawLine(fourth, first);
}
//Code that get the center point of parallelogram - not very important at this point
var parrallCenterCal = function () {
center.x = (first.x + second.x + third.x + fourth.x) / 4;
center.y = (first.y + second.y + third.y + fourth.y) / 4;
}
// calculate area of parallelogram - not very important at this point
var parrallAreaCal = function () {
area = Math.abs(((first.x * second.y - first.y * second.x) + (second.x * third.y - second.y * third.x) + (third.x * fourth.y - third.y * fourth.x) + (fourth.x * first.y - fourth.y * first.x)) / 2);
}
// calculate length of a line between two points
var plength = function (P1x, P2x, P1y, P2y) {
return Math.sqrt((P1x - P2x) * (P1x - P2x) + (P1y - P2y) * (P1y - P2y));
}
// tigger fourth point coords calculator
var TriggerfourthCoordsCal = function () {
if (first.x != null && second.x != null && third.x != null) {
fourthCoordsCal();
parallels.push(newRect);
}
}
// tigger parallelogram draw
var TriggerDrawParrall = function () {
if (first.x != null && second.x != null && third.x != null && fourth.x != null) {
drawParrall();
}
}
// get min value with its key of an array
var arrayMin = function (arr) {
var len = arr.length, min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
var minkey = len;
}
}
return [minkey, min];
}
// a callback that move point and redraw a new shape when mousemove event exists
var MovePoint = function (e) {
if (checkPointsExist()) {
var len = [];
len[1] = plength(e.pageX, first.x, e.pageY, first.y);
len[2] = plength(e.pageX, second.x, e.pageY, second.y);
len[3] = plength(e.pageX, third.x, e.pageY, third.y);
len[4] = plength(e.pageX, fourth.x, e.pageY, fourth.y);
var minlengthArray = arrayMin(len);
if (minlengthArray[1] < 13) {
if (minlengthArray[0] == 1) {
first.x = e.clientX;
first.y = e.clientY;
} else if (minlengthArray[0] == 2) {
second.x = e.clientX;
second.y = e.clientY;
} else if (minlengthArray[0] == 3) {
third.x = e.clientX;
third.y = e.clientY;
}
ctx.clearRect(0, 0, width, height);
drawpoint(first.x, first.y);
drawpoint(second.x, second.y);
drawpoint(third.x, third.y);
}
}
}
var onMouseUp = function (event) {
document.body.removeEventListener("mousemove", MovePoint);
document.body.removeEventListener("mouseup", onMouseUp);
}
// trigger moving of a point on mousedown and move, stopped it when mouseup
var TriggerMovePoint = function () {
document.body.addEventListener("mousedown", function (event) {
document.body.addEventListener("mousemove", MovePoint);
document.body.addEventListener("mouseup", onMouseUp);
});
}
// check if four points coords exist
var checkPointsExist = function () {
if (first.x != null && second.x != null && third.x != null && fourth.x != null) {
return true
}
return false;
}
canvas.addEventListener("click", function (e) {
pointsNum++;
if (pointsNum <= 3) {
switch (pointsNum) {
case 1:
first.x = e.pageX;
first.y = e.pageY;
TriggerDrawParrall();
break;
case 2:
second.x = e.pageX;
second.y = e.pageY;
TriggerDrawParrall();
break;
case 3:
third.x = e.pageX;
third.y = e.pageY;
TriggerfourthCoordsCal();
newRect = TriggerDrawParrall();
parallels.push(newRect);
pointsNum == 0;
}
drawpoint(e.pageX, e.pageY);
}
});
</script>
如何在同一画布上绘制多个平行四边形？
我尝试声明两个带有数组的变量parallels和newRect。我的addEventListener('click'在画布TriggerfourthCoordsCal()上的最后一行绘制了平行四边形。我尝试将newRect对象推到parallels数组并清除参数。