20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

imageview single wheel finish

Browse Source
This commit is contained in:
Chaebean Yang 2025-06-09 16:52:55 +09:00
parent 63f3c55041
commit f5234214a0
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
View File

@ -19,16 +19,21 @@
$: tripId = page.params.tripId; $: tripId = page.params.tripId;
$: memoryId = page.params.memoryId; $: memoryId = page.params.memoryId;
$: currentImage = memory?.images?.[currentImageIndex]; $: currentImage = memory?.images?.[currentImageIndex];
//make gradient-wheel rotate with currwnt image
$: { $: {
if (memory?.images?.length > 0) { if (memory?.images?.length > 0) {
const imageCount = memory.images.length; const imageCount = memory.images.length;
const sliceAngle = 360 / imageCount; const sliceAngle = 360 / imageCount;
rotationAngle = 90 - sliceAngle / 2 + sliceAngle * currentImageIndex; rotationAngle = sliceAngle * currentImageIndex - 90;
console.log('Rotation angle:', rotationAngle);
} else { } else {
rotationAngle = 0; rotationAngle = 0;
} }
} }
$: wheelStyle = {
transform: `translateY(-50%) rotate(${rotationAngle}deg)`,
transformOrigin: 'center center'
};
onMount(async () => { onMount(async () => {
if (tripId && memoryId) { if (tripId && memoryId) {
@ -156,7 +161,7 @@
const r = data[idx], g = data[idx + 1], b = data[idx + 2]; const r = data[idx], g = data[idx + 1], b = data[idx + 2];
const [h, s, br] = rgbToHsb(r, g, b); const [h, s, br] = rgbToHsb(r, g, b);
if (s < 10 || br < 20) continue; //color correction if (br < 20 || s < 10) continue; //color correction
const rgb = `rgb(${r},${g},${b})`; const rgb = `rgb(${r},${g},${b})`;
columns[colIndex].push(rgb); columns[colIndex].push(rgb);
@ -188,7 +193,8 @@
function makeConcentricGradients(groups, rotationOffset = 0) { function makeConcentricGradients(groups, rotationOffset = 0) {
return groups.map(colors => { return groups.map(colors => {
const step = 360 / colors.length; const step = 360 / colors.length;
return `conic-gradient(from ${rotationOffset}deg, ${colors.map((c, i) => `${c} ${i * step}deg ${(i + 1) * step}deg`).join(', ')})`; const start = rotationOffset + 90 - 180/memory.images.length;
return `conic-gradient(from ${start}deg, ${colors.map((c, i) => `${c} ${i * step}deg ${(i + 1) * step}deg`).join(', ')})`;
}); });
} }
@ -226,10 +232,7 @@
<div class="wheel-container"> <div class="wheel-container">
<div class="wheel-mask"> <div class="wheel-mask">
<div <div class="gradient-wheel" style={wheelStyle}>
class="gradient-wheel"
style={`transform: translateY(-50%) rotate(${rotationAngle}deg); transform-origin: center center;`}
>
{#each gradientLayers as style} {#each gradientLayers as style}
<div class="layer" style={style}></div> <div class="layer" style={style}></div>
{/each} {/each}
@ -348,6 +351,7 @@
height: 35vw; height: 35vw;
left: -17.5vw; left: -17.5vw;
top: 50%; top: 50%;
transform: translateY(-50%);
border-radius: 50%; border-radius: 50%;
} }