javascript - 具有可点击的不规则形状的网格

Question

我在开发这个功能时遇到了一些麻烦，因为它必须在 IE9+ 上工作，所以 css clip-path 不是一个选项(http://caniuse.com/#feat=css-clip-path)。

问题:

• 我需要创建一个由 6 个元素组成的网格。
• 每个元素都是一张图片。
• 根据用户在进入网格页面之前的回答，图像可能会有所不同。
• 每个元素/图像都必须是可点击的，并将获得一个“选定”类，该类将用文本和背景图像覆盖 div。

图片:

实现此目标的最佳方法是什么？

Answer 1

执行此操作的一种方法是将您需要的六张图片的每个组合保存到一张大图片中。然后，根据用户的答案组合，插入相应的图像作为 div 的背景图像。然后，您可以在与分界线大致相关的同一 div 中叠加可点击的热点。

但这可能不是最实用的解决方案，很大程度上取决于您要处理的答案/图像数量。

或者，您可以绘制 SVG 形状并将其填充设置为您需要的图像。

我可以推荐Raphael.js作为起点。你应该可以在文档中找到你需要的东西

另一种选择是使用 HTML5 Canvas : http://jsfiddle.net/julienbidoret/GKP7X/1/

(jsfiddle 归功于 julienbidoret)

Javascript:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function () {

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(20, 0);
    ctx.lineTo(240, 0);
    ctx.lineTo(220, 240);
    ctx.lineTo(0, 240);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/2/2b/Clouds.JPG";

HTML:

<canvas id="c" width="300" height="300" ></canvas>

IE9 支持 SVG 和 Canvas 。