swiftの表記をSwiftUIで表現したい。初心者

Question

Websiteで見つけた、Imageを多角形にする方法を
SwiftUIで落とし込んでも"Cannot find 'imageview' in scope"のエラーが出ます。

import SwiftUI
import UIKit

extension UIImageView {

func clipToPolygon(corners: Int) {
    guard corners >= 3 else {
        print("(#file)(#function) corerns must be >= 3")
        return
    }
    let radius = min(self.frame.width/2.0,self.frame.height/2.0)
    let center = CGPoint(x:self.bounds.width/2.0,y:self.bounds.height/2.0)
    let path = UIBezierPath()
    path.lineWidth = 1
    for index in 0...corners {
        let rad = (Double.pi / Double(corners) ) * Double(index * 2 + 1)
        print(rad * 180 / Double.pi)
        let drawPoint = CGPoint(x: center.x + radius * CGFloat(cos(rad)),
                                y: center.y + radius * CGFloat(sin(rad)))
        if (index == 0) {
            path.move(to: drawPoint)
            
        } else if (index == corners  ) {
            path.close()
        } else {
            path.addLine(to: drawPoint)
        }
        
    }
    
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    self.layer.mask = mask
    self.layer.masksToBounds = false
}

}

struct ContentView: View {
var body: some View {

    imageview.clipToPolygon(corners:6)

//ここでエラー

}

}

お力を貸してください。

Comments

[退会済みユーザー]

回答について全く無反応ですがどうされたのでしょうか

Answer 1

「SwiftUIで6角形を作りたい。」の内容をふまえると、UIImageView のエクステンションを SwiftUI と統合したいというより、画像を六角形でくりぬくのが目的なのでしょうか？

画像に対して .clipShape() を使い、好きな形のシェイプをわたせばその形にくりぬくことができます。前述の質問で作った Hexagon シェイプがあるなら、次のようにして正六角形にくりぬけます。

struct ContentView: View {
  var body: some View {
    Image("Sample")
      .resizable()
      .aspectRatio(contentMode: .fill)
      .clipShape(Hexagon())
  }
}

---

これが、ブラー効果を画像にかけながらその効果を正六角形でくりぬきたいとなると少し難しくなります。SwiftUI ではブラー効果自体は .blur でかんたんにかけられますが、その効果範囲だけをシェイプでくりぬくことができません。

struct ContentView: View {
  var body: some View {
    Image("Sample")
      .resizable()
      .aspectRatio(contentMode: .fill)
      .blur(radius: 5, opaque: true)
      // .clipShape(Hexagon()) を追加してもブラーのかかった画像全体をくりぬいてしまう
  }
}

ZStack を使ってブラーのかかった画像とくりぬいた画像を重ねるのも一つの手ですが、スマートではないです。

struct ContentView: View {
  var body: some View {
    ZStack {
      Image("Sample")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .blur(radius: 50, opaque: true)

      Image("Sample")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .clipShape(Hexagon())
    }
  }
}

---

そこで、UIKit に用意された効果そのもののビュー UIVisualEffectView を SwiftUI に統合し、そのビューをくりぬくようにします。

UIKit のビューを SwiftUI で使うには UIViewRepresentable プロトコルを使って構造体を作ります。

基本的には makeUIView() メソッドで UIKit のビューを作って返し、updateUIView で状態を更新します。いちばんかんたんな作り方としては、そのクラス特有のプロパティの値だけ仲介してセットするようにすればいいです。

よく分からなければ今はコピペでもかまいません。

struct VisualEffectView<T: UIVisualEffectView>: UIViewRepresentable {
  var effect: UIVisualEffect?
  func makeUIView(context: UIViewRepresentableContext<Self>) -> T {
    T()
  }
  func updateUIView(_ uiView: T, context: UIViewRepresentableContext<Self>) {
    uiView.effect = effect
  }
}

これで VisualEffectView というビューが SwiftUI で使えます。これを使って、画像の上にブラー効果を重ね、それをうまくくりぬいて真ん中だけ効果がかからないようにします。

全体としては次のようになります。

import SwiftUI
import UIKit

struct ContentView: View {
  var body: some View {
    ZStack {
      Image("Sample")
        .resizable()
        .aspectRatio(contentMode: .fill)

      VisualEffectView(effect: UIBlurEffect(style: .regular))
        .mask(
          ZStack(alignment: .center) {
            Color.white
            Hexagon().foregroundColor(.black)
          }
          .compositingGroup()
          .luminanceToAlpha()
        )
    }
  }
}

struct VisualEffectView<T: UIVisualEffectView>: UIViewRepresentable {
  var effect: UIVisualEffect?
  func makeUIView(context: UIViewRepresentableContext<Self>) -> T {
    T()
  }
  func updateUIView(_ uiView: T, context: UIViewRepresentableContext<Self>) {
    uiView.effect = effect
  }
}

---

ここからは興味があれば読むくらいでかまいませんが、以下のコードの役割はそれぞれこのようなになります。

.mask(
  ZStack(alignment: .center) {
    Color.white // 全体を覆う白いビュー
    Hexagon().foregroundColor(.black) // 正六角形の黒いシェイプ
  }
  .compositingGroup() // ZStack の中身をひとつのレイヤととらえて合成するためにグループ化
  .luminanceToAlpha() // 黒い部分を透明に、白い部分を不透明にする
)

.luminanceToAlpha() という黒い部分ほど透明にする効果を使うために、全体を覆うビューとシェイプで白黒画像を作っています。