通過單擊畫布上的兩個點繪製矩形

Question

我試圖通過單擊畫布上的兩個點來繪製矩形。我需要獲取第一個點的x，y座標，使用strokeRect在第二個點擊上繪製矩形。

這是我迄今爲止......裸露在我這是業餘小時在這裏。

感謝任何建議/輸入..

var rectangle = 0; 

function plot_pt(event){ 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
if(rectangle==1){ 
    ctx.moveTo(clx, cly); 
    clx = event.clientX-c.offsetLeft; 
    cly = event.clientY-c.offsetTop; 
if(rectangle != 0){ 
rectangle++; 
} else { 
ulx = event.clientX-c.offsetLeft; 
uly = event.clientY-c.offsetTop; 
ctx.beginPath(); 
ctx.moveTo(ulx, uly); 
ctx.strokeRect(50, 50, 120, 140); 
ctx.stroke(); 

Answer 1

這是您需要的。只需要妥善處理你的條件。

var rectangle = 0; 
 

 
function plot_pt() { 
 
    debugger 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    if (rectangle == 0) { 
 
    clx = event.clientX - c.offsetLeft; 
 
    cly = event.clientY - c.offsetTop; 
 
    ctx.moveTo(clx, cly); 
 
    rectangle++; 
 
    } else { 
 
    ulx = event.clientX - c.offsetLeft; 
 
    uly = event.clientY - c.offsetTop; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(ulx, uly); 
 
    ctx.strokeRect(clx, cly, ulx - clx, uly - cly); 
 
    ctx.stroke(); 
 
    rectangle = 0; 
 
    } 
 
}

canvas{ 
 
border:2px solid black; 
 
}

<canvas id="myCanvas" height="400" width="400" onclick="plot_pt()"></canvas>

如果你需要有固定的只是改變ctx.strokeRect(clx, cly, ulx - clx, uly - cly);到ctx.strokeRect(clx, cly, ulx - clx, 100);或你想要的高度，也同樣寬度的高度。 希望它有幫助。

Answer 2

你需要的第一件事是讓click.You的位置需要找到top和clickleft值。 爲此，您可以使用javascript或jquery。

這是代碼。

$('.clickable').bind('click', function (ev) { 
 
    var $div = $(ev.target); 
 
    var $display = $div.find('.display'); 
 
    
 
    var offset = $div.offset(); 
 
    var x = ev.clientX - offset.left; 
 
    var y = ev.clientY - offset.top; 
 
    
 
    $display.text('x: ' + x + ', y: ' + y); 
 
});

.clickable { 
 
    border: 1px solid #333; 
 
    background: #eee; 
 
    height: 200px; width: 200px; 
 
    margin: 15px; 
 
    position: absolute; 
 
} 
 
.display { 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    top: 50%; margin-top: -8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='clickable'> 
 
<span class='display'></span> 
 
</div>

後，現在你可以很容易地在畫布上繪製矩形的座標。

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.rect(x,y,width,height); 
ctx.stroke(); 

Answer 3

工程就像一個魅力。你想什麼：

$(document).ready(function() { 
 

 
    const canvas = document.getElementById('myCanvas'); 
 
    let ctx = canvas.getContext('2d'); 
 

 
    let firstClick = true; 
 

 
    let firstX, firstY; 
 
    $(canvas).click(function(e) { 
 
    if (firstClick) { 
 
     ({ 
 
     x: firstX, 
 
     y: firstY 
 
     } = getMousePos(canvas, e)); 
 

 
     $('#firstX').html(firstX); 
 
     $('#firstY').html(firstY); 
 

 
     firstClick = false; 
 
    } else { 
 
     let { 
 
     x: secondX, 
 
     y: secondY 
 
     } = getMousePos(canvas, e); 
 

 
     let width = secondX - firstX; 
 
     let height = secondY - firstY; 
 
     ctx.strokeRect(firstX, firstY, width, height); 
 

 
     $('#secondX').html(secondX); 
 
     $('#secondY').html(secondY); 
 
     $('#width').html(width); 
 
     $('#height').html(height); 
 

 
     firstClick = true; 
 
    } 
 

 
    }); 
 

 
    function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
     x: evt.clientX - rect.left, 
 
     y: evt.clientY - rect.top 
 
    }; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
</canvas> 
 
<p><span id="firstX"></span>, <span id="firstY"></span></p> 
 
<p><span id="secondX"></span>, <span id="secondY"></span></p> 
 
<p><span id="width"></span>, <span id="height"></span></p>