Возможности online-генератора map area. Как им пользоваться?
- желательно открыть браузер Mozilla FireFox.
- ввести URL-адрес своего изображения в верхнее поле.
- обозначить контур путём установок точек либо путём обведения необходимого участка с нажатой левой клавишей мышки. Красная линия покажет будущие очертания.
- координаты (по два значения на каждую точку) будут записаны под картинкой. Для удобства цвет точек чередуется (чёрный/зелёный). Их можно изменять/удалять прямо в строке! При наведении координаты (на изображении в виде точки) принимают синий цвет, при фокусе — красный.
- под кнопками располагается список предыдущих попыток. При новом заходе на страницу, серые пункты не будут сохранены.
Упрощённый код Генератора
<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();"/>
<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() {
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,
y = e.offsetY==undefined?e.layerY:e.offsetY,
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 = '<area shape=poly coords="<span contenteditable><b tabindex="0">' + w.replace(/(\d*,\d*),/g, '$1</b><b tabindex="0">,') + '</b></span>" href="" alt="">';
}
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);
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)";
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>
Комментариев нет: