UNPKG

react-svg-spritesheet

Version:

use trimmed or polygon packed sprites without webGL/canvas 2d in the dom

46 lines (45 loc) 2.82 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); var react_1 = __importDefault(require("react")); var GetPolygonSprite = function (spritesheet, spriteName, spritesheetUrl, width, height) { if (width === void 0) { width = "auto"; } if (height === void 0) { height = "auto"; } if (spritesheet.frames === undefined) { return react_1.default.createElement("span", null, "spritesheet has no frames"); } if (spritesheet.frames[spriteName] === undefined) { return react_1.default.createElement("span", null, "sprite ", spriteName, " not found"); } var spriteData = spritesheet.frames[spriteName]; var spriteWidth = spritesheet.meta.size.w / spriteData.sourceSize.w; var spriteHeight = spritesheet.meta.size.h / spriteData.sourceSize.h; var spriteX = (spriteData.frame.x / spritesheet.meta.size.w) * spriteWidth; var spriteY = -(spriteData.frame.y / spritesheet.meta.size.h) * spriteHeight; var rectX = spriteData.spriteSourceSize.x / spriteData.sourceSize.w; var rectY = spriteData.spriteSourceSize.y / spriteData.sourceSize.h; var clipPathId = spriteName + "-clip"; var pathBuilder = []; if (spriteData.triangles !== undefined) { spriteData.triangles.forEach(function (t) { if (spriteData.vertices !== undefined) { pathBuilder.push("M" + spriteData.vertices[t[0]][0] + "," + spriteData.vertices[t[0]][1]); pathBuilder.push("L " + spriteData.vertices[t[1]][0] + "," + spriteData.vertices[t[1]][1]); pathBuilder.push("L " + spriteData.vertices[t[2]][0] + "," + spriteData.vertices[t[2]][1]); pathBuilder.push("z"); } }); } var pathD = pathBuilder.join(" "); return (react_1.default.createElement("svg", { width: spriteData.sourceSize.w + "px", height: spriteData.sourceSize.h + "px", preserveAspectRatio: "none", viewBox: "0 0 " + spriteData.sourceSize.w + " " + spriteData.sourceSize.h, style: { width: width, height: height, padding: 0, margin: 0 } }, react_1.default.createElement("defs", null, react_1.default.createElement("clipPath", { id: clipPathId, preserveAspectRatio: "none" }, react_1.default.createElement("path", { d: pathD, fill: "white", stroke: "none" }))), react_1.default.createElement("image", { href: spritesheetUrl, preserveAspectRatio: "none", x: (spriteX + rectX) * 100 + "%", y: (spriteY + rectY) * 100 + "%", width: spriteWidth * 100 + "%", height: spriteHeight * 100 + "%", clipPath: "url(#" + clipPathId + ")" }))); }; exports.default = GetPolygonSprite;