tsparticles
Version:
Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
96 lines (95 loc) • 3.98 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { Utils } from "../Utils";
import { ShapeType } from "../Enums";
export class ImageDrawer {
constructor() {
this.images = [];
}
getSidesCount() {
return 12;
}
getImages(container) {
const containerImages = this.images.filter((t) => t.id === container.id);
if (!containerImages.length) {
this.images.push({
id: container.id,
images: [],
});
return this.getImages(container);
}
return containerImages[0];
}
addImage(container, image) {
const containerImages = this.getImages(container);
containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
}
init(container) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
const options = container.actualOptions;
const shapeOptions = options.particles.shape;
if (!Utils.isInArray(ShapeType.image, shapeOptions.type) &&
!Utils.isInArray(ShapeType.images, shapeOptions.type)) {
return;
}
const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
if (imageOptions instanceof Array) {
for (const optionsImage of imageOptions) {
yield this.loadImageShape(container, optionsImage);
}
}
else {
yield this.loadImageShape(container, imageOptions);
}
});
}
destroy() {
this.images = [];
}
loadImageShape(container, imageShape) {
return __awaiter(this, void 0, void 0, function* () {
try {
const image = imageShape.replaceColor
? yield Utils.downloadSvgImage(imageShape.src)
: yield Utils.loadImage(imageShape.src);
if (image) {
this.addImage(container, image);
}
}
catch (_a) {
console.warn(`tsParticles error - ${imageShape.src} not found`);
}
});
}
draw(context, particle, radius, opacity) {
var _a, _b;
if (!context) {
return;
}
const image = particle.image;
const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
if (!element) {
return;
}
const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1;
const pos = {
x: -radius,
y: -radius,
};
if (!(image === null || image === void 0 ? void 0 : image.data.svgData) || !(image === null || image === void 0 ? void 0 : image.replaceColor)) {
context.globalAlpha = opacity;
}
context.drawImage(element, pos.x, pos.y, radius * 2, (radius * 2) / ratio);
if (!(image === null || image === void 0 ? void 0 : image.data.svgData) || !(image === null || image === void 0 ? void 0 : image.replaceColor)) {
context.globalAlpha = 1;
}
}
}