[javascript] وضع الماوس الحقيقي في قماش


1 Answers

يمكنك الحصول على موضع الماوس باستخدام هذا المقتطف:

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
        y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
    };
}

يأخذ هذا الكود في الاعتبار كلا الإحداثيات المتغيرة لمساحة القماش ( evt.clientX - rect.left ) والقياس عند اختلاف حجم منطقي الرسم evt.clientX - rect.left عن حجم النمط الخاص به ( / (rect.right - rect.left) * canvas.width see: Canvas width والارتفاع في HTML5 ).

مثال: http://jsfiddle.net/sierawski/4xezb7nL/

المصدر: تعليق jerryj على http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

Question

أحاول رسم الماوس فوق لوحة HTML5 ، ولكن الطريقة الوحيدة التي يبدو أنها تعمل بشكل جيد هي إذا كانت اللوحة في الموضع 0،0 (الزاوية اليسرى العليا) إذا قمت بتغيير موضع اللوحة ، لسبب ما لا يرسم كما ينبغي. هنا هو رمز بلدي.

 function createImageOnCanvas(imageId){
    document.getElementById("imgCanvas").style.display = "block";
    document.getElementById("images").style.overflowY= "hidden";
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var img = new Image(300,300);
    img.src = document.getElementById(imageId).src;
    context.drawImage(img, (0),(0));
}

function draw(e){
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    posx = e.clientX;
    posy = e.clientY;
    context.fillStyle = "#000000";
    context.fillRect (posx, posy, 4, 4);
}

جزء HTML

 <body>
 <div id="images">
 </div>
 <canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
          class="canvasView" width="250" height="250"></canvas> 

لقد قرأت أن هناك طريقة لإنشاء وظيفة بسيطة في جافا سكريبت للحصول على الوضع الصحيح ، ولكن ليس لدي أي فكرة عن كيفية القيام بذلك.







Related