質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

(Swift)二つの画像を同時に動かしたいです.

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,962

score 6

(Swift)二つの画像を同時に動かしたいです.

現在,ipadで使う顕微鏡に関するアプリケーションを作っています.
そこで,顕微鏡のプレパラートの動きと見え方を対応させるようなものを考えているのですが,うまくいきません.
具体的には,ビューの中に円形のコンテナビューを入れて,そこに表示させる画像の動きをビューに置いてある画像のドラッグによる動きと合わせたいのです.
それぞれ別々に操作することはできるのですが,ビューに置いてある画像の動きにコンテナビューの中にある画像の動きを対応させるにはどうすればいいのでしょうか.

初心者なので,伝わりにくい質問かとは思いますが,宜しくお願い致します.

発生している問題・エラーメッセージ

書いたソースコード

完全に初心者なので,とりあえず画像を動かせるコードだけ調べてコピペしました.
import UIKit

class ViewController: UIViewController {

let image = UIImageView()

override func viewDidLoad() {
super.viewDidLoad()

image.image = UIImage(named: "1.JPG")

// 画像のフレームを設定
image.frame = CGRect(x:0, y:0, width:304, height:304)

// タッチ操作を enable
image.isUserInteractionEnabled = true

self.view.addSubview(image)

}

// 画面にタッチで呼ばれる
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
print("touchesBegan")

}

// ドラッグ時に呼ばれる
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

// タッチイベントを取得
let touchEvent = touches.first!

// ドラッグ前の座標, Swift 1.2 から
let preDx = touchEvent.previousLocation(in: self.view).x
let preDy = touchEvent.previousLocation(in: self.view).y

// ドラッグ後の座標
let newDx = touchEvent.location(in: self.view).x
let newDy = touchEvent.location(in: self.view).y

// ドラッグしたx座標の移動距離
let dx = newDx - preDx
print("x:\(dx)")

// ドラッグしたy座標の移動距離
let dy = newDy - preDy
print("y:\(dy)")

// 画像のフレーム
var viewFrame: CGRect = image.frame

// 移動分を反映させる
viewFrame.origin.x += dx
viewFrame.origin.y += dy

image.frame = viewFrame

self.view.addSubview(image)
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
print("End")
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}
![イメージ説明](a455775b1efeb78877290191bec78b77.png)

試したこと

ビューにある画像の座標情報をコンテナビューにある画像に常に送れればいいのかなと思い,その方法も調べたのですが,私の理解力が足りずよく分からない結果となりました.

補足情報(言語/FW/ツール等のバージョンなど)

swift/storyboard

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • fuzzball

    2017/05/24 14:09 編集

    コードは ``` で囲って下さい。で、質問には直接関係ない(かも知れない)のですが、なぜContainerViewを使っているのでしょうか?ImageViewをそのまま貼り付けると不都合がありますか?

    キャンセル

  • oro

    2017/06/29 15:19

    返信遅れて申し訳ありません. 丁寧な回答ありがとうございます. コンテナビューを使って複数のビューで画像を表示する理由についてですが,画像が表示される場所は移動させず,表示する箇所を変えたいと考えているためです. そのため,質問で挙げた画像を例にすると,下の画像は画像の表示される箇所は変更せずに表示される場所だけを移動できるようにし,それに対応して,上の画像は画像を表示する場所は変えずに表示する画像の箇所を変更というものにしたいのです. 拙い文章で申し訳ないのですが,宜しくお願い致します.

    キャンセル

回答 2

+2

ビューにある画像の座標情報をコンテナビューにある画像に常に送れればいいのかなと思い

の参考になるかもしれないリンク。
Swift3.0で画像の切り抜き

UIImageの一部分を切り出して、新たなUIImageを作成出来ます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/24 15:49

    なるほど、大きな画像から必要な部分を切り出して顕微鏡像用のビューに表示する方式の方が簡潔になりそうです。情報ありがとうございます。

    キャンセル

0

2つのビューを同じタイミングで動かす考え方については、単純に複数のビューに対して同様の手順をとるだけで問題ないかと思います(現在のところtouchesMovedの中で1枚のビューしか動かしていませんが、ここで複数のビューを操作)。

ストーリーボード上に配置したビューを操作する方法をお探しでしょうか?その場合は、配置したビューとコード上のアウトレットをつないで対応づけた上で、同じようにそのビューに対して操作を行うという形になるでしょう。
アウトレットに関する記事がありましたので、ご参考にいかがでしょうか。
アウトレット - Swift による iOS 開発入門

※顕微鏡の動きといいますと、プレパラートの動きに合わせて視野が逆に動く...というアレでしょうか。子供の頃を思い出して懐かしくなりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/24 13:05

    回答ありがとうございます。

    回答を受け、いろいろやってみてるのですが、なかなか上手くいきません。

    1つ質問なのですが、操作するビューコントローラーの画像と違うビューコントローラーの画像を操作する画像に対応させる時に、操作する画像があるビューコントローラーで違うビューコントローラーの画像を指定できるのでしょうか?

    分かりにくい質問で申し訳ありません。
    宜しくお願いします。

    キャンセル

  • 2017/05/24 14:28 編集

    今回の場合、一つの画面内にプレパラートの画像と顕微鏡拡大像の画像があり、プレパラートを動かすと拡大像も動く、というデザインですので、この部分に関してはあえて複数のビューコントローラーを使う必要はないかと思います。
    ご提示のコードのviewDidLoadの中にself.view.addSubview(image)
    という部分がありますが、ビューコントローラーが管理しているself.viewは他のビューを入れ子にして持つことができますので、プレパラートのUIImageViewと拡大像のUIImageViewを共にself.viewのサブビューとして追加できます(両者は同じ親を持つ兄弟関係に当たります)。これらをビューコントローラーから同時に操作します。
    なお、ご提示のコードの場合は、アプリを実行した際に新しくUIImageViewを作って、それをサブビューとして追加する方法をとっていますが(このため、ビューコントローラーと一つの画像は一対一で対応するものとご想像されたかもしれません)、画像のようにストーリーボード上でビューを配置していってもビューの親子・兄弟関係を組み立てることができます。この場合に、アウトレットの機能によってストーリーボード上の各ビューとSwiftコード上の変数を繋ぎ、コード上からビューを操作できるようにします(参考サイトでもUILabelやUITextFieldをアウトレットを介して繋いでいますが、これらラベルやテキストフィールドもビューの一種です)。なんだかややこしくなってしまいすみません。
    ちなみに、複雑な画面構成の場合、複数のビューコントローラーを用意して、メインのビューコントローラーが操作するビューの子として、別のビューコントローラーが操作するビューを追加する...といった方法をとることもあるようです。

    キャンセル

  • 2017/06/29 15:12

    返信遅れて申し訳ありません.
    丁寧な回答ありがとうございます.

    コンテナビューを使って複数のビューで画像を表示する理由についてですが,画像が表示される場所は移動させず,表示する箇所を変えたいと考えているためです.

    そのため,質問で挙げた画像を例にすると,下の画像は画像の表示される箇所は変更せずに表示される場所だけを移動できるようにし,それに対応して,上の画像は画像を表示する場所は変えずに表示する画像の箇所を変更というものにしたいのです.

    拙い文章で申し訳ないのですが,宜しくお願い致します.

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る