如何缩放HTML5画布，但不缩放标记图像，又如何将它们显示在正确的位置？

Question

I'm successfully scaling an HTML5 canvas with a rendering of a world map. I have located certain cities on the map and indicated them with a marker that is placed using the drawImage method on the 2d context. When I scale the map the markers are also scaled, and they are correctly placed. If I try to NOT scale the marker images then they don't follow the positional scaling that the rest of the map has had applied.

I would like the image markers to remain the same size, regardless of zoom factor and also be placed correctly. Is there a way to calculate the translated point and then use that point for drawImage so I can correctly place the marker?

Answer 1

At first guess I think you would have at least two g's in your svg. The first would be scaled for map stuff. The second would be for your markers. You would convert the map coordinates for markers into the scale for the latter and then place your markers there. The basic deal is that you can apply transforms to not just the whole svg but to pieces of it, to deal with problems like this.

Answer 2

A generic answer as no code was provided -

• As you suggest yourselves keep the points stored as just points.
• Use a scale factor in code rather than using the scale() method.
• Use drawImage with manually set scale for width and height
• Draw the points using the scale factor

The reason for doing this manually is that you get in control of each part of the elements drawn. Using a transformed canvas means you will in any case scale down the points manually.

But since you first scale everything up then draw the points at a different size the up-scaled version of the graphics will be the basis for the changed size which gives worst result quality-wise.

And since you rely on the internal scale factor you need to provide mechanisms to track the scale and changes to it as well making sure it's all synchronized.

The better way, IMO, is to do all steps manually - and it is simple -

Here is one way you can do it (simplified):

Store the points in an array as for example objects:

var points = [{x:10, y:10}, {x: 100, y:100}, ...]; /// etc.

Then keep a scale factor you want to use (requirement is that scale is > 0):

var scale = 1.5; /// scale (up or down 1 = 1:1, 0.5 = 50%, 2 = 200% etc.

If you want to be able to translate the map add variables for that as well:

var dx = 0;      /// delta X (translation)
var dy = 0;      /// delta Y

Then draw the map scaled (incl. translation):

ctx.drawImage(map, dx, dy, width * scale, height * scale);

Then the points:

for(var i = 0, p = points; p = points[i++];)
    ctx.fillRect(dx + p.x * scale, dy + p.y * scale, 10, 10);

For mouse clicks you do the same, just "reverse" the math:

var pos = getMousePosition();  /// pseudo method, get mouse pos somehow
var x = (pos.x - dx) / scale;
var y = (pos.y - dx) / scale;

Hope this helps!