キャンバス上の2つの点をクリックして矩形を描く

Question

キャンバス上の2つの点をクリックして矩形を描画しようとしています。最初の点のx、y座標を取得する必要があり、2回目のクリックで矩形を描画するために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

これは必要なものです。ちょうどあなたが適切に条件を処理する必要があります。

あなただけ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

あなたが必要がある最初の事はclickにtopとleft値を見つける必要があるclick.Youの位置を取得することです。 最高のために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>