Disposition de grille d'images polygonale basée sur SVG

Bref tutoriel

Il s'agit d'une disposition de grille d'images polygonales réalisée en SVG. Dans cette disposition, SVG est utilisé pour diviser l'écran en plusieurs polygones, et une image d'arrière-plan est définie dans chaque polygone. L'effet est très bon.

Utilisation

Introduisez snap.svg dans la page.

<script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js&#39;></script>

Styles CSS

Ajoutez quelques styles CSS comme suit :

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

Créez une grille de polygones grâce à la disposition du code js suivante , dans lequel l'image d'arrière-plan de chaque polygone est placée dans l'objet 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({
        &#39;x&#39;: polygon.startPoint[0],
        &#39;y&#39;: polygon.startPoint[1],
        &#39;width&#39;: polygon.width,
        &#39;height&#39;: polygon.height
      }).attr(&#39;viewBox&#39;, "");
 
    var path = paper.path({
      "d": make_path(polygon.coordinates),
      "strokeWidth": polygon.strokeWidth,
      &#39;stroke-linejoin&#39;: "round",
      &#39;stroke&#39;: 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";
  }

Ce qui précède est le contenu de la disposition de la grille d'images polygonales basée sur SVG. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !