Question

我是HTML5的Javascript和Canvas的新手。我必须完成一个项目，在该项目中，我必须通过单击三个鼠标来绘制平行四边形。

单击1：开始平行四边形的第一行。

点击2：第一行的结尾。

点击3：当用户从第二点击点向上或向下拖动鼠标时，应沿着鼠标移动从第二点击点绘制一条线，同时应从第一次点击绘制第三条线平行于第二条线。在画布上第三次单击时，平行四边形应完整，即应从第二条线绘制到第三条线。

我被困在Click 3上。虽然我从概念上理解该如何完成……在过去的一周中……我没有做太多的事情。以下是我的代码：

<Window.Resources>
    <Style  x:Key="MyTabControl" TargetType="{x:Type TabControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border Name="Border" BorderThickness="1,1,1,0" 
                            BorderBrush="Gainsboro" 
                            CornerRadius="4,4,0,0" Margin="2,0">
                        <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  ContentSource="Header"
                                                  Margin="10,2"/>

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightSkyBlue"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="White"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

var canvas, context;
var dragging = false;
var dragStartLocation;
var dragStopLocation;
var dragThirdLocation;
var beginFourthLine;
var snapshot;
var pointsNum;

//Get mouse click coordinates
function getCanvasCoordinates(event) {
  var x = event.clientX - canvas.getBoundingClientRect().left;
  var y = event.clientY - canvas.getBoundingClientRect().top;
  return {
    x: x,
    y: y
  };
}


//save the canvas original state
function takeSnapShot() {
  snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

//restore the canvas original state
function restoreSnapShot() {
  context.putImageData(snapshot, 0, 0);
}


//draw a point on mouse click
function drawPoint(position) {
  context.beginPath();
  context.lineWidth = 3;
  context.strokeStyle = '#f4d03f';
  context.arc(position.x, position.y, 5.5, 0, Math.PI * 2, false);
  context.stroke();
}

//draw a line on mouse move
function drawLine(position) {
  context.beginPath();
  context.moveTo(dragStartLocation.x, dragStartLocation.y);
  context.lineTo(position.x, position.y);
  context.stroke();
}

//start the event with first mouse click
function dragStart(event) {
  dragging = true;
  dragStartLocation = getCanvasCoordinates(event);
  drawPoint(dragStartLocation);
  console.log(dragStartLocation.x, dragStartLocation.y);
  takeSnapShot();
}

//draw a line along with the mouse move from the first click
function drag(event) {
  var position;
  if (dragging === true) {
    restoreSnapShot();
    position = getCanvasCoordinates(event);
    drawLine(position);
  }
}

//draw the third and fourth coordinates - this is where I am stuck 
function drawThirdCoord(event) {
  dragging = true;
  var beginFourthLine = dragStopLocation.x - dragStartLocation.x;
  restoreSnapShot();
  dragThirdLocation = getCanvasCoordinates(event);
  drawLine(event);
  drawLine(beginFourthLine);
}

//stop the mouse movement and drawing line.
function dragStop(event) {
  dragging = false;
  restoreSnapShot();
  var position = getCanvasCoordinates(event);
  dragStopLocation = position;
  drawLine(position);
  drawPoint(position);
  console.log(dragStopLocation.x, dragStopLocation.y);
  drawThirdCoord(event);
}



function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  context.strokeStyle = 'green';
  context.lineWidth = 6;
  context.lineCap = "round";

  canvas.addEventListener('mousedown', dragStart, false);
  canvas.addEventListener('mousemove', drag, false);
  canvas.addEventListener('mouseup', dragStop, false);

}

window.addEventListener('load', init, false);

Answer 1

我不确定鼠标拖动的工作方式，因此我尝试使代码尽可能靠近问题。因此，您需要拖动第一行，然后单击以结束形状。

<!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> 
   <p id="status"> | </p>
</body>
</html>

<script type="text/javascript">
var canvas, context;
var dragging = false;
var startLocation;
var dragStartLocation;
var dragStopLocation;
var dragThirdLocation;
var snapshot;
var pointsNum = 0;
var d = {x:0, y:0};

//Get mouse click coordinates
function getCanvasCoordinates(event) {
  var x = event.clientX - canvas.getBoundingClientRect().left;
  var y = event.clientY - canvas.getBoundingClientRect().top;
  return {x: x, y: y};
}


//save the canvas original state
function takeSnapShot() {
  snapshot = context.getImageData(0,0,canvas.width, canvas.height);
}

//restore the canvas original state
function restoreSnapShot() {
  context.putImageData(snapshot,0,0); 
}


//draw a point on mouse click
function drawPoint(position) {
  context.beginPath();
  context.arc(position.x, position.y, 5.5, 0, Math.PI * 2, false);
  context.stroke();
}

//draw a line on mouse move
function drawLine(start, end) {
  context.beginPath();
  context.moveTo(start.x, start.y);
  context.lineTo(end.x, end.y);
  context.stroke();
}

//start the event with first mouse click
function dragStart(event) {
  dragging = true;
  dragStartLocation = getCanvasCoordinates(event);
  drawPoint(dragStartLocation);
  pointsNum++;
  takeSnapShot(); 
  if (pointsNum == 1) startLocation = dragStartLocation;
}

//draw a line along with the mouse move from the first click
function drag(event) {
  var position;
  if (snapshot && pointsNum && pointsNum < 3) {
    restoreSnapShot();
    position = getCanvasCoordinates(event);
    drawLine(dragStartLocation, position);
    drawPoint(position);
    if (pointsNum == 2) drawFourthCoord(position)
  }
}

//stop the mouse movement and drawing line.
function dragStop(event) {
    dragging = false;
    restoreSnapShot();
    var position = getCanvasCoordinates(event);
    dragStopLocation = position;
    drawPoint(dragStopLocation);
    pointsNum++;
    drawLine(dragStartLocation, dragStopLocation);
    takeSnapShot();
    d = {
      x: dragStartLocation.x - dragStopLocation.x,
      y: dragStartLocation.y - dragStopLocation.y
    };
    dragStartLocation = position;
    if (pointsNum > 3) pointsNum =0;
}

//draw the fourth coordinate
function drawFourthCoord(position) {
  var p = {
    x: position.x + d.x, 
    y: position.y + d.y
  };
  drawLine(position, p);
  drawPoint(p);
  drawLine(startLocation, p);
}

function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  context.lineCap = "round";
  context.lineWidth = 3;
  context.strokeStyle = '#f4d03f';
  canvas.addEventListener('mousedown', dragStart, false);
  canvas.addEventListener('mousemove', drag, false);
  canvas.addEventListener('mouseup', dragStop, false);
}

window.addEventListener('load', init, false);

</script>

绘制平行四边形HTML5画布

1 个答案: