Polygonales Bildrasterlayout basierend auf SVG

Kurzes Tutorial

Dies ist ein mit SVG erstelltes polygonales Bildrasterlayout. In diesem Layout wird SVG verwendet, um den Bildschirm in mehrere Polygone zu unterteilen, und in jedem Polygon wird ein Hintergrundbild festgelegt. Der Effekt ist sehr gut.

Verwendung

Fügen Sie snap.svg in die Seite ein.

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

CSS-Stile

Fügen Sie einige CSS-Stile wie folgt hinzu:

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

Erstellen Sie ein Polygongitter mit dem folgenden js-Code-Layout , bei dem das Hintergrundbild jedes Polygons im Objekt team_rwby platziert wird.

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";
  }

Das Obige ist der Inhalt eines polygonalen Bildrasterlayouts basierend auf SVG. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!