react-svg-spritesheet
Version:
use trimmed or polygon packed sprites without webGL/canvas 2d in the dom
46 lines (45 loc) • 2.82 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 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;