teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問maskedCornersプロパティを使って角丸にしたUIViewをキャプチャ?すると角丸設定が反映されない…。

編集履歴

質問編集履歴

8

訂正

2019/02/12 01:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -153,3 +153,141 @@
153
153
 
154
154
 
155
155
  ![イメージ説明](4ede63f47169f04d06932e05e263014c.png)
156
+
157
+
158
+
159
+
160
+
161
+ 訂正前の質問コード
162
+
163
+ ```swift
164
+
165
+ import UIKit
166
+
167
+ class ViewController: UIViewController {
168
+
169
+ @IBOutlet weak var targetView: UIView!
170
+
171
+
172
+
173
+ override func viewDidLoad() {
174
+
175
+ super.viewDidLoad()
176
+
177
+ // Do any additional setup after loading the view, typically from a nib.
178
+
179
+
180
+
181
+ let copiedImageView = UIImageView()
182
+
183
+ copiedImageView.bounds = targetView.bounds
184
+
185
+ copiedImageView.center = self.view.center
186
+
187
+
188
+
189
+ copiedImageView.image = targetView.captureView()
190
+
191
+
192
+
193
+ self.view.addSubview(copiedImageView)
194
+
195
+
196
+
197
+ }
198
+
199
+ }
200
+
201
+ // 角丸設定
202
+
203
+ @IBDesignable
204
+
205
+ class UpperCornerRView: UIView {
206
+
207
+
208
+
209
+ override func draw(_ rect: CGRect) {
210
+
211
+ self.clipsToBounds = (cornerRadius > 0)
212
+
213
+ if #available(iOS 11.0, *) {
214
+
215
+ self.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
216
+
217
+ }
218
+
219
+ }
220
+
221
+ }
222
+
223
+
224
+
225
+ extension UIView {
226
+
227
+
228
+
229
+ @IBInspectable
230
+
231
+ var cornerRadius: CGFloat {
232
+
233
+ get {
234
+
235
+ return layer.cornerRadius
236
+
237
+ }
238
+
239
+ set {
240
+
241
+ layer.cornerRadius = newValue
242
+
243
+ }
244
+
245
+ }
246
+
247
+
248
+
249
+ func captureView() -> UIImage{
250
+
251
+ // キャプチャする範囲を取得
252
+
253
+ let rect = self.bounds
254
+
255
+
256
+
257
+ // ビットマップ画像のcontextを作成
258
+
259
+ UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
260
+
261
+ let context: CGContext = UIGraphicsGetCurrentContext()!
262
+
263
+
264
+
265
+ // 対象のview内の描画をcontextに複写する
266
+
267
+ self.layer.render(in: context)
268
+
269
+
270
+
271
+ // 現在のcontextのビットマップをUIImageとして取得
272
+
273
+ let capturedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
274
+
275
+
276
+
277
+ // contextを閉じる
278
+
279
+ UIGraphicsEndImageContext()
280
+
281
+
282
+
283
+ return capturedImage
284
+
285
+ }
286
+
287
+
288
+
289
+ }
290
+
291
+
292
+
293
+ ```

7

訂正

2019/02/12 01:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- ![イメージ説明](d227ddfb092d8b83675be050f7f9b850.png)
21
+ ![イメージ説明](4277e6db4c6fc3c414c147fadf9c97bb.png)
22
22
 
23
23
 
24
24
 
@@ -32,7 +32,7 @@
32
32
 
