ホームページ > 記事 > ウェブフロントエンド > 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 中国語 Web サイト (www.php.cn) をご覧ください。