comment dessiner un polygone sur une toile avec des clics de souris? Pure JS

Question

J'ai besoin de dessiner un polygone sur ma toile mais je dois le faire avec des clics de souris. Par exemple: cliquez sur un clic deux arbre et ainsi ... max de dix clics et apper une ligne pour remplir tous les points cliqués. 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(); 
} 

Answer 1

Tout ce que vous avez à faire est d'ajouter un gestionnaire d'événements mousedown. Dans mousedown, placez les coordonnées de la souris dans le tableau de coordonnées [].

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>