캔버스에서 두 점을 클릭하여 직사각형을 그립니다.

Question

캔버스에서 두 점을 클릭하여 사각형을 그립니다. 첫 번째 점의 x, y 좌표를 가져와야하며, 두 번째 클릭시 사각형을 그릴 strokeRect를 사용해야합니다.

여기에 내가 지금까지 가지고있는 것이있다. 나와 벌거 벗은 채로 아마추어 시간이다. 당신이해야 할 첫 번째 일은이 click.You의 위치를 ​​얻을 수 있습니다

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

여기가 필요합니다. 그냥 당신이 제대로 처리 할 필요가 있습니다.

그냥 ctx.strokeRect(clx, cly, ulx - clx, 100);-ctx.strokeRect(clx, cly, ulx - clx, uly - cly); 또는 원하는 높이를 변경하고 유사 또한 폭 고정 높이를해야하는 경우

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>

. 도움이 되길 바랍니다.

Answer 2

조언/입력

덕분에 .. top 및 click에 left 값을 찾아야합니다. 그게 최선 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>