Place X, Y values on an image when loading the page | Javascript

Asked

Viewed 41 times

1

I have this javascript code that puts a marker with the x and y location when you click on the image, but I want to fill the markers with the values of my database when loading the page and not when I click on the image

tried with my own values var mouseXPos = 225; var mouseYPos = 339; and the addeventlistener load eventcanvas.addEventListener ("load", mouseClicked, true);but it didn’t work, so how can I fill x, y values in this image when loading the page with database values instead of clicking inserir a descrição da imagem aqui

  <script>
    
    var canvas = document.getElementById('Canvas');
    var context = canvas.getContext("2d");
    
    // Map sprite
    var mapSprite = new Image();
    mapSprite.src = "http://localhost/Db/public/assets/img.png";
    
    var Marker = function () {
        this.Sprite = new Image();
        this.Sprite.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"
        this.Width = 12;
        this.Height = 20;
        this.XPos = 0;
        this.YPos = 0;
    }
    
    var Markers = new Array();
    
    var mouseClicked = function (mouse) {
        // Get corrent mouse coords
        var rect = canvas.getBoundingClientRect();
        var mouseXPos = 225;
        var mouseYPos = 339;
    
        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;
    
        Markers.push(marker);
    }
    
    // Add mouse click event listener to canvas
    canvas.addEventListener("load", mouseClicked, true);
    
    var firstLoad = function () {
        context.font = "15px Georgia";
        context.textAlign = "center";
    }
    
    firstLoad();
    
    var main = function () {
        draw();
    };
    
    var draw = function () {
        // Clear Canvas
        context.fillStyle = "#000";
        context.fillRect(0, 0, canvas.width, canvas.height);
    
        // Draw map
        // Sprite, X location, Y location, Image width, Image height
        // You can leave the image height and width off, if you do it will draw the image at default size
        context.drawImage(mapSprite, 0, 0, 550, 550);
    
        // Draw markers
        for (var i = 0; i < Markers.length; i++) {
            var tempMarker = Markers[i];
            // Draw marker
            context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);
    
            // Calculate postion text
            var markerText = "Postion (X:" + tempMarker.XPos + ", Y:" + tempMarker.YPos;
    
            // Draw a simple box so you can see the position
            var textMeasurements = context.measureText(markerText);
            context.fillStyle = "#666";
            context.globalAlpha = 0.7;
            context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);
            context.globalAlpha = 1;
    
            // Draw position above
            context.fillStyle = "#000";
            context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);
        }
    };
    
    setInterval(main, (1000 / 60)); // Refresh 60 times a second
    </script>
  • You would put the values in the database and when starting the page it creates a marker with the values of the database table best option with the foreach.

1 answer

1


this is the key code...

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

which can give rise to a simple-to-use function:

function addMarker(x,y) {
    var marker = new Marker();
    marker.XPos = x - (marker.Width / 2);
    marker.YPos = y - marker.Height;
    Markers.push(marker);
}
//exemplo
var dados = [{x:16,y:61},{x:350,90},{x:300,40}];
dados.forEach((point)=>
    addMarker(point.x,point.y)
);

*remembering that the coordinates are always not related to imagen..., but to the canvas 550x550 ...I don’t know which database you’re referring to, but I would advise you to send the JSON coordinates, get the host file with fetch/ajax......

Repeated copies in memory

advise make these variables static/global if always keep the same value...

    this.Sprite = new Image();
    this.Sprite.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"
    this.Width = 12;
    this.Height = 20;

Updates:

recommend taking the setInterval, the canvas and calling the draw() manually after the edits... since the canvas will not miss what has already been drawn, no matter the time.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.