कैनवास पूर्णस्क्रीन नहीं होने पर निम्न कोड पूरी तरह से काम करता है।

    let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');

    document.addEventListener('mousemove',e=>{
        let br = canvas.getBoundingClientRect();
        let mouseX = e.clientX - br.left;
        let mouseY = e.clientY - br.top;
    });

हालांकि, canvas.requestFullscreen() वेरिएबल्स mouseX, mouseY के बाद अब कैनवास पर माउस की स्थिति का प्रतिनिधित्व नहीं करते हैं।
क्या कैनवास के सापेक्ष माउस की स्थिति प्राप्त करने का कोई तरीका है?

1
Matthias Southwick 27 मई 2020, 20:52
 – 
ggorlen
28 मई 2020, 00:23

1 उत्तर

सबसे बढ़िया उत्तर

लंबे समय के बाद मुझे आखिरकार इसका हल मिल गया।

var FULLSCREEN = false;
document.onfullscreenchange = () => {FULLSCREEN = !FULLSCREEN};
// Keep Track of when Screen 

var mouseX=0,mouseY=0;

function map(v,n1,n2,m1,m2){
    return (v-n1)/(n2-n1)*(m2-m1)+m1;
}

doucment.addEventListener('mousedown',e=>{
        var x,y;
        var element = e.target;
        let br = element.getBoundingClientRect();
        if(FULLSCREEN){
            let ratio = window.innerHeight/canvas.height;
            let offset = (window.innerWidth-(canvas.width*ratio))/2;
            x = map(e.clientX-br.left-offset,0,canvas.width*ratio,0,element.width);
            y = map(e.clientY-br.top,0,canvas.height*ratio,0,element.height);
        } else {
            x = e.clientX - br.left;
            y = e.clientY - br.top;
        }
        mouseX = x;
        mouseY = y;
});

// Unfortunately this only works if the element is touching the top and bottom of the screen
// In other words, the ratio between the width and height of your screen must 
// be greater that the ratio of width to height for your element
2
Matthias Southwick 26 सितंबर 2020, 03:15
मुझे विश्वास नहीं हो रहा है कि यह आवश्यक है, लेकिन मैं कुछ भी कम हास्यास्पद के साथ आने में सक्षम नहीं हूं जैसे कि "कैनवास पर व्यक्ति ने कहां क्लिक किया", इसलिए हम यहां हैं ... पीछा करने के लिए धन्यवाद यह नीचे।
 – 
Mala
11 जुलाई 2021, 05:43