Pan & Zoom Görüntü
Kullanıcı sağlayacak WPF basit bir resim görüntüleyici oluşturmak istiyorum:
- Pan (fare görüntü sürükleyerek).
- Zoom (kaymak ile).
- Bindirmeleri (örneğin dikdörtgen seçimi) gösterir.
- Orijinal görüntü kaydırma çubuklarını gerekirse) göster.
Bunu nasıl açıklayabilir misiniz?
Web üzerinde iyi bir örnek bulamadım. ViewBox kullanmalıyım? Ya İmageBrush? ScrollViewer ihtiyacım var mı?
Teşekkürler!
CEVAP
Bu sorun ClipToBounds özelliği ile bir Sınır içinde görüntü vermek oldu çözdüm şekilde True olarak ayarlayın. Görüntü üzerinde RenderTransformOrigin sonra görüntü merkezi odaklanıp başlayacak yani 0.5,0.5 ayarlanır. Bu RenderTransform da bir TransformGroup bir ScaleTransform ve bir TranslateTransform içeren ayarlanır.
Daha sonra görüntü üzerinde fare tekeri olay yakınlaştırma uygulamak için işlenmiş
private void image_MouseWheel(object sender, MouseWheelEventArgs e)
{
var st = (ScaleTransform)image.RenderTransform;
double zoom = e.Delta > 0 ? .2 : -.2;
st.ScaleX = zoom;
st.ScaleY = zoom;
}
Kolu kaydırma yaptığım ilk şey oldu kolu MouseLeftButtonDown olayı görüntü yakalamak için fare ve kayıt yerini, ben de mağaza mevcut değeri TranslateTransform, bu nedir updated uygulamak için kaydırma.
Point start;
Point origin;
private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
image.CaptureMouse();
var tt = (TranslateTransform)((TransformGroup)image.RenderTransform)
.Children.First(tr => tr is TranslateTransform);
start = e.GetPosition(border);
origin = new Point(tt.X, tt.Y);
}
Sonra MouseMove olay TranslateTransform güncelleme yaptım.
private void image_MouseMove(object sender, MouseEventArgs e)
{
if (image.IsMouseCaptured)
{
var tt = (TranslateTransform)((TransformGroup)image.RenderTransform)
.Children.First(tr => tr is TranslateTransform);
Vector v = start - e.GetPosition(border);
tt.X = origin.X - v.X;
tt.Y = origin.Y - v.Y;
}
}
Sonunda fare yakalama serbest bırakmak için unutma.
private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
image.ReleaseMouseCapture();
}
Seçimi bu bir donatıcı kullanarak gerçekleştirilebilir yeniden boyutlandırmak için kolları olarak, daha fazla bilgi için this article check out.
PHP ile PNG için SVG görüntü dönüştürm...
Bindirme görüntü üzerinde fare etkileş...
Ayarı kod görüntü kaynağı WPF...
CSS-görüntü-arka plan donukluk?...
Devre dışı bir HTML sayfasından bir gö...