@tsparticles/effect-trail
Version:
tsParticles trail effect
90 lines (89 loc) • 4.68 kB
JavaScript
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "@tsparticles/engine"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TrailDrawer = void 0;
const engine_1 = require("@tsparticles/engine");
const minTrailLength = 2, trailLengthOffset = 1, minWidth = -1, defaultLength = 10;
const defaultTransform = {
a: 1,
b: 0,
c: 0,
d: 1,
};
class TrailDrawer {
draw(data) {
const { context, radius, particle, transformData } = data, diameter = radius * engine_1.double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition(), trail = particle.trail;
if (!trail || !particle.trailLength) {
return;
}
const pathLength = particle.trailLength + radius;
trail.push({
color: context.fillStyle ?? context.strokeStyle,
position: {
x: currentPos.x,
y: currentPos.y,
},
transformData: { ...data.transformData },
});
if (trail.length < minTrailLength) {
return;
}
while (trail.length > pathLength) {
trail.shift();
}
const trailLength = Math.min(trail.length, pathLength), canvasSize = {
width: particle.container.canvas.size.width + diameter,
height: particle.container.canvas.size.height + diameter,
};
let lastPos = trail[trailLength - trailLengthOffset].position;
for (let i = trailLength; i > engine_1.none; i--) {
const step = trail[i - trailLengthOffset], position = step.position, stepTransformData = particle.trailTransform
? (step.transformData ?? defaultTransform)
: defaultTransform;
context.setTransform(stepTransformData.a, stepTransformData.b, stepTransformData.c, stepTransformData.d, position.x, position.y);
context.beginPath();
context.moveTo(lastPos.x - position.x, lastPos.y - position.y);
const warp = {
x: (lastPos.x + canvasSize.width) % canvasSize.width,
y: (lastPos.y + canvasSize.height) % canvasSize.height,
};
if (Math.abs(lastPos.x - position.x) > canvasSize.width * engine_1.half ||
Math.abs(lastPos.y - position.y) > canvasSize.height * engine_1.half) {
lastPos = position;
continue;
}
context.lineTo(Math.abs(lastPos.x - position.x) > canvasSize.width * engine_1.half ? warp.x : engine_1.originPoint.x, Math.abs(lastPos.y - position.y) > canvasSize.height * engine_1.half ? warp.y : engine_1.originPoint.y);
const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? minWidth), oldAlpha = context.globalAlpha;
context.globalAlpha = particle.trailFade ? i / trailLength : engine_1.defaultAlpha;
context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
context.strokeStyle = step.color;
context.stroke();
context.globalAlpha = oldAlpha;
lastPos = position;
}
context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
}
particleInit(container, particle) {
particle.trail = [];
const effectData = particle.effectData;
particle.trailFade = effectData?.fade ?? true;
particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
particle.trailMaxWidth = effectData?.maxWidth
? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio
: undefined;
particle.trailMinWidth = effectData?.minWidth
? (0, engine_1.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio
: undefined;
particle.trailTransform = effectData?.transform ?? false;
}
}
exports.TrailDrawer = TrailDrawer;
});