如何在画布上用鼠标点击绘制多边形？纯JS [英] how to draw polygon on canvas with mouse clicks? Pure JS

问题描述

我需要在我的画布上绘制一个多边形，但是我需要点击鼠标。例如：点击一个单击两棵树，所以...最多十次点击和apper一行填充所有点击的点。 Pure JS。

  function drawPolygon（position，sides，angle）{
 var coordinates = []，
 radius = Math.sqrt（Math.pow（（dragStartLocation.x  -  position.x），2）+ Math.pow（（dragStartLocation.y  -  position.y），2）），
 index = 0; 
 
 for（index = 0; index< sides; index ++）{
 coordinates.push（{x：dragStartLocation.x + radius * Math.cos（angle），y：dragStartLocation。 y  -  radius * Math.sin（angle）}）; 
 angle + =（2 * Math.PI）/ sides; 
} 
 
 context.beginPath（）; 
 context.moveTo（coordinates [0] .x，coordinates [0] .y）; 
 for（index = 1; index< sides; index ++）{
 context.lineTo（coordinates [index] .x，coordinates [index] .y）; 
} 
 
 context.closePath（）; 
} 
  

解决方案

添加mousedown事件处理程序。在mousedown中，将鼠标坐标推入coordinate []数组。

  var canvas = document.getElementById（canvas）; var context = canvas.getContext（2d）; var cw = canvas.width; var ch = canvas.height; function reOffset（）{var BB = canvas.getBoundingClientRect（）; offsetX = BB.left; offsetY = BB.top; } var offsetX，offsetY; reOffset（）; window.onscroll = function（e）{reOffset（）; } context.lineWidth = 2; context.strokeStyle ='blue'; var coordinates = []; var isDone = false; $（'＃done'）。click（function（）{isDone = true;}）; $（ #canvas）。mousedown（function（e）{handleMouseDown（e）;}）; function handleMouseDown（e）{if（isDone || coordinates.length> 10）{return;}告诉我们正在处理的浏览器这个事件e.preventDefault（）; e.stopPropagation（）; mouseX = parseInt（e.clientX-offsetX）; mouseY = parseInt（e.clientY-offsetY）; coordinates.push（{x：mouseX，y：mouseY}）; drawPolygon（）;} function drawPolygon（）{context.clearRect（0,0，cw，ch）; context.beginPath（）; context.moveTo（coordinates [0] .x，coordinates [0] .y）; for（index = 1; index< coordinates.length; index ++）{context.lineTo（coordinates [index] .x，coordinates [index] .y）; } context.closePath（）; context.stroke（）;}  

  body {background-color ：象牙} #canvas {border：1px solid red;}  

  ; script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< h4>点击可分配多边形顶点< / h4> ;< button id = done>当完成分配点时点击< / button>< br>< canvas id =canvaswidth = 300 height = 300>< / canvas>  pre> 

I need to draw a polygon on my canvas but i have to make it with clicks of mouse. For exemple: click one click two tree and so... max of ten clicks and apper a line to fill all clicked points. Pure JS.

function drawPolygon(position, sides, angle) {
    var coordinates = [],
        radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
        index = 0;

    for (index = 0; index < sides; index++) {
        coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
        angle += (2 * Math.PI) / sides;
    }

    context.beginPath();
    context.moveTo(coordinates[0].x, coordinates[0].y);
    for (index = 1; index < sides; index++) {
        context.lineTo(coordinates[index].x, coordinates[index].y);
    }

    context.closePath();
}

解决方案

All you have to do is add a mousedown event handler. In mousedown, push the mouse coordinates into the coordinates[] array.

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

context.lineWidth=2;
context.strokeStyle='blue';

var coordinates = [];
var isDone=false;

$('#done').click(function(){
  isDone=true;
});

$("#canvas").mousedown(function(e){handleMouseDown(e);});

function handleMouseDown(e){
  if(isDone || coordinates.length>10){return;}

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  coordinates.push({x:mouseX,y:mouseY});
  drawPolygon();
}

function drawPolygon(){
  context.clearRect(0,0,cw,ch);
  context.beginPath();
  context.moveTo(coordinates[0].x, coordinates[0].y);
  for(index=1; index<coordinates.length;index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
  }
  context.closePath();
  context.stroke();
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click to assign polygon vertices</h4>
<button id=done>Click when done assigning points</button>
<br><canvas id="canvas" width=300 height=300></canvas>

这篇关于如何在画布上用鼠标点击绘制多边形？纯JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！