Why does canvas zoom work differently on mobile in chrome and firefox?

D

Denis Kovalchuk2017-06-16 02:47:42

JavaScript

Denis Kovalchuk, 2017-06-16 02:47:42

I am making a map of the village on Canvas denisator.ru/work/map/test and ran into a problem on mobile Chrome and Opera.
If in Chrome you pinch the map and scroll it down, then the pointer, which should move to the point where you press your finger, is positioned somewhere to the side. Moreover, such a problem manifests itself only in opera and chrome, and in the standard android browser and in firefox everything works fine.
I tried to compensate for this offset but could not calculate the formula by which to calculate the offset value.

<!DOCTYPE html>
<html lang="ru"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <script src="jquery-latest.js"></script>
</head>

<body>
<div id="info"><img src="ugolok.png"><span id="text">Какой нибудь <br> динамический текст</span></div>
<figure id="imapc">
  <object data="map.svg" type="image/svg+xml" id="imap">
    <p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p>
  </object>
</figure>

<div id="data"></div>
<script>

$(window).load(function () {
  // Получаем доступ к SVG DOM
  var svgobject = document.getElementById('imap'); 
  if ('contentDocument' in svgobject){
    var svgdom = svgobject.contentDocument;
  }
  // Хак для WebKit (чтобы правильно масштабировал нашу карту)
  var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" ");
  var aspectRatio = viewBox[2] / viewBox[3];
  svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio);
  size=svgobject.offsetWidth;

  $(svgdom).on("mousemove", function(event) {
    //Проблемное место!!!
    //var scale=($(document).width())/(window.innerWidth);
    //$("#info").offset({top:(event.pageY+20+(window.pageYOffset*scale)), left:(event.pageX+23+window.pageXOffset)});
    $("#info").offset({top:(event.pageY+20), left:(event.pageX+23)});
  });
   

});

</script>
<style>
html, body {width: 100%; height: 100%; margin:0px; padding: 0px;}

#imapc {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;

}

#imap{
  margin: 0;
  padding: 0; 
}

div#info {
  position: absolute; 
  border: 1px solid black;
  background: #FFFFCC; 
  padding: 6px;
  font-family: Arial;
  //display: none;
  border-radius: 0px 12px 12px 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
div#info img{
  position: absolute; 
  top: -18px;
  left: -22px;
}
</style>
</body></html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

vintage, 2017-06-16
@vintage

And what does canvas have to do with it?
I think getScreenCTM will help you: https://msdn.microsoft.com/en-us/library/hh535760(...