从中心显示十字线

下面的代码允许我点击一个图像（画布），获得坐标，并在完成点击的位置放置一个十字。十字架的问题，它将从角落（右下角）表示，并且我将在点击和十字架之间产生偏移，这些偏移并不代表确切的坐标。换句话说，十字的中心应该是放弃坐标的原点。从中心显示十字线

如何做到这一点？

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>

来源

2017-09-26 ranell

var marker = new Marker(); 
marker.XPos = mouseXPos - (marker.Width/2); 
marker.YPos = mouseYPos - (marker.Height/2); 
marker.YPosNew = marker.YPos; 
Markers.push(marker);

改变你的标记的Ypos，这就是为什么它往上走。在这种情况下，十字会定位在点击的中间位置。

来源

2017-09-26 13:01:24 Durga

从中心显示十字线

回答

相关问题