单击返回(0,0)作为FF 49.0.2上的坐标

时间:2017-10-11 21:03:45

标签: javascript firefox canvas

以下代码允许我单击图像(画布),具有坐标,并将十字准确放置在完成单击的位置。它适用于chrome但使用FF,版本49.0.2,我的点击总是有(0,0)作为坐标。我的代码有什么问题?怎么做?

var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");

// Map sprite
var mapSprite = new Image();
mapSprite.src = "image.png";

 //Declare Marker sprite
var Marker = function () {
    this.Sprite = new Image();
    this.Sprite.src = "cross.png"
    this.Width = 10;
    this.Height = 10;
    this.XPos = 0;
    this.YPos = 0;
}

var Markers = new Array();

var mouseClicked = function (mouse) {
    // Get corrent mouse coords
    var rect = canvas.getBoundingClientRect();
    var mouseXPos = Math.round(mouse.x - rect.left);
    var mouseYPos = Math.round(mouse.y - rect.top);

    console.log("Marker added");

    // Move the marker when placed to a better location
    var marker = new Marker();
    marker.XPos = mouseXPos - (marker.Width / 2);
    marker.YPos = mouseYPos - marker.Height;
    marker.YPosNew = marker.YPos;
    Markers.push(marker);

    // Draw marker
    context.drawImage(Markers[0].Sprite, Markers[0].XPos, Markers[0].YPos, Markers[0].Width, Markers[0].Height);
    // Calculate postion text
    var markerText = Markers[0].XPos + ", " + Markers[0].YPosNew;


    // disable pointer after 1s
    setTimeout( function(){ 
    document.getElementById('Canvas').style.cursor="not-allowed";  }  , 1000 );
}

// Add mouse click event listener to canvas
canvas.addEventListener("mousedown", mouseClicked, false);

var main = function () {
    draw();
};

var draw = function () {
    // Clear Canvas
    context.fillStyle = "#000";
    context.fillRect(0, 0, canvas.width, canvas.height);

    // Draw diagramme
    context.drawImage(mapSprite, 0, 0, 954, 267);
    //draw all precedent cross
    cross = new Image();
    cross.src = "cross.png";

}
mapSprite.addEventListener('load', main);
<div style="width : 75%;margin : auto;">
    <canvas id="Canvas" width="954" height="267"></canvas>
</div>

0 个答案:

没有答案
相关问题