33
33
  class ViewController: UIViewController {
34
34
 
35
-
35
+
36
36
 
37
37
  @IBOutlet weak var targetView: UIView!
38
38
 
@@ -50,9 +50,11 @@
50
50
 
51
51
  //targetViewを角丸設定する
52
52
 
53
+ targetView.backgroundColor = UIColor.green
54
+
53
55
  targetView.layer.cornerRadius = 15
54
56
 
55
- targetView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
57
+ targetView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
56
58
 
57
59
 
58
60
 
@@ -60,17 +62,19 @@
60
62
 
61
63
  // ⇩の方法で角丸にするときちんと複製される
62
64
 
63
- //let path = UIBezierPath(roundedRect:targetView.bounds,
65
+ //targetView.backgroundColor = UIColor.red
64
66
 
65
- //byRoundingCorners:[.topLeft, .topRight],
67
+ //let path = UIBezierPath(roundedRect:targetView.bounds,
66
68
 
67
- //cornerRadii: CGSize(width: 10, height: 10))
69
+ //byRoundingCorners:[.topLeft, .topRight],
68
70
 
69
- //let maskLayer = CAShapeLayer()
71
+ //cornerRadii: CGSize(width: 10, height: 10))
70
72
 
71
- //maskLayer.path = path.cgPath
73
+ //let maskLayer = CAShapeLayer()
72
74
 
75
+ //maskLayer.path = path.cgPath
76
+
73
- //targetView.layer.mask = maskLayer
77
+ //targetView.layer.mask = maskLayer
74
78
 
75
79
 
76
80
 
@@ -132,13 +136,15 @@
132
136
 
133
137
 
134
138
 
139
+
140
+
135
141
  ```
136
142
 
137
143
 
138
144
 
139
145
  storyboard
140
146
 
141
- ![イメージ説明](7b059e097abf802bc444ba2d8e7bb3e9.png)
147
+ ![イメージ説明](eda0519cc8bba4668a565ddfe3b3edb6.png)
142
148
 
143
149
 
144
150
 
@@ -146,4 +152,4 @@
146
152
 
147
153
 
148
154
 
149
- ![イメージ説明](33542c0e3b7004db82db6e252a98130f.png)
155
+ ![イメージ説明](4ede63f47169f04d06932e05e263014c.png)

6

訂正

2019/02/12 01:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,13 +12,13 @@
12
12
 
13
13
  上が複製元で、下が複製先になります。
14
14
 
15
- 上のUIViewのクラスをUIViewのサブクラス`UpperCornerRView`にして角丸に設定しています。
16
15
 
17
16
 
18
17
 
19
18
 
20
19
 
20
+
21
- ![イメージ説明](cf55898c833ed594c7f71d70cd18a645.png)
21
+ ![イメージ説明](d227ddfb092d8b83675be050f7f9b850.png)
22
22
 
23
23
 
24
24
 
@@ -42,7 +42,49 @@
42
42
 
43
43
  super.viewDidLoad()
44
44
 
45
+
46
+
47
+ // ### 角丸設定その① ###
48
+
49
+ // ⇩の方法で角丸にすると四隅が角丸の状態で複製される
50
+
51
+ //targetViewを角丸設定する
52
+
53
+ targetView.layer.cornerRadius = 15
54
+
55
+ targetView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
56
+
57
+
58
+
59
+ // ### 角丸設定その② ###
60
+
61
+ // ⇩の方法で角丸にするときちんと複製される
62
+
45
- // Do any additional setup after loading the view, typically from a nib.
63
+ //let path = UIBezierPath(roundedRect:targetView.bounds,
64
+
65
+ //byRoundingCorners:[.topLeft, .topRight],
66
+
67
+ //cornerRadii: CGSize(width: 10, height: 10))
68
+
69
+ //let maskLayer = CAShapeLayer()
70
+
71
+ //maskLayer.path = path.cgPath
72
+
73
+ //targetView.layer.mask = maskLayer
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+ }
82
+
83
+
84
+
85
+ // ボタンタップで複製する
86
+
87
+ @IBAction func captureAndPaste(_ sender: UIButton) {
46
88
 
47
89
 
48
90
 
@@ -54,79 +96,9 @@
54
96
 
55
97
 
56
98
 
57
- copiedImageView.image = targetView.captureView()
58
-
59
-
60
-
61
- self.view.addSubview(copiedImageView)
62
-
63
-
64
-
65
- }
66
-
67
- }
68
-
69
-
70
-
71
- // 角丸設定
72
-
73
- @IBDesignable
74
-
75
- class UpperCornerRView: UIView {
76
-
77
-
78
-
79
- override func draw(_ rect: CGRect) {
80
-
81
- self.clipsToBounds = (cornerRadius > 0)
82
-
83
- if #available(iOS 11.0, *) {
84
-
85
- self.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
86
-
87
- }
88
-
89
- }
90
-
91
- }
92
-
93
-
94
-
95
- extension UIView {
96
-
97
-
98
-
99
- @IBInspectable
100
-
101
- var cornerRadius: CGFloat {
102
-
103
- get {
104
-
105
- return layer.cornerRadius
106
-
107
- }
108
-
109
- set {
110
-
111
- layer.cornerRadius = newValue
112
-
113
- }
114
-
115
- }
116
-
117
-
118
-
119
- func captureView() -> UIImage{
120
-
121
- // キャプチャする範囲を取得
122
-
123
- let rect = self.bounds
124
-
125
-
126
-
127
99
  // ビットマップ画像のcontextを作成
128
100
 
129
- UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
101
+ UIGraphicsBeginImageContextWithOptions(targetView.bounds.size, false, 0.0)
130
102
 
131
103
  let context: CGContext = UIGraphicsGetCurrentContext()!
132
104
 
@@ -134,15 +106,11 @@
134
106
 
135
107
  // 対象のview内の描画をcontextに複写する
136
108
 
137
- self.layer.render(in: context)
109
+ targetView.layer.render(in: context) // この辺が問題でしょうか？？
138
-
139
-
140
110
 
141
111
  // 現在のcontextのビットマップをUIImageとして取得
142
112
 
143
113
  let capturedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
144
-
145
-
146
114
 
147
115
  // contextを閉じる
148
116
 
@@ -150,11 +118,13 @@
150
118
 
151
119
 
152
120
 
153
- return capturedImage
121
+ copiedImageView.image = capturedImage
122
+
123
+
124
+
125
+ self.view.addSubview(copiedImageView)
154
126
 
155
127
  }
156
-
157
-
158
128
 
159
129
  }
160
130
 
@@ -166,26 +136,14 @@
166
136
 
167
137
 
168
138
 
139
+ storyboard
140
+
141
+ ![イメージ説明](7b059e097abf802bc444ba2d8e7bb3e9.png)
169
142
 
170
143
 
171
144
 
145
+ 角丸設定その②を使用すると、上側左右が角丸設定になった状態でキャプチャされます。
172
146
 
173
- ⇩の方法で角丸処理したUIViewはきちんと複製されました。
174
147
 
175
- ```swift
176
148
 
177
- /// iOS11未満の角丸処理
178
-
179
- let path = UIBezierPath(roundedRect:targetView.bounds,
149
+ ![イメージ説明](33542c0e3b7004db82db6e252a98130f.png)
180
-
181
- byRoundingCorners:[.topLeft, .topRight],
182
-
183
- cornerRadii: CGSize(width: 20, height: 20))
184
-
185
- let maskLayer = CAShapeLayer()
186
-
187
- maskLayer.path = path.cgPath
188
-
189
- targetView.layer.mask = maskLayer
190
-
191
- ```

5

タイトル訂正

2019/02/12 01:08

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- maskedCornersプロパティを使って角丸にしたUIViewをコピーすると角丸設定が反映されない…。
1
+ maskedCornersプロパティを使って角丸にしたUIViewをキャプチャ?すると角丸設定が反映されない…。
test CHANGED
File without changes

4

訂正

2019/02/11 23:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -13,32 +13,6 @@
13
13
  上が複製元で、下が複製先になります。
14
14
 
15
15
  上のUIViewのクラスをUIViewのサブクラス`UpperCornerRView`にして角丸に設定しています。
16
-
17
-
18
-
19
-
20
-
21
- ⇩の方法で角丸処理したUIViewはきちんと複製されました。
22
-
23
- ```swift
24
-
25
- /// iOS11未満の角丸処理
26
-
27
- let path = UIBezierPath(roundedRect:targetView.bounds,
28
-
29
- byRoundingCorners:[.topLeft, .topRight],
30
-
31
- cornerRadii: CGSize(width: 20, height: 20))
32
-
33
- let maskLayer = CAShapeLayer()
34
-
35
- maskLayer.path = path.cgPath
36
-
37
- targetView.layer.mask = maskLayer
38
-
39
- ```
40
-
41
-
42
16
 
43
17
 
44
18
 
@@ -189,3 +163,29 @@
189
163
 
190
164
 
191
165
  ```
166
+
167
+
168
+
169
+
170
+
171
+
172
+
173
+ ⇩の方法で角丸処理したUIViewはきちんと複製されました。
174
+
175
+ ```swift
176
+
177
+ /// iOS11未満の角丸処理
178
+
179
+ let path = UIBezierPath(roundedRect:targetView.bounds,
180
+
181
+ byRoundingCorners:[.topLeft, .topRight],
182
+
183
+ cornerRadii: CGSize(width: 20, height: 20))
184
+
185
+ let maskLayer = CAShapeLayer()
186
+
187
+ maskLayer.path = path.cgPath
188
+
189
+ targetView.layer.mask = maskLayer
190
+
191
+ ```

3

追記

2019/02/11 20:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,32 @@
13
13
  上が複製元で、下が複製先になります。
14
14
 
15
15
  上のUIViewのクラスをUIViewのサブクラス`UpperCornerRView`にして角丸に設定しています。
16
+
17
+
18
+
19
+
20
+
21
+ ⇩の方法で角丸処理したUIViewはきちんと複製されました。
22
+
23
+ ```swift
24
+
25
+ /// iOS11未満の角丸処理
26
+
27
+ let path = UIBezierPath(roundedRect:targetView.bounds,
28
+
29
+ byRoundingCorners:[.topLeft, .topRight],
30
+
31
+ cornerRadii: CGSize(width: 20, height: 20))
32
+
33
+ let maskLayer = CAShapeLayer()
34
+
35
+ maskLayer.path = path.cgPath
36
+
37
+ targetView.layer.mask = maskLayer
38
+
39
+ ```
40
+
41
+
16
42
 
17
43
 
18
44
 

2

訂正

2019/02/11 20:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,10 @@
11
11
 
12
12
 
13
13
  上が複製元で、下が複製先になります。
14
+
15
+ 上のUIViewのクラスをUIViewのサブクラス`UpperCornerRView`にして角丸に設定しています。
16
+
17
+
14
18
 
15
19
 
16
20
 
@@ -60,9 +64,33 @@
60
64
 
61
65
  }
