React ile Resim Yakınlaştırma Uygulaması

Neredeyse tüm alışveriş sitelerinde yer alan fotoğrafın üstüne mouse ile geldiğimizde ilgili alanı yakınlaştıran uygulamanın React ile nasıl yapılabileceğini aktarıyor olacağım sizlere.

İlk olarak npx create-react-app image-magnifier komutu yardımıyla React uygulamamızı oluşturalım. Ardından herhangi bir problem olmadığını, uygulamamızın çalışıyor olduğunu teyit etmek adına cd image-magnifier ile uygulama dizinimize girip npm start konutuyla uygulamamızı başlatalım. Açılan pencerede eğer React’ın logosunu görüyor iseniz her şey yolunda demektir. 🎉

Uygulamamızın src klasörünün altına components adı altında bir klasör oluşturalım ve bu klasörün içine ImageMagnifier.jsx dosyamızı oluşturalım.

Componentimiz 6 adet props almakta, kullanacağımız olan resmin adresini, yüksekliğini ve genişliğini belirlemek gerekirken diğer propslar default değerlere sahip oldukları için her seferinde yazmamıza gerek olmayacak.

Ben componentleri stillendirmek için styled-components kullanıyorum, uygulamamıza ilgili paketi dahil edelim. npm install — save styled-components komutuyla bu işlemi tamamladık. Componentimizle aynı dizine styles.js adında bir dosya oluşturalım.

Bu styles.js dosyasını ImageMagnifier Componentine çağırıp kullanalım, bu işlemler sonrası ImageMagnifier.jsx dosyamız bu şekilde olacaktır:

Uygulamamızın iskeleti oluştu, şimdi büyütecimizin görünürlüğünü kontrol edecek useState hook’u yazalım.

const [showMagnifier, setShowMagnifier] = useState(false);

Sonrasında büyütecimizin konumunu belirleyecek useState hook’u yazalım.

const [[x, y], setXY] = useState([0, 0]);

Ve son olarak yakınlaştırma sonucu oluşacak görüntünün boyutunu belirleyecek olan useState hook’u yazalım.

const [[imgWidth, imgHeight], setSize] = useState([0, 0]);

Eğer her şeyi doğru yaptıysanız oluşması gereken görüntü şu şekilde olmalıdır.

Şimdi ise mouse ile görüntünün üzerine gelince, üzerinde hareket ettirince ve görüntü üzerinden çıktığımız zaman olmasını istediğimiz fonksiyonları yazalım.

Fonksiyonlarımızı yazdıktan sonra ilgili alanlara bu fonksiyonları eklemeliyiz. Bununla birlikte yukarıda tanımlamış olduğumuz değerleri de yerlerine yazdığımız zaman componentimizin return kısmı şu şekilde olacaktır.

Yukarıdaki resimde gördüğünüz üzere componentlere bir çok props gönderdik. Şimdi bunları styles.js dosyasında nasıl kullanacağımıza bakalım.

Ve uygulamamız hazır.

Uygulamanın kodlarına ulaşmak için: https://codesandbox.io/s/dawn-cherry-j4hfl?file=/src/components/styles.js