iOS Fix den Speicherort eines UIButton über ein zoombares Bild, so dass es gezoomt und skaliert mit dem Bild

Question

Neuer Typ hier zum Programmieren. Auch mein erster Beitrag. Ich habe versucht, etwas darüber zu recherchieren, und ich habe einige Threads gefunden, aber die meisten waren ein paar Jahre alt oder nicht für iOS.

In einer iOS-App versuche ich klickbare Schaltflächen über ein hochauflösendes Bild eines mechanischen Panels einiger Geräte zu platzieren. Die Idee ist, dass der Benutzer in das Bild zoomen könnte, um zu tippen, d. H. Umzuschalten und ein Popup zu erhalten, das erklärt, wofür der Schalter ist.

Nachdem ich einige Videos angeschaut hatte, konnte ich ein UIScrollView erstellen und ein UIImageView des HD-Bildes hineinlegen. Ich kann hinein- und herauszoomen und das Panel in Ordnung bringen.

Ich dachte mit UIButton zu definieren "klickbare" Bereiche des Panels wäre ein Weg zu gehen (nicht sicher, ob dies der beste Ansatz ist). Die Tasten geben mir jedoch einige Probleme:

Nach dem Einzoomen bleiben die Schaltflächen nicht über die gleichen Pixel im Verhältnis zum HD-Bild, und die Größe der Schaltfläche "wächst" nicht mit dem Zoomen. Wenn der Zoom vergrößert wird, ist der Bereich, den die Schaltfläche abdeckt, kleiner und nicht über dem richtigen Platz.

Ich habe versucht, Einschränkungen relativ zum HD-Bild und auch relativ die Bildlaufansicht anzuwenden. Ich habe versucht, das Bild und den Knopf in einen Stapel zu legen. Offensichtlich fehlen mir hier einige Grundlagen. Es scheint, dass dies ein bisschen zu weit fortgeschritten ist, wo ich bin.

Irgendwelche Ideen, wie Sie das beheben können? Wäre es auch besser, anstelle von UIButtons Tap-Gesten zu verwenden?

Vielen Dank für Ihre Zeit! PS: Alle Tutorialvideos oder Artikel zu diesem Thema wären willkommen.

Answer 1

Eine Idee besteht darin, die Schaltfläche zum übergeordneten Element der Bildlaufansicht (ein Geschwister in der Bildlaufansicht) zu machen, die nach der Bildlaufansicht angeordnet ist, sodass sie oben liegt.

 parent view (probably the view controllers view) 
      | 
    |-----------| 
scrollView button 

Lassen Sie uns sagen, bevor die Scroll-gescrollt oder gezoomt wurde, können Sie die Taste an CGRect imageButtonFrame = CGRectMake(10,20,80,40) erscheinen soll. Wir könnten sagen, dass diese Koordinaten im "Bildraum" liegen. Die Funktion, die diese auf die Bildlaufansicht Geschwister-Karten wie folgt aussieht:

UIView *parentView = self.view; // this assumes both button and scrollView are children of the view controller's view 
self.button.frame = [scrollView convertRect:imageButtonFrame toView:parentView]; 

Was ist das schön ist, dass der UIScrollView, bewusst sein eigenen contentOffset und zoomScale, funktioniert die Berechnung in Bezug auf diese Werte. Solange Sie dieses Code-Snippet verwenden, um den Rahmen der Schaltfläche festzulegen, bleibt dieser Rahmen als imageButtonFrame im Bildbereich fixiert.

den Rahmen Bleiben Sie up-to-date durch die Delegierten des Scroll immer ...

self.scrollView.delegate = self; 

und finden Sie heraus, wenn die mit Offset- oder Änderungen Zoomstufe:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { 
    self.button.frame = // ... as above 
} 

Das Gleiche gilt für scrollViewDidZoom:(UIScrollView *)scrollView

Answer 2

Ich habe endlich die Antwort gefunden. Es ist sehr einfach. Die Schaltfläche muss als Unteransicht der imageView hinzugefügt werden, in der sich das Bild befindet.Ich war nicht in der Lage, dies durch die Schnittstelle zu tun, nur programmatisch wie folgt aus:

imageView.addSubview(button) 

Es scheint, Swift kümmert sich um den Rest. Die Schaltfläche bewegt sich und skaliert perfekt mit dem Bild.