area map Generator | HTML

Fou

Возможности online-генератора map area. Как им пользоваться?

  1. желательно открыть браузер Mozilla FireFox.
  2. ввести URL-адрес своего изображения в верхнее поле.
  3. обозначить контур путём установок точек либо путём обведения необходимого участка с нажатой левой клавишей мышки. Красная линия покажет будущие очертания.
  4. координаты (по два значения на каждую точку) будут записаны под картинкой. Для удобства цвет точек чередуется (чёрный/зелёный). Их можно изменять/удалять прямо в строке! При наведении координаты (на изображении в виде точки) принимают синий цвет, при фокусе — красный.
  5. под кнопками располагается список предыдущих попыток. При новом заходе на страницу, серые пункты не будут сохранены.
Упрощённый код Генератора
<input type="URL" id="razImg" placeholder="Ввести URL изображения"/>
<div id="raz">
  <img src="http://2.bp.blogspot.com/-DrUVzX6PuVU/VGxg9G29LKI/AAAAAAAAE8o/c7NLMM7Hlf8/s1600/lis-zayats.jpg" alt="Fou">
  <canvas></canvas>
</div>
<div id="raz1"><span contenteditable></span></div>
<input type="button" value="Очистить" onclick="location.reload();"/> <!-- перезагрузить страницу, так как при нажатии Enter в поле с координатами всё ломается -->

<style>
#raz {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  margin-top: .5em;
}
#raz img {
  vertical-align: middle; /* убрать под картинкой пробел */ 
}
#raz canvas {
  position: absolute;
  left: 0;
  top: 0;
}
#razImg {
  display: block;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
#raz1 b:nth-child(even) {
  color: green;
}
#raz1 b:hover {
  color: yellow;
}
#raz1 b:focus {
  color: red;
}
</style>

<script>
var raz = document.getElementById('raz'),
    raz1 = document.getElementById('raz1'),
    canvas = raz.getElementsByTagName('canvas')[0],  
    ctx = canvas.getContext("2d");
document.getElementById('razImg').oninput = function() { // сменить URL изображения
  raz.getElementsByTagName('img')[0].src = this.value;
}
raz.onmousemove = Raz;
raz.onclick = Raz;
function Raz(e) {
  var x = e.offsetX==undefined?e.layerX:e.offsetX, // координата X
      y = e.offsetY==undefined?e.layerY:e.offsetY, // координата Y
      t = e.target || e.srcElement,
      w = raz1.getElementsByTagName('span')[0].innerHTML.replace(/<[^>]*>/g, ''); // убрать теги из строки
  if (canvas.isDrawing == true || e.type == "click") { // условие, при котором происходит запись координат
    w += (w == '' ? '' : ',') + x +','+ y; 
    raz1.innerHTML = '&lt;area shape=poly coords="<span contenteditable><b tabindex="0">' + w.replace(/(\d*,\d*),/g, '$1</b><b tabindex="0">,') + '</b></span>" href="" alt=""&gt;';  // contenteditable позволить изменить содержимое тега посетителям, tabindex устанавливать фокус
  }
  w = w.split(/,/); // сделать из строки массив, разделитель — запятая
  var n = w.length - 1;
  canvas.width = this.offsetWidth;
  canvas.height = this.offsetHeight;
  RazCanvas(w);
  if (canvas.isDrawing == false) {
    ctx.beginPath(); // новый объект (убрать, если запутывает)
    ctx.lineWidth = "1";
    ctx.strokeStyle = "red";
    ctx.moveTo(w[n-1], w[n]);
    ctx.lineTo(x, y);
    ctx.lineTo(w[0], w[1]); // соединить текущую точку с начальной (убрать, если запутывает)
    ctx.stroke();
  }
}
function RazCanvas(w) {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // очистить canvas
  ctx.beginPath(); // новый объект
  ctx.lineWidth = "1"; // ширина линии
  ctx.strokeStyle = "green"; // цвет линии
  ctx.moveTo(w[0], w[1]); // начальная точка
  for (var i = 0; i < w.length; i++) {
    if ([i]/2 == Math.round([i]/2)) {
      ctx.lineTo(w[i+2], w[i+3]); // точки перемещения
    }
  }
  ctx.closePath(); // соединить текущую точку с начальной (убрать, если запутывает)
  ctx.stroke(); // нарисовать путь между точками
  ctx.fillStyle="rgba(0,128,0,.5)"; // прозрачность fill
  ctx.fill(); // закрасить площадь объекта
}
raz.onmousedown = function(e) { // событие с нажатой клавишей мышки
  var kl = e.keyCode || e.which;
  if (kl == "1") { // только для левой клавиши мышки
    canvas.isDrawing = true;
  }
}
raz.onmouseup = function() { // событие с отпущенной клавишей мышки
  canvas.isDrawing = false;
}
raz.onmouseout = function() { // событие при выходе за пределы области
  canvas.isDrawing = false;
}
function RazCanvasB() {  // функция из-за которой при наведении на координаты, появляются на холсте точки жёлтого и красного цвета
  var bbbYellow = document.querySelector('#raz1 b:hover'),
      bbbRed = document.querySelector('#raz1 b:focus');
  if (bbbYellow || bbbRed) {
      var w = this.getElementsByTagName('span')[0].innerHTML.replace(/<[^>]*>/g, '').split(/,/);
      RazCanvas(w);
    if (bbbYellow) {
      var Yellow = bbbYellow.innerHTML.replace(/^,/g, '').split(/,/);
      ctx.fillStyle = 'yellow';
      ctx.fillRect(Yellow[0]-2,Yellow[1]-2,4,4);
    }
    if (bbbRed) {
      var Red = bbbRed.innerHTML.replace(/^,/g, '').split(/,/);
      ctx.fillStyle = 'red';
      ctx.fillRect(Red[0]-2,Red[1]-2,4,4);
    }
  }
}
raz1.oninput = RazCanvasB;
raz1.onmousemove = RazCanvasB;
raz1.onclick = RazCanvasB;
</script>
в f t
наверх ↑

Комментариев нет: