Vị trí chuột trong Vải đáp ứng HTML 5

Question

Tôi đã tìm kiếm thông qua các câu hỏi khác nhưng không có câu hỏi nào phù hợp với trường hợp của tôi.

Tôi có một yếu tố canvas:

<canvas id="linear-synoptic-map" width="1053px" height="1000px" ng-click="linearSynopticCtrl.canvasClicked($event)" ng-mousemove="linearSynopticCtrl.mouseMovedOverCanvas($event)"> 
</canvas> 

Và tôi nhận được vị trí với chức năng này:

linearSynopticCtrl.getPositionFromEvent = function (event) { 
    var rect = linearSynopticCtrl.canvas.getBoundingClientRect(); 
    var x = event.x - rect.left; 
    var y = event.y - rect.top; 
    return new Point(x,y); 
}; 

Vấn đề là bức tranh cần phải được đáp ứng vì vậy tôi đã thêm quy tắc css sau:

canvas#linear-synoptic-map { 
    width: 100%; 
} 

Khi thay đổi kích thước xảy ra (khi kích thước canvas bị thu nhỏ o ver định nghĩa hoặc mở rộng trên định nghĩa: 1053x1000) một khoảng cách bắt đầu hiển thị giữa vị trí chuột chính xác và vị trí trả về bởi hàm.

Tôi cũng đã cố gắng đạt được vị trí với cách tiếp cận này:

linearSynopticCtrl.getPositionFromEvent = function (event) { 
    var x = event.x - linearSynopticCtrl.canvas.offsetLeft; 
    var y = event.y - linearSynopticCtrl.canvas.offsetTop; 
    return new Point(x,y); 
}; 

Nhưng tôi nhận được kết quả tồi tệ hơn nhiều.

Có ai biết cách khắc phục sự cố này không?

Answer 1

tọa độ chuột không bao giờ được thu nhỏ.

Do đó, bạn phải chia tỷ lệ chuột cho chúng để phản ánh canvas thu nhỏ.

Dưới đây là một cách để làm cho vải của bạn đáp ứng và nhận được chuột quy mô phối:

// handle responsively resizing the canvas 
 
var scale=1.00; 
 
var originalWindowWidth=window.innerWidth; 
 
var originalCanvasWidth=document.getElementById('canvas').width; 
 
function debounce(func, wait, immediate) { 
 
    var timeout; 
 
    return function() { 
 
    var context = this, args = arguments; 
 
    var later = function() { 
 
     timeout = null; 
 
     if (!immediate) func.apply(context, args); 
 
    }; 
 
    var callNow = immediate && !timeout; 
 
    clearTimeout(timeout); 
 
    timeout = setTimeout(later, wait); 
 
    if (callNow) func.apply(context, args); 
 
    }; 
 
}; 
 
var resizeCanvas = debounce(function() { 
 
    scale=window.innerWidth/originalWindowWidth; 
 
    $('#canvas').css('width',originalCanvasWidth*scale); 
 
}, 250); 
 
window.addEventListener('resize', resizeCanvas); 
 

 
// now, do normal app stuff 
 

 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 
ctx.fillRect(50,50,100,100); 
 
ctx.fillText('Rect drawn at [50,50]',50,35); 
 

 
function handleMouseMove(e){ 
 

 
    var rect = canvas.getBoundingClientRect(); 
 
    var x = parseInt((event.x - rect.left)/scale); 
 
    var y = parseInt((event.y - rect.top)/scale); 
 

 
    $('#mouse').text(x+'/'+y); 
 

 
}

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>Mouse will report rect corner at<br>[50,50] even after resizing window</h4> 
 
<h4 id=mouse>mouse</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>