Скрипт рисования на яндекс карте поможете доделать?

Question

[1webmax1]

Скрипт почти готов. Проблема в том что на канве линия рисуется не там где проходит курсор. Нужно сделать чтоб рисовалось именно под курсором. Многоугольники добавляются там где пошел курсор нормально. Сайт на модексе. Адрес http://okna.funnyschool.kz/search?search=аспирин%2... Код такой:

Answer 1

[1webmax1]

<canvas id="canv"></canvas>
<div id="map"></div>
<script src="http://mourner.github.io/simplify-js/simplify.js"></script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

canvas {
  border: 1px solid #aaa;
  position: absolute;
  z-index: 99999;
  top: 0;
  left: 0;
}

<script>
	var Map = (function() {

  ymaps.ready(init);
  var myMap;

  function init() {
    myMap = new ymaps.Map("map", {
      center: [43.2566700, 76.9286100], // Алматы
      zoom: 11
    }, {
      balloonMaxWidth: 200,
      searchControlProvider: 'yandex#search'
    });

    addPolygon()
  }


  function convert(coords) {
    var projection = myMap.options.get('projection');

    return coords.map(function(el) {
      var c = projection.fromGlobalPixels(myMap.converter.pageToGlobal([el.x, el.y]), myMap.getZoom());
      return c;
    });
  }

  function addPolygon(coord) {
    var myGeoObject = new ymaps.GeoObject({
      geometry: {
        type: "Polygon",
        coordinates: [coord],
      },
    }, {
      fillColor: '#00FF00',
      strokeColor: '#0000FF',
      opacity: 0.5,
      strokeWidth: 3
    });
var geoObject1 = [!readsearchres? &reads=`[!search_words!]`!];
	//var teststring = '!readsearchres? reads=`!search_words!`!';
	//var teststring = '!getDillersCoords3!';
					  
					  objects = ymaps.geoQuery(geoObject1).addToMap(myMap);
					  objects.setOptions('preset', 'islands#blueStretchyIcon');
				  //
				  objects.add(myGeoObject);
				   myMap.geoObjects.add(myGeoObject);
    myGeoObject.editor.startEditing();//включить редактирование полигона
    var objectsInsidePoly = objects.searchInside(myGeoObject);
					  objectsInsidePoly.setOptions('preset', 'islands#redStretchyIcon');
        // Оставшиеся объекты - синими.
					   objects.remove(objectsInsidePoly).setOptions('preset', 'islands#blueStretchyIcon');
	//alert('Добавление вершины полигона');
	objects.searchInside(myGeoObject).addToMap(myMap);
        // Оставшиеся объекты будем удалять с карты.
        objects.remove(objectsInsidePoly).removeFromMap(myMap);
						 //////////////////////////////////////////////////ловим изменение полигона
						 myGeoObject.events.add('geometrychange', function () { window.setTimeout(function () {
//если вершин больше 3 то ищем объекты в полигоне
					  //if (myPolygon.geometry._coordPath._coordinates[0].length > 3) {
	//myPolygon.editor.stopDrawing();
					  var objectsInsidePoly = objects.searchInside(myGeoObject);
					  objectsInsidePoly.setOptions('preset', 'islands#redStretchyIcon');
        // Оставшиеся объекты - синими.
					   objects.remove(objectsInsidePoly).setOptions('preset', 'islands#blueStretchyIcon');
	//alert('Добавление вершины полигона');
	objects.searchInside(myGeoObject).addToMap(myMap);
        // Оставшиеся объекты будем удалять с карты.
        objects.remove(objectsInsidePoly).removeFromMap(myMap);
	//}
},100);
					  });
  }

  return {
    addPolygon: addPolygon,
    convert: convert
  };
})();

//----------------------

var canv = document.getElementById('canv'),
  ctx = canv.getContext('2d'),

  line = [];

var map = document.getElementById('map');
canv.width = map.offsetWidth;
canv.height = map.offsetWidth;


var startX = 0,
  startY = 0;

function mouseDown(e) {
  ctx.clearRect(0, 0, canv.width, canv.height);

  startX = e.pageX - e.target.offsetLeft;
  startY = e.pageY - e.target.offsetTop;

  canv.addEventListener('mouseup', mouseUp);
  canv.addEventListener('mousemove', mouseMove);


  line = [];
  line.push({
    x: startX,
    y: startY
  });
}


function mouseMove(e) {
  var x = e.pageX - e.target.offsetLeft,
    y = e.pageY - e.target.offsetTop;

  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(x, y);
  ctx.stroke();

  startX = x;
  startY = y;
  line.push({
    x: x,
    y: y
  });
}

function mouseUp() {
  canv.removeEventListener('mouseup', mouseUp);
  canv.removeEventListener('mousemove', mouseMove);

  aproximate();
  document.getElementById('canv').style.display = 'none';//убрать канву
}

function aproximate() {
  ctx.clearRect(0, 0, canv.width, canv.height);
  var res = simplify(line, 5);
  res = Map.convert(res);
  Map.addPolygon(res);
}


canv.addEventListener('mousedown', mouseDown);
</script>

Comments

[1webmax1]

изменил height:400px; и в канве и в картах. Вроде блоки совпадают по положению друг на друге, но линия рисуется не под курсором, а сбоку http://okna.funnyschool.kz/search?search=аспирин%2...