react-svg-spritesheet
Version:
use trimmed or polygon packed sprites without webGL/canvas 2d in the dom
38 lines (37 loc) • 2.42 kB
JavaScript
"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 GetRectSprite = function (spritesheet, spriteName, spritesheetUrl, width, height) {
// const spriteData = spritesheet.frames["4_square_6x6"];
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 clipRectWidth = spriteData.frame.w / spriteData.sourceSize.w;
var clipRectHeight = spriteData.frame.h / spriteData.sourceSize.h;
var cleanedSpriteName = spriteName;
var clipPathId = cleanedSpriteName + "-clip";
return (react_1.default.createElement("svg", { width: spriteData.sourceSize.w + "px", height: spriteData.sourceSize.h + "px", style: { width: width, height: height, margin: 0, padding: 0 } },
react_1.default.createElement("defs", null,
react_1.default.createElement("clipPath", { id: clipPathId, preserveAspectRatio: "none" },
react_1.default.createElement("rect", { x: rectX * 100 + "%", y: rectY * 100 + "%", width: clipRectWidth * 100 + "%", height: clipRectHeight * 100 + "%" }))),
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 = GetRectSprite;