Javascript-форум - Простейший редактор полигонов на JavaScript

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Простейший редактор полигонов на JavaScript (https://javascript.ru/forum/misc/35255-prostejjshijj-redaktor-poligonov-na-javascript.html)

Простейший редактор полигонов на JavaScript

Добрый день всем!

Прошу прощения за то, что так беспардонно врываюсь в ваше сообщество, но очень нужен совет людей, давно занимающихся JavaScript. В двух словах: нужен простейший редактор полигонов, который позволял бы редактировать вершины и "вырезать" внутренний контур. Как здесь:

Хотелось бы не использовать для этого какой-нибудь сторонний API (вроде Yandex карт). Координыты внутренних и внешних вершин после окончания редактирования надо будет просто передать в СУБД.

Есть идея одного очень интересного проекта, который я хочу осуществить, но сам я занимаюсь СУБД (Oracle, Postgres). Если подскажете, хотя бы в каком направлении копать, буду очень благодарен.

Возможно через канвас это делать... подсказать что-то готовое не могу, пробуйте канвас полигоны в google map
http://www.google.com/search?client=...hannel=suggest

Цитата:

Сообщение от Deff (Сообщение 231708)

Спасибо за подсказку, но Google API я пока не рассматриваю. Хотелось бы что-нибудь не такое тяжёлое и не обфусцированное ).

Пока смотрю в сторону canvas. Пока у меня получилось рисовать и отслеживать события мыши.

<html>
<body>
  <canvas id="c" />

  <script type="text/javascript">

    drawing = false;
    window.addEventListener('load', OnWindowLoad, false);

    function Point()
    {
      this.x = 0;
      this.y = 0;
    }

    function OnMouseDown(e)
    {
      var point = new Point();
      c2.beginPath();
      c2.moveTo(e.layerX, e.layerY);
      drawing = !drawing;
    }

    function OnMouseMove(e)
    {
      if (!drawing) return;
      c2.lineTo(e.layerX, e.layerY);
      c2.stroke();
    }

    function OnDraw()
    {

    }

    function OnWindowLoad()
    {
      canvas.addEventListener('mousemove', OnMouseMove, false);
    }

    var canvas=document.getElementById("c");
    var c2 = canvas.getContext('2d');

    canvas.onmousedown = OnMouseDown;
  </script>
</body>
</html>

Сейчас картина более или менее складывается в уме, непонятно только одно - мне надо будет подкладывать под canvas тайлы (карта города), а рисовать сверху, как это сделано в Wikimapia, например. Насколько я понял, для того, чтобы отрисовывать при таком расладе линию, которая тянется за мышью и перерисовывать многоугольник, нужно будет делать либо clearRect(), рисовать карту, потом многоугольник, либо перелпределать функцию draw() и каждый тик (например 20 раз в секунду) отрисовывать всё вручную. И тот, и другой способы представляются мне немного медленными. Так ли это? Как вообще принято делать в таких случаях? Наверняка кто-нибудь делал что-нибудь подобное и может в общих чертах описать, в какую сторону мне дальше двигаться ).

bff7755a,
Напиши мне в скайп, я тебе объясню, скайп в профиле