62
66
 
67
+ }
63
68
 
64
69
 
70
+
71
+ // 角丸設定
72
+
73
+ @IBDesignable
74
+
75
+ class UpperCornerRView: UIView {
76
+
77
+
78
+
79
+ override func draw(_ rect: CGRect) {
80
+
81
+ self.clipsToBounds = (cornerRadius > 0)
82
+
83
+ if #available(iOS 11.0, *) {
84
+
85
+ self.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
86
+
87
+ }
88
+
89
+ }
90
+
65
91
  }
92
+
93
+
66
94
 
67
95
  extension UIView {
68
96
 
@@ -132,26 +160,6 @@
132
160
 
133
161
 
134
162
 
135
- @IBDesignable
136
163
 
137
- class UpperCornerRView: UIView {
138
-
139
-
140
-
141
- override func draw(_ rect: CGRect) {
142
-
143
- self.clipsToBounds = (cornerRadius > 0)
144
-
145
- if #available(iOS 11.0, *) {
146
-
147
- self.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
148
-
149
- }
150
-
151
- }
152
-
153
-
154
-
155
- }
156
164
 
157
165
  ```

1

訂正

2019/02/11 20:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- `maskedCorners`プロパティを使って上側左右を角丸にしたUIViewをコピーして`UIImageView`に貼り付けたところ、
5
+ `maskedCorners`プロパティを使って上側左右を角丸にしたUIViewをキャプチャ?して`UIImageView`に貼り付けたところ、
6
6
 
7
7
  四隅とも角丸になってしまいます。
8
8