带有图形不规则形状的网格

由于它必须在IE9 +上工作，因此我在这里开发此功能时有点麻烦，所以css剪辑路径不是选项（http://caniuse.com/#feat=css-clip-path）。带有图形不规则形状的网格

问题：

我需要创建一个6个元素组成的网格。
每个元素是一个图像。
在进入网格页面之前，根据用户的答案，图像可能会有所不同。
Eeach元素/图像必须是可选的，并将获得一个“选定”类，它将文本和背景图像叠加在div上。

图像：

enter image description here

什么是实现这一目标的最佳途径？

来源

2014-12-03 Mario Andrade

你现在的代码（标记和CSS）是什么样的？你在使用img标签或背景图片吗？ – 2014-12-03 14:26:17

您可以覆盖[图像映射]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map）吗？ – 2014-12-03 14:27:46

我成功地使用了这个插件http://www.outsharked.com/imagemapster/default.aspx?demos.html#shapes来实现类似的功能。 – 321zeno 2014-12-03 15:12:20

做到这一点的一种方法可能是将您需要的六个图像的每个组合存入一个大图像。然后，根据用户的答案组合，将相应的图像作为div的背景图像插入。然后覆盖与划分边缘大致相关的同一个div内的可点击热点。

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

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

我可以推荐Raphael.js作为起点。你应该能够找到你的文档中需要什么

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

（归功于julienbidoret为的jsfiddle）

的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。

来源

2014-12-03 15:01:52

带有图形不规则形状的网格

回答

相关问题