如何在画布上加载图像并在点击时放置标记 [英] How to load image on canvas and put markers on click

问题描述

你好，我正在研究最后一年的项目应用程序，我对HTML5没有多少经验。

Hello there I am working on a final year project app and I don't have much experience with HTML5.

我正在尝试创建一个加载的简单画布在开始时加载图像，当图像加载时，我希望能够在图像上放置标记，就像谷歌地图允许放置标记一样....标记很可能是图像，但我需要计算X和Y位置并显示放置在最初加载的图像上的每个标记的坐标.....

I am attempting to create a simple canvas which loads up an image on start and when the image is loaded, I want to be able to put markers on the image, like how google maps allows markers to be placed .... The marker will most probably an image but I need to calculate the X and Y position and show the coordinates of every marker that is placed on originally loaded image .....

标记可以在javascript中存储为数组，或者可以是ajax in，因为它可以更新，地图需要刷新

The markers could be stored as an array in javascript, or could be ajax in as it could be updated and the map will need to be refreshed

提前感谢任何帮助。非常感谢

Thanks in advance for any kind of help. Much appreciated

推荐答案

Zrik我已经为你创建了一个jsFiddle，它应该给你一个很好的开始:)。

Zrik ok I have created a jsFiddle for you which should give you a great start :).

jsFiddle： https://jsfiddle.net/7hed6uxL/2/

jsFiddle : https://jsfiddle.net/7hed6uxL/2/

Html

<p>Click on the map to place a marker</p>
<canvas id="Canvas" width="700" height="700"></canvas>

Javascript

Javascript

// Target the canvas element on the page
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");

// Map sprite
var mapSprite = new Image();
mapSprite.src = "http://www.retrogameguide.com/images/screenshots/snes-legend-of-zelda-link-to-the-past-8.jpg";

// Create a basic class which will be used to create a marker
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;
}

// Array of markers
var Markers = new Array();

// When the user clicks their mouse on our canvas run this code
var mouseClicked = function (mouse) {
    // Get corrent mouse coords
    var rect = canvas.getBoundingClientRect();
    var mouseXPos = (mouse.x - rect.left);
    var mouseYPos = (mouse.y - rect.top);

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

    // Push our new marker to our Markers array
    Markers.push(marker);
}

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

// Run this once so we setup text rendering
var firstLoad = function () {
    context.font = "15px Georgia";
    context.textAlign = "center";
}

firstLoad();

// This will be called 60 times a second, look at the code at the bottom `setInterval`
var main = function () {
    // Update our canvas
    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, 700, 700);

    // 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 position 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

<我已经对代码进行了评论，所以它应该向你解释一切，如果你需要更多的帮助就让我知道。也只是为了让你知道你不应该使用硬编码的数字IE这行 context.fillRect（tempMarker.XPos - （textMeasurements.width / 2），tempMarker.YPos - 15，textMeasurements.width，20）; 你应该存储 20 变量中的值，因为它始终是文本背景框的高度。但我把它放在那里让你学习什么对你有用。

I have commented the code so it should explain everything to you, if you need any more help just let me know. Also just to let you know you shouldn't use hard coded numbers I.E this line context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20); you should probably store 20 value in a variable because that will always be the height of the text background box. But I put it in there for you to learn what works for you.

这篇关于如何在画布上加载图像并在点击时放置标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！