Javascript - 幅と高さのパーセンテージを使用してキャンバスに描画する

Question

私はキャンバスの幅と高さ全体を占める背景イメージを持ち、イメージ上の別の場所を参照できるようにしたいので、画像内のそれらの点で円を描くので、私は視覚的に正しい場所を確認することができます。私は私のマウスクリックのリスナーイベントに次のコードで、私はドットを描きたい場所でマウスをクリックすることでこれをやっている

：

var rectCanvas = canvas.getBoundingClientRect(); 
var positionX = Math.round(((e.clientX - rectCanvas.left)/canvas.width * 100) * 1000)/1000; 
var positionY = Math.round(((e.clientY - rectCanvas.top)/canvas.height * 100) * 1000)/1000; 

//alert(positionX + ", " + positionY); 

alert("Width\nPosition: " + (e.clientX - rectCanvas.left) + "\nPercentage Position: " + positionX + "\nBack to position: " + percentToPxHor(positionX)); 

は、私は次のルーチンは、宣言している：

function percentToPxHor(intPx) { 
    return intPx * canvas.width/100; 
} 

function percentToPxVert(intPx) { 
    return intPx * canvas.height/100; 
} 

背景画像の注目すべき機能をクリックすると、わかりやすい値が得られます。

幅が
ポジション：532.5
割合ポジション：53.091戻る
位置へ：532.50273

このことから、私ははっきりと伝えることができます例えば、画像全体で約半分をクリックすると、と私を促し幅のパーセンテージをピクセル値に変換するための私のルーチンが機能します。しかし、これを実践しようとするとうまくいかない。

前述の円を描画しようとすると、それらはY軸上に正しく配置されますが、X軸上では右にずれてしまいます。私はこれがウィンドウとの関係でキャンバスの位置を考慮する方法と関係があると考えていますが、私はそれに私の指を置くことはできません。画像の左側に配置された円はやや右端にあり、画像の右端に配置された円は非常に遠すぎます（問題が何であっても、大きな関与の数字、私はこれらの円を追加すると

、私は次のコードスニペットを使用して、四角形の各コーナーに4、1を配置します。

var topLeft = {x:percentToPxHor(17.275),y:percentToPxVert(59.691)}; 
var bottomLeft = {x:percentToPxHor(17.275),y:percentToPxVert(60.72)}; 
var topRight = {x:percentToPxHor(71.459),y:percentToPxVert(61.407)}; 
var bottomRight = {x:percentToPxHor(71.352),y:percentToPxVert(62.436)}; 

は、任意の助けいただければ幸いです

。

Answer 1

私は境界線があるときのオフセットを示すマウス位置のテスターを作った。これはgetBoundingClientRectがどのように正確でないかを示しています。私はFireFoxでテストして、あなたは明らかにオフセットを見ることができます。

var canvas = document.getElementById('rect-canvas'); 
 
var check = document.getElementById('no-border-checkbox'); 
 
var ctx = canvas.getContext('2d'); 
 
var mouse = {p:{x:0, y:0}, frame:0, frames:30}; 
 
var topLeft = {x:percentToPxHor(17.275),y:percentToPxVert(59.691)}; 
 
var bottomLeft = {x:percentToPxHor(17.275),y:percentToPxVert(60.72)}; 
 
var topRight = {x:percentToPxHor(71.459),y:percentToPxVert(61.407)}; 
 
var bottomRight = {x:percentToPxHor(71.352),y:percentToPxVert(62.436)}; 
 

 
main(); 
 

 
function main() { 
 
    check.addEventListener('change', function(e) { 
 
    var className = check.checked ? 'border' : ''; 
 
    canvas.setAttribute('class',className); 
 
    }); 
 
    
 
    canvas.addEventListener('mousemove',function(e){ 
 
    var rectCanvas = canvas.getBoundingClientRect(); 
 
    var positionX = Math.round(((e.clientX - rectCanvas.left)/canvas.width * 100) * 1000)/1000; 
 
    var positionY = Math.round(((e.clientY - rectCanvas.top)/canvas.height * 100) * 1000)/1000; 
 

 
    //alert("Width\nPosition: " + (e.clientX - rectCanvas.left) + "\nPercentage Position: " + positionX + "\nBack to position: " + percentToPxHor(positionX)); 
 

 
    mouse.p.x = percentToPxHor(positionX); 
 
    mouse.p.y = percentToPxVert(positionY); 
 
    render(); 
 
    }); 
 
} 
 

 

 
function render() { 
 
    // clear canvas 
 
    ctx.fillStyle='white'; 
 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
 
    
 
    // draw points and connect 
 
    drawCircle(topLeft, "blue"); 
 
    drawCircle(bottomLeft, "green"); 
 
    drawCircle(topRight, "red"); 
 
    drawCircle(bottomRight, "orange"); 
 
    drawPoly([topLeft, bottomLeft, bottomRight, topRight]); 
 
    
 
    // draw mouse circle 
 
    drawCircle(mouse.p, 'rgba(255,200,0,.75)', 10); 
 
    
 
    // draw mouse lines 
 
    var h1 = {x:0, y: mouse.p.y}; 
 
    var h2 = {x:canvas.width, y: mouse.p.y}; 
 
    var v1 = {x: mouse.p.x, y:0}; 
 
    var v2 = {x: mouse.p.x, y:canvas.height}; 
 
    drawPoly([h1, h2], "rgba(0,0,0,.25)"); 
 
    drawPoly([v1, v2], "rgba(0,0,0,.25)"); 
 
} 
 
function percentToPxHor(intPx) { 
 
    return intPx * canvas.width/100; 
 
} 
 

 
function percentToPxVert(intPx) { 
 
    return intPx * canvas.height/100; 
 
} 
 

 
function drawCircle(p, color, radius) { 
 
    if (typeof radius == 'undefined') radius = 2; 
 
    if (typeof color == 'undefined') color = 'red'; 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = color; 
 
    ctx.arc(p.x,p.y,radius,0,2*Math.PI); 
 
    ctx.fill(); 
 
} 
 

 
function drawPoly(points, color) { 
 
ctx.strokeStyle = color ? color : 'red'; 
 
ctx.beginPath(); 
 
var p = points[points.length-1]; 
 
ctx.moveTo(p.x, p.y); 
 
for(var i = 0; i < points.length; i++) { 
 
    var p = points[i]; 
 
    ctx.lineTo(p.x, p.y); 
 
} 
 
ctx.stroke(); 
 
}

#rect-canvas { 
 
    
 
} 
 

 
.border { 
 
    border:5px solid red; 
 
} 
 

 
body { 
 
    background-color:#cccccc; 
 
}

<canvas id='rect-canvas' class='border' width="300" height="150"></canvas> 
 

 
<p> 
 
Border 
 
<input type='checkbox' id='no-border-checkbox' value='on' checked> 
 
</p>