帶有圖形不規則形狀的網格

由於它必須在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

帶有圖形不規則形狀的網格

回答

相關問題