简要教程
这是一款使用svg来制作的多边形图片网格布局。该布局中通过svg来将屏幕划分为多个多边形，每个多边形中设置一张背景图片，效果非常不错。
使用方法
在页面中引入snap.svg。
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>
css样式
添加如下的一些css样式：
body {
margin:0px;
padding: 0px;
background-color: #141414; overflow: hidden;
}
path{
-webkit-transition:opacity 0.1s;
cursor:pointer;
opacity: 0.6;}
path:hover{
opacity: 1;
}
javascript
通过下面的js代码来构建多边形网格布局，其中对象team_rwby中放置的是每个多边形的背景图片。
window.onload = function(argument) {
w = window.innerwidth,
h = window.innerheight;
/* svg init */
var paper = snap(w, h);
var team_rwby = {
"ruby": "http://img.hb.aicdn.com/5d85ca4552076e9ebc84c9275794bebc1ce1dbf12498e-qpbnqc_fw658",
"weiss": "http://img.hb.aicdn.com/ed55102bd05a0c95473cb958747091f2fcb3b98e94c0b-pc5ebl_fw658",
"blake": "http://img.hb.aicdn.com/4736a6567a20b1c6d8af1ab22d827abd23bd7f044fd95-3dmoyr_fw658",
"yang": "http://img.hb.aicdn.com/29125306a1a2cfd2d732a54b487d37b7372c36c8692ce-owtmnw_fw658"
};
/* this polygons' array include coordinates and image's source */
var polygons = [];
polygons.push({
"coordinates": [
[0, 0],
[w * 0.6, 0],
[0, h * 0.5]
],
"strokestyle": "black",
"strokewidth": 10,
"image_src": team_rwby.ruby
}, {
"coordinates": [
[0, h * 0.5],
[w * 0.3, h * 0.25],
[w * 0.55, h],
[0, h]
],
"strokestyle": "black",
"strokewidth": 10,
"image_src": team_rwby.yang
}, {
"coordinates": [
[w * 0.3, h * 0.25],
[w * 0.75, h * 0.55],
[w * 0.55, h],
],
"strokestyle": "black",
"strokewidth": 10,
"image_src": team_rwby.blake
}, {
"coordinates": [
[w * 0.55, h],
[w, 0],
[w, h],
],
"strokestyle": "black",
"strokewidth": 10,
"image_src": team_rwby.ruby
}, {
"coordinates": [
[w * 0.6, 0],
[w, 0],
[w * 0.75, h * 0.55],
[w * 0.3, h * 0.25],
],
"strokestyle": "black",
"strokewidth": 10,
"image_src": team_rwby.weiss
});
for (var i = 0; i < polygons.length; i++) {
make_polygon_layout(paper, polygons[i]);
}
}
function make_polygon_layout() {
paper = arguments[0];
polygon = arguments[1];
tempa = [];
for (var i = 0; i < polygon.coordinates.length; i++) {
tempa[i] = polygon.coordinates[i];
}
/* get largest and smallest x coordinate */
tempa.sort(function(a, b) {
return a[0] - b[0];
});
sx = tempa[0][0];
bx = tempa[tempa.length - 1][0];
/* get largest and smallest ycoordinate */
tempa.sort(function(a, b) {
return a[1] - b[1];
});
sy = tempa[0][1];
by = tempa[tempa.length - 1][1];
polygon.startpoint = [sx, sy];
polygon.endpoint = [bx, by];
polygon.width = polygon.endpoint[0] - polygon.startpoint[0];
polygon.height = polygon.endpoint[1] - polygon.startpoint[1];
var pattern = paper.image(polygon.image_src, 0, 0, polygon.width, polygon.height)
.attr("preserveaspectratio", "xmidymid slice")
.pattern({
'x': polygon.startpoint[0],
'y': polygon.startpoint[1],
'width': polygon.width,
'height': polygon.height
}).attr('viewbox', "");
var path = paper.path({
"d": make_path(polygon.coordinates),
"strokewidth": polygon.strokewidth,
'stroke-linejoin': "round",
'stroke': polygon.strokestyle,
"fill": pattern,
});
path.click(function(event) {
});
}
function make_path() {
d = "m";
coordinates = arguments[0];
for (var i = 0; i < coordinates.length; i++) {
if (i == 0) {
d += coordinates[i][0] + " " + coordinates[i][1]
} else {
d += "l" + coordinates[i][0] + " " + coordinates[i][1]
}
}
return d + "z";
}
以上就是基于svg的多边形图片网格布局的内容。