lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-09-24 23:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine spotlight click effect preview

Browse Source
This commit is contained in:
webadderall
2026-05-29 23:21:59 +10:00
parent f76912f2eb
commit b9571d5d18
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/SettingsPanel.tsx
+11 -14
View File
@@ -550,20 +550,17 @@ function CursorClickEffectPreview({
</svg>
) : null}
{effect === "spotlight" ? (
<>
<span
className="absolute h-12 w-12 rounded-full blur-[8px]"
style={{ backgroundColor: hexToRgba(color, 0.18) }}
/>
<span
className="absolute h-9 w-9 rounded-full"
style={{ backgroundColor: hexToRgba(color, 0.1) }}
/>
<span
className="absolute h-7 w-7 rounded-full border-[1.5px]"
style={{ borderColor: hexToRgba(color, 0.42) }}
/>
</>
<svg
className="absolute h-12 w-12"
style={{ color: hexToRgba(color, 0.92) }}
viewBox="0 0 48 48"
aria-hidden="true"
>
<g fill="none" stroke="currentColor">
<circle cx="24" cy="24" r="13.5" strokeWidth="1.5" opacity="0.3" />
<circle cx="24" cy="24" r="9.75" strokeWidth="1.7" opacity="0.56" />
</g>
</svg>
) : null}
{effect === "echo" ? (
<svg
src/components/video-editor/videoPlayback/cursorRenderer.ts
+8 -5
View File
@@ -889,9 +889,10 @@ function drawClickEffectGraphics(
if (effect === "spotlight") {
const glowRadius = baseRadius + reveal * cursorSize * effectScale;
const innerRadius = Math.max(baseRadius * 0.72, glowRadius * 0.76);
graphics.circle(px, py, glowRadius);
graphics.fill({ color, alpha: alpha * 0.16 });
graphics.circle(px, py, glowRadius * 0.78);
graphics.stroke({ width: Math.max(1.25, strokeWidth * 0.68), color, alpha: alpha * 0.28 });
graphics.circle(px, py, innerRadius);
graphics.stroke({ width: Math.max(1.5, strokeWidth * 0.75), color, alpha: alpha * 0.5 });
return;
}
@@ -948,14 +949,16 @@ function drawClickEffectOnCanvas(
if (effect === "spotlight") {
const glowRadius = baseRadius + reveal * cursorSize * effectScale;
ctx.fillStyle = `${strokeColor}${(alpha * 0.16).toFixed(3)})`;
const innerRadius = Math.max(baseRadius * 0.72, glowRadius * 0.76);
ctx.lineWidth = Math.max(1.25, strokeWidth * 0.68);
ctx.strokeStyle = `${strokeColor}${(alpha * 0.28).toFixed(3)})`;
ctx.beginPath();
ctx.arc(px, py, glowRadius, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.lineWidth = Math.max(1.5, strokeWidth * 0.75);
ctx.strokeStyle = `${strokeColor}${(alpha * 0.5).toFixed(3)})`;
ctx.beginPath();
ctx.arc(px, py, glowRadius * 0.78, 0, Math.PI * 2);
ctx.arc(px, py, innerRadius, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
return;