有没有办法自动生成伪图像地图？

Question

Hitbox Overlay IIFE 代码

//CSS Hitbox Solution 08-26-2015
//Whosebug - 
//Detect MouseOver 
//Source: 
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
(function($) {
  $.mlp = {
    x: 0,
    y: 0
  }; // Mouse Last Position
  function documentHandler() {
    var $current = this === document ? $(this) : $(this).contents();
    $current.mousemove(function(e) {
      jQuery.mlp = {
        x: e.pageX,
        y: e.pageY
      };
    });
    $current.find("iframe").load(documentHandler);
  }
  $(documentHandler);
  $.fn.ismouseover = function(overThis) {
    var result = false;
    this.eq(0).each(function() {
      var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
      var offset = $current.offset();
      result = offset.left <= $.mlp.x && offset.left + $current.outerWidth() > $.mlp.x && offset.top <= $.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
    });
    return result;
  };
})(jQuery);
$('.notification-box').on("click", function() {
  $("button").each(function(i) {
    var iteratedButton = $('button:eq(' + i + ')');
    var buttonID = iteratedButton.attr("id");
    if (iteratedButton.ismouseover()) {
      iteratedButton.toggleClass(buttonID);
    }
  });
});

Example 01: Overlay Example for context

Example 02: Concept for auto generating content - Derived from this Whosebug 问题。

有一种方法可以让多个对象位于覆盖它们的覆盖层之下。然后，如果用户在预定点单击，则有一种方法可以使指针与覆盖层下方的元素交互。我的问题是，有人可以编写代码，将 <map> 标签的概念与 IIFE 结合起来，IIFE 检测用户单击的参考点是否是该图像，然后，就好像它被单击一样。

如果这没有意义，简单地说，我正在寻找一个偏离手动设置 <area> 坐标或必须使用工具（非常深刻）的过程，例如 http://www.image-maps.com/.相反，我们会让指针完成所有工作。

我们拥有以下高实用性 + 高度兼容的方法：.offset()、.position()、elementFromPoint() 以及利用基本 CSS 将元素置于掩码后面的能力。

所以我们可以结合上面的IIFE Overlay hitbox方法+ ????? = 利润（再见映射坐标 <map>）。

我只是不知道什么????是。我知道无论解决方案是什么，我都希望它适用于所有浏览器（包括 IE 5）。

最后，该过程在设计、设置和实施方面应该相当自动化。

谁创造了它，请将它命名为 autoMapperJs（因为它不会局限于图像）。

更新：
???? 的核心功能组件正如@Alex 在评论中指出的那样，已经实现。 CreateJs 当指针悬停在图像的非透明区域上时会发出通知。这很强大，应该是所创建工具的标准。它似乎也利用了 .mousemove() 和 z-index。请继续评论，作为集体，我觉得可以找到解决方案。

Answer 1

这是一个开始。将图像放入 canvas 上的图层和位置数组中，然后运行在鼠标悬停时通过它们进行点击。还可以在图层数组中放置图像，以便在点击时绘制该图像。

var can = document.getElementById('image-map');
var W = can.width;
var H = can.height;
var ctx = can.getContext('2d');
var layers = [];
var mouse = {x:0,y:0};

can.addEventListener('mousemove', function(evt) {
  mouse = getMousePos(can, evt);
  drawCanvas();
}, false);

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

main();

function main() {

  initLayers();
  drawCanvas();
}

function drawCanvas() {
  ctx.clearRect(0, 0, W, H);
  var hit = -1;
  for (var i =layers.length; i--;) {
    var c = layers[i];
    if(maskHit(c.img, c.x, c.y)) {
      hit = i;
      break;
    }
  }
  
  for (var i =0; i < layers.length; i++) {
    var c = layers[i];
    var img = hit === i ? c.hov : c.img;
    ctx.drawImage(img, c.x, c.y);
  }
  ctx.drawImage(circ(10,"rgba(255,200,0,.75)"), mouse.x-10/2,mouse.y-10/2);
}

// UTILITY TO DRAW SAMPLE IMAGES
function circ(size, color) {
  var can = document.createElement('canvas');
  can.width = can.height = size;
  var to_rad = Math.PI / 180;
  var ctx = can.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(size, size / 2);
  ctx.arc(size / 2, size / 2, size / 2, 0, 360 * to_rad);
  ctx.fillStyle = color;
  ctx.fill();
  return can;
}

function initLayers() {
  var s = 75; // size

  // PUT YOUR IMAGES IN A LAYERS ARRAY WITH X,Y COORDS FOR CANVAS
  // PLACEMENT. X AND Y ARE TOP LEFT CORNDER OF IMAGE. STORE HOVER
  // IMAGE FOR MOUSE HIT.
  layers = [{
    img: circ(s, "#090"),
    hov: circ(s, "#C0C"),
    x: 123,
    y: 12
  }, {
    img: circ(s, "#F00"),
    hov: circ(s, "#C0C"),
    x: 63,
    y: 12
  }, {
    img: circ(s, "#00F"),
    hov: circ(s, "#C0C"),
    x: 3,
    y: 12
  }];

}

var maskCan = document.createElement("canvas");
maskCan.width=maskCan.height=1;
var maskCtx = maskCan.getContext('2d');

function maskHit(img, x, y) {
    
  // get relative coords to image upper left corner
  
  x = mouse.x - x;
  y = mouse.y - y;
  
  if (x < 0 || y < 0 || x > img.width || y > img.height) return false;

  //return 1; // square hit, no alpha check
  
  // ALPHA CHECK - draw one pixel, get and check alpha.
  //                    sx sy sw sh dx dy dw dh
  maskCtx.clearRect(0,0,1,1);
  maskCtx.drawImage(img, x, y, 1, 1, 0, 0, 1, 1);
  var imageData = maskCtx.getImageData(0,0,1,1);
  //console.log(imageData.data[3])
  return imageData.data[3] === 255;
}

#image-map {
  border: 1px solid #ACE;
}

<canvas id="image-map" width="200" height="100"></canvas>

有没有办法自动生成伪图像地图？

Is there a way to automatically generate a pseudo image map?

javascript

jquery

html

css

imagemap