基于SVG的多边形图片网格布局

简要教程

这是一款使用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的多边形图片网格布局的内容，更多相关内容请关注PHP中文网（www.php.cn）！