tl; dr Я хочу сохранить точку доступа здравомыслия на экране в разделе 100 ВВт и 100DVH, независимо от того, как пользователь она размещает. Чтобы максимизировать хорошо отображение изображений, раздел заполняет ширину просмотра и высоту видового порта. Я хочу убедиться, что горячая точка всегда видна в этом пространстве, независимо от того, какой размер раздел - как очень динамичный. Некоторые вещи, которые я пробовал, ничего не делают, в то время как другие перемещают изображение слишком далеко, раскрывая пробел за изображением. Даже мои самые близкие попытки, кажется, не содержат горячей точки, независимо от того.
[b] tl; dr [/b] Я хочу сохранить точку доступа здравомыслия на экране в разделе 100 ВВт и 100DVH, независимо от того, как пользователь она размещает. Чтобы максимизировать хорошо отображение изображений, раздел заполняет ширину просмотра и высоту видового порта. Я хочу убедиться, что горячая точка всегда видна в этом пространстве, независимо от того, какой размер раздел - как очень динамичный. Некоторые вещи, которые я пробовал, ничего не делают, в то время как другие перемещают изображение слишком далеко, раскрывая пробел за изображением. Даже мои самые близкие попытки, кажется, не содержат горячей точки, независимо от того.[code]// /sanity.ts
import createImageUrlBuilder from '@sanity/image-url'
/** * ### imageUrlFor * - Gets the Sanity URL for images * - Has helper functions for customizing the output file * * @param source SanityImage * @returns url * @example imageUrlFor(image)?.url() * @example importUrlFor(image)?.format('webp').url() */ export const imageUrlFor = (source: SanityImageReference | AltImage) => { if (!config.dataset || !config.projectId) throw new Error('SANITY_DATASET or SANITY_PROJECT_ID is not set correctcly')
// @ts-expect-error dataset and projectId have been verified return createImageUrlBuilder(config).image(source) } [/code] вспомогательная функция для изменения размера изображения (не важно; просто используется в sanity.ts ниже) [code]// /utils/functions.ts
/** * ### Compress Width and Height * - Resize the width and height it's the ratio, to the max width/height in pixels * @param {number} width * @param {number} height * @param {number} max width/height (default: 25) * @returns {{ width: number, height: number }} { width: number, height: number } */ export function compressWidthAndHeight( width: number, height: number, max: number = 25, ): { width: number; height: number } { if (width === 0 || height === 0) throw new Error( 'Cannot divide by zero. Please provide non-zero values for the width and height.', )
if (width > height) return { width: max, height: Math.ceil((max * height) / width), } return { width: Math.ceil((max * width) / height), height: max, } } < /code> Моя функция подготовки изображений для следующего компонента изображения.// /utils/sanity.ts
import { SanityImageReference } from '@/typings/sanity' import { getImageDimensions } from '@sanity/asset-utils' import { ImageProps } from 'next/image' import { compressWidthAndHeight } from './functions' import { imageUrlFor } from '@/sanity'
// This lines up the hotspot with the top left corner of the container—sort of… // This is not the intended result, but it was my best attempt at least locating the hotspot in some way. img.style.top = `${hotspot.y * 100}` img.style.left = `${hotspot.x * 100}` img.style.transform = `translateX(-${hotspot.x * 100}%) translateY(-${hotspot.y * 100}%) scaleX(${hotspot.width * 100 + 100}%) scaleY(${hotspot.height * 100 + 100}%)`< /code> * { margin: 0; padding: 0; position: relative; min-width: 0; }
html { color-scheme: light dark; }
body { min-height: 100svh; font-family: ui-sans-serif; }
Мобильная версия