teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Swift4 円弧状のスライダーのつまみの動き(時計回り)と角度を反転させたい

編集履歴

質問編集履歴

21

修正

2021/08/24 10:58

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -258,7 +258,7 @@
258
258
 
259
259
  ```
260
260
 
261
- **8/24**　
261
+ **8/24 現状・メモ**　
262
262
 
263
263
  ```ここに言語を入力
264
264
 
@@ -333,3 +333,25 @@
333
333
  }
334
334
 
335
335
  ```
336
+
337
+
338
+
339
+ 〜〜自分用メモ〜〜
340
+
341
+ **円の右を 0 として基準となり、360°周回すると 2π となる**
342
+
343
+ ![円の右を 0 として基準となり、360°周回すると 2π となる](27d73faf3548fb8fca6b7c575819a7f1.png)
344
+
345
+
346
+
347
+
348
+
349
+ **逆正弦atan2（アークタンジェント2）**
350
+
351
+ > atan2は点(x, y)とx軸によって表されるベクトルの角度(θ)を返します。
352
+
353
+ > よって位置から角度を求めることができます。
354
+
355
+
356
+
357
+ 参考：[2つの座標から角度や距離を求める](https://qiita.com/arthur87/items/23d3c896dafbc8223fd5)

20

追加

2021/08/24 10:58

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,7 @@
1
+ swift3で書かれた[github](https://github.com/ispiropoulos/PRGRoundSlider)を参考にしております。
2
+
3
+
4
+
1
5
  **やりたいこと：以下の青い「Single Slider」を「左下と右下に位置する始点(0%)と終点(100%)」を、「始点(0%)を左上、終点(100%)を右上」に設置し、スライダーのつまみを真ん中の円の下側を潜るように反時計回りに半周して終わるように変更を加えたい。（そっくりそのまま逆さまの状態に）**
2
6
 
3
7
 
@@ -58,7 +62,7 @@
58
62
 
59
63
  // 回転する
60
64
 
61
- context.rotate(by: -selectionAngle * CGFloat.pi/180) //
65
+ context.rotate(by: -selectionAngle * CGFloat.pi/180)
62
66
 
63
67
 
64
68
 
@@ -74,9 +78,23 @@
74
78
 
75
79
  ```
76
80
 
77
-
81
+ **やったこと②**
82
+
78
-
83
+ 以下の部分にて、selectionAngleからマイナスをなくし、CGFloat.pi/180を150にしたところ
84
+
79
- swift3で書かれた[github](https://github.com/ispiropoulos/PRGRoundSlider)を参考にしております。
85
+ > context.rotate(by: **-**selectionAngle * CGFloat.pi/**180**)
86
+
87
+ ↓
88
+
89
+ > context.rotate(by: selectionAngle * CGFloat.pi/**105**)
90
+
91
+ ![イメージ説明](a683cb1b7e0c56f0ebcf444213740901.gif)
92
+
93
+ 少しだけ理想的な動きになりましたが、スライダーの操作がスライダーとシンクロしなくなってしまった。
94
+
95
+
96
+
97
+
80
98
 
81
99
  文字数の制限で全て載せられないのですが、メインのファイルは以下です。
82
100
 

19

修正

2021/08/24 07:05

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- **以下の青い「Single Slider」を「左下と右下に位置する始点(0%)と終点(100%)」を、「始点(0%)を左上、終点(100%)を右上」に設置し、スライダーのつまみを真ん中の円の下側を潜るように反時計回りに半周して終わるように変更を加えたい。（そっくりそのまま逆さまの状態に）**
1
+ **やりたいこと：以下の青い「Single Slider」を「左下と右下に位置する始点(0%)と終点(100%)」を、「始点(0%)を左上、終点(100%)を右上」に設置し、スライダーのつまみを真ん中の円の下側を潜るように反時計回りに半周して終わるように変更を加えたい。（そっくりそのまま逆さまの状態に）**
2
2
 
3
3
 
4
4
 

18

修正

2021/08/24 04:00

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -6,13 +6,13 @@
6
6
 
7
7
 
8
8
 
9
- **やりたいことのイメージ**
9
+ **やったこと**
10
+
10
-
11
+ 始点と終点をstartAngleとendAngleを210と-30から130と50に変更することで、左上と右上に移動させて円弧の描写をclockwise: falseで反転させることに成功。そこから先のスライダーの動きに関してどうやったら反時計回りでかつ0％から１００％に辿り着けるようになるかまだ、解決策を考えている。
12
+
11
- ![イメージ説明](4eecd0bc7c1141975705c2a8eef2046a.jpeg)
13
+ ![![イメージ説明](1bbfed7da0fe42b880c56aad492e1844.gif)
12
-
13
-
14
-
14
+
15
- **現時点での理解は、UIBezierPathのclockwiseをflaseにすることで半時計周りにすることはできたが、始点と終点、スライダーのつまみの動きがどのように動作しているのか分からない状態です。**
15
+ 動きに関しては０％からはうまく始まるが、スライダーのつまみが100%の終点を超えて180度近く、先のところまで可動してしまう。円弧の計算の仕組みが難しいため、わかるまで苦戦中です。
16
16
 
17
17
 
18
18
 
@@ -156,21 +156,9 @@
156
156
 
157
157
 
158
158
 
159
- **追記(現状)：8/22 23:00**
159
+
160
-
161
- 始点と終点をstartAngleとendAngleを210/-30から130と50に変更することで、左上と右上に移動させて円弧の描写をclockwise: falseで反転させることに成功。そこから先のスライダーの動きに関してどうやったら反時計回りでかつ0％から１００％に辿り着けるようになるかまだ、解決策を考えている。
160
+
162
-
163
- ![![イメージ説明](1bbfed7da0fe42b880c56aad492e1844.gif)
161
+
164
-
165
- 動きに関しては０％からはうまく始まるが、スライダーのつまみが100%の終点を超えて180度近く、先のところまで可動してしまう。
166
-
167
- 円弧の計算の仕組みが難しいため、わかるまで苦戦中です。
168
-
169
- おそらく「CGFloat.pi/180」の角度の設定に問題がある。ここら辺の動作に関する円弧の仕組みがわかれば、
170
-
171
- 反転させた円弧でもうまく動くと考えている。
172
-
173
- ![イメージ説明](af9533215f0ce97d3f566642f324590c.png)
174
162
 
175
163
 
176
164
 

17

修正

2021/08/24 03:59

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -264,6 +264,8 @@
264
264
 
265
265
  　let rotation = rotationForLocation(touch.location(in: self))
266
266
 
267
+ 　　　　　　　　・・・続く
268
+
267
269
  ```
268
270
 
269
271
 
@@ -292,6 +294,8 @@
292
294
 
293
295
  ```ここに言語を入力
294
296
 
297
+ ・・・続き
298
+
295
299
  // convert rad to angles
296
300
 
297
301
  var realRotationAngle = -(rotation * 180 / CGFloat(Double.pi))

16

修正

2021/08/24 03:54

投稿

maplemee
maplemee

スコア16

test CHANGED
@@ -1 +1 @@
1
- sゆうsSwift4 円弧状のスライダーのつまみの動き(時計回り)と角度を反転させたい
1
+ Swift4 円弧状のスライダーのつまみの動き(時計回り)と角度を反転させたい
test CHANGED
File without changes

15

修正

2021/08/24 03:52

投稿

maplemee
maplemee

スコア16

test CHANGED
@@ -1 +1 @@
1
- Swift4 円弧状のスライダーのつまみの動き(時計回り)と角度を反転させたい
1
+ sゆうsSwift4 円弧状のスライダーのつまみの動き(時計回り)と角度を反転させたい
test CHANGED
@@ -240,7 +240,7 @@
240
240
 
241
241
  **8/23 15:40
242
242
 
243
- 質問：やはり上のコード部分（func updateRotationWithTouches）の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**
243
+ 質問：やはり上のコード部分（func updateRotationWithTouches）の仕組みが理解できません。**
244
244
 
245
245
  以下の部分ではmaxとminがあるのでここで、始点と終点の可動する制限を設定しているのでしょうか？
246
246
 

14

追記

2021/08/24 03:49

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -252,7 +252,7 @@
252
252
 
253
253
  ```
254
254
 
255
- **8/24**
255
+ **8/24**　
256
256
 
257
257
  ```ここに言語を入力
258
258
 
@@ -268,19 +268,25 @@
268
268
 
269
269
 
270
270
 
271
- > 引数：touch.location(in: self)
271
+ > 上のコードの引数：**rotationForLocation**(touch.location(in: self))について
272
+
273
+ ```ここに言語を入力
272
274
 
273
275
  fileprivate func rotationForLocation(_ location: CGPoint) -> CGFloat {
274
276
 
275
- タッチした部分のX座標の半分とy座標の半分をoffsetとして
277
+ タッチした部分のX座標の半分とy座標の半分をoffsetとして
276
-
278
+
277
- > let offset = CGPoint(x: location.x - bounds.midX, y: location.y - bounds.midY)
279
+ let offset = CGPoint(x: location.x - bounds.midX, y: location.y - bounds.midY)
278
-
280
+
279
- その座標を返す？
281
+ その座標を返す？
280
-
282
+
281
- > return atan2(offset.y, offset.x)
283
+ return atan2(offset.y, offset.x)
282
-
284
+
283
- }
285
+ }
286
+
287
+ ```
288
+
289
+
284
290
 
285
291
 
286
292
 

13

追加

2021/08/24 03:42

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -78,7 +78,81 @@
78
78
 
79
79
  swift3で書かれた[github](https://github.com/ispiropoulos/PRGRoundSlider)を参考にしております。
80
80
 
81
+ 文字数の制限で全て載せられないのですが、メインのファイルは以下です。
82
+
83
+ ```ViewController
84
+
85
+ import UIKit
86
+
87
+
88
+
89
+ class ViewController: UIViewController {
90
+
91
+
92
+
93
+ @IBOutlet weak var sliderView: PRGRoundRangeSlider!
94
+
95
+ 　　　　　　　　//今回扱っているスライダー
96
+
97
+ @IBOutlet weak var sliderContainerView: UIView!
98
+
99
+
100
+
101
+ override func viewDidLoad() {
102
+
103
+ super.viewDidLoad()
104
+
105
+ 〜省略〜
106
+
107
+ DispatchQueue.main.async {
108
+
109
+ self.setupSliderProgrammatically()
110
+
111
+ }
112
+
113
+ }
114
+
115
+
116
+
117
+ func setupSliderProgrammatically(){
118
+
119
+
120
+
121
+ let sliderView = PRGRoundSlider(
122
+
123
+ frame: sliderContainerView.bounds,
124
+
81
- 宜しくお願いします。
125
+ value: 0.5,
126
+
127
+ strokeColor: SliderKit.darkBlueColor, //SliderKit
128
+
129
+ strokeWidth: 5,
130
+
131
+ gradientColor: SliderKit.darkPinkColor, //SliderKit
132
+
133
+ startAngle: 130,// 210,
134
+
135
+ endAngle: 50, //-30,
136
+
137
+ startText: "0%",
138
+
139
+ endText: "100%"
140
+
141
+ ) //クロージャー
142
+
143
+ { (value) in
144
+
145
+ return "(Int(value*100))%" //0.5→50%にしてreturn
146
+
147
+ }
148
+
149
+ sliderContainerView.addSubview(sliderView)
150
+
151
+ }
152
+
153
+ }
154
+
155
+ ```
82
156
 
83
157
 
84
158
 

12

修正

2021/08/24 03:36

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -177,3 +177,69 @@
177
177
  value = prg <= 0.5 ? max(0,prg) : min(1,prg)
178
178
 
179
179
  ```
180
+
181
+ **8/24**
182
+
183
+ ```ここに言語を入力
184
+
185
+ タッチした回数が初回だった場合
186
+
187
+ if let touch = touches[touches.startIndex] as? UITouch {
188
+
189
+ rotationにrotationForLocationの座標を渡す
190
+
191
+ 　let rotation = rotationForLocation(touch.location(in: self))
192
+
193
+ ```
194
+
195
+
196
+
197
+ > 引数：touch.location(in: self)
198
+
199
+ fileprivate func rotationForLocation(_ location: CGPoint) -> CGFloat {
200
+
201
+ タッチした部分のX座標の半分とy座標の半分をoffsetとして
202
+
203
+ > let offset = CGPoint(x: location.x - bounds.midX, y: location.y - bounds.midY)
204
+
205
+ その座標を返す？
206
+
207
+ > return atan2(offset.y, offset.x)
208
+
209
+ }
210
+
211
+
212
+
213
+ ```ここに言語を入力
214
+
215
+ // convert rad to angles
216
+
217
+ var realRotationAngle = -(rotation * 180 / CGFloat(Double.pi))
218
+
219
+
220
+
221
+ // We need to convert the rotation angle into paintcode oval angle
222
+
223
+ 両オペランド(両辺)がtrueだったとき
224
+
225
+
226
+
227
+ if realRotationAngle > -180 && realRotationAngle < -90 {
228
+
229
+
230
+
231
+ realRotationAngle = 180 + (180+realRotationAngle) //180
232
+
233
+ }
234
+
235
+
236
+
237
+ let prg = (realRotationAngle - startAngle) / (-1 * (startAngle + abs(endAngle)))
238
+
239
+
240
+
241
+ value = prg <= 0.5 ? max(0,prg) : min(1,prg)
242
+
243
+ }
244
+
245
+ ```

11

質問

2021/08/24 00:14

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -167,3 +167,13 @@
167
167
  **8/23 15:40
168
168
 
169
169
  質問：やはり上のコード部分（func updateRotationWithTouches）の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**
170
+
171
+ 以下の部分ではmaxとminがあるのでここで、始点と終点の可動する制限を設定しているのでしょうか？
172
+
173
+ ```ここに言語を入力
174
+
175
+ let prg = (realRotationAngle - startAngle)/(-1 * (startAngle + abs(endAngle)))
176
+
177
+ value = prg <= 0.5 ? max(0,prg) : min(1,prg)
178
+
179
+ ```

10

修正

2021/08/23 06:50

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -166,4 +166,4 @@
166
166
 
167
167
  **8/23 15:40
168
168
 
169
- 質問：やはり上のコード部分の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**
169
+ 質問：やはり上のコード部分（func updateRotationWithTouches）の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**

9

修正

2021/08/23 06:42

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -164,4 +164,6 @@
164
164
 
165
165
  ```
166
166
 
167
+ **8/23 15:40
168
+
167
- **8/23 15:40 質問：やはり上のコード部分の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**
169
+ 質問：やはり上のコード部分の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**

8

追加

2021/08/23 06:41

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -163,3 +163,5 @@
163
163
  }
164
164
 
165
165
  ```
166
+
167
+ **8/23 15:40 質問：やはり上のコード部分の仕組みが理解できません。ここの部分だけでもどなたか回答貰えると助かります。**

7

追加

2021/08/23 06:40

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -97,3 +97,69 @@
97
97
  反転させた円弧でもうまく動くと考えている。
98
98
 
99
99
  ![イメージ説明](af9533215f0ce97d3f566642f324590c.png)
100
+
101
+
102
+
103
+ **追記：8/23 12:00**
104
+
105
+ スライダーの動きの範囲に関しては、PRGRounderSlider.swiftのここの部分で変更できる可能性があるのでどうやって動いているかじっくり試行錯誤で変更を試している状況です。
106
+
107
+ ```PRGRounderSlider
108
+
109
+ override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
110
+
111
+ super.touchesBegan(touches, with: event)
112
+
113
+ updateRotationWithTouches(touches)
114
+
115
+
116
+
117
+ }
118
+
119
+
120
+
121
+ override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
122
+
123
+ super.touchesMoved(touches, with: event)
124
+
125
+ updateRotationWithTouches(touches)
126
+
127
+ }
128
+
129
+
130
+
131
+ func updateRotationWithTouches(_ touches: Set<NSObject>) {
132
+
133
+ if let touch = touches[touches.startIndex] as? UITouch {
134
+
135
+ let rotation = rotationForLocation(touch.location(in: self))
136
+
137
+
138
+
139
+ // convert rad to angles
140
+
141
+ var realRotationAngle = -(rotation * 180 / CGFloat(Double.pi)) //M_PI
142
+
143
+
144
+
145
+
146
+
147
+ // We need to convert the rotation angle into paintcode oval angle
148
+
149
+ if realRotationAngle > -180 && realRotationAngle < -90 {
150
+
151
+ realRotationAngle = 180 + (180+realRotationAngle)
152
+
153
+ }
154
+
155
+
156
+
157
+ let prg = (realRotationAngle - startAngle)/(-1 * (startAngle + abs(endAngle)))
158
+
159
+ value = prg <= 0.5 ? max(0,prg) : min(1,prg)
160
+
161
+ }
162
+
163
+ }
164
+
165
+ ```

6

修正

2021/08/23 02:55

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
- **以下の青い「Single Slider」の方の「左下と右下に位置する始点(0%)と終点(100%)」を、「始点(0%)を左上、終点(100%)を右上」に設置し、スライダーのつまみを真ん中の円の下側を潜るように反時計回りに半周して終わるように変更を加えたい。（そっくりそのまま逆さまの状態に）**
1
+ **以下の青い「Single Slider」を「左下と右下に位置する始点(0%)と終点(100%)」を、「始点(0%)を左上、終点(100%)を右上」に設置し、スライダーのつまみを真ん中の円の下側を潜るように反時計回りに半周して終わるように変更を加えたい。（そっくりそのまま逆さまの状態に）**
2
2
 
3
3
 
4
4
 
5
- ![![イメージ説明](46111fc6fef3a57b08a17dea5076f027.gif)
5
+ ![イメージ説明](b6b0cdd595b97faa1c65f045ebdfa23e.gif)
6
6
 
7
7
 
8
8
 

5

修正

2021/08/22 14:26

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -84,15 +84,11 @@
84
84
 
85
85
  **追記(現状)：8/22 23:00**
86
86
 
87
- 始点と終点をstartAngleとendAngleを210/-30から130と50に変更することで、左上と右上に移動させて円弧の描写をclockwise: falseで反転させることに成功。そこから先のスライダーの動きに関してはまだ、解決策を考えている。
87
+ 始点と終点をstartAngleとendAngleを210/-30から130と50に変更することで、左上と右上に移動させて円弧の描写をclockwise: falseで反転させることに成功。そこから先のスライダーの動きに関してどうやったら反時計回りでかつ0％から１００％に辿り着けるようになるかまだ、解決策を考えている。
88
88
 
89
89
  ![![イメージ説明](1bbfed7da0fe42b880c56aad492e1844.gif)
90
90
 
91
- 動きに関しては以下のように０％からはうまく始まるが、
92
-
93
- ![イメージ説明]
94
-
95
- スライダーのつまみが100%の終点を超えて180度近く、先のところまで可動してしまう。
91
+ 動きに関しては０％からはうまく始まるが、スライダーのつまみが100%の終点を超えて180度近く、先のところまで可動してしまう。
96
92
 
97
93
  円弧の計算の仕組みが難しいため、わかるまで苦戦中です。
98
94
 

4

追加

2021/08/22 14:22

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -86,11 +86,11 @@
86
86
 
87
87
  始点と終点をstartAngleとendAngleを210/-30から130と50に変更することで、左上と右上に移動させて円弧の描写をclockwise: falseで反転させることに成功。そこから先のスライダーの動きに関してはまだ、解決策を考えている。
88
88
 
89
- ![イメージ説明](5836c8960f4ce138d98a5f5dd048fa2f.png)
89
+ ![![イメージ説明](1bbfed7da0fe42b880c56aad492e1844.gif)
90
90
 
91
91
  動きに関しては以下のように０％からはうまく始まるが、
92
92
 
93
- ![イメージ説明](559a281ba1994d50d7f8dcf328f10a2e.png)
93
+ ![イメージ説明]
94
94
 
95
95
  スライダーのつまみが100%の終点を超えて180度近く、先のところまで可動してしまう。
96
96
 

3

追加

2021/08/22 14:19

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -82,4 +82,22 @@
82
82
 
83
83
 
84
84
 
85
+ **追記(現状)：8/22 23:00**
86
+
87
+ 始点と終点をstartAngleとendAngleを210/-30から130と50に変更することで、左上と右上に移動させて円弧の描写をclockwise: falseで反転させることに成功。そこから先のスライダーの動きに関してはまだ、解決策を考えている。
88
+
89
+ ![イメージ説明](5836c8960f4ce138d98a5f5dd048fa2f.png)
90
+
91
+ 動きに関しては以下のように０％からはうまく始まるが、
92
+
93
+ ![イメージ説明](559a281ba1994d50d7f8dcf328f10a2e.png)
94
+
95
+ スライダーのつまみが100%の終点を超えて180度近く、先のところまで可動してしまう。
96
+
97
+ 円弧の計算の仕組みが難しいため、わかるまで苦戦中です。
98
+
99
+ おそらく「CGFloat.pi/180」の角度の設定に問題がある。ここら辺の動作に関する円弧の仕組みがわかれば、
100
+
85
- ```
101
+ 反転させた円弧でもうまく動くと考えている。
102
+
103
+ ![イメージ説明](af9533215f0ce97d3f566642f324590c.png)

2

修正

2021/08/22 14:09

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,12 @@
3
3
 
4
4
 
5
5
  ![![イメージ説明](46111fc6fef3a57b08a17dea5076f027.gif)
6
+
7
+
8
+
9
+ **やりたいことのイメージ**
10
+
11
+ ![イメージ説明](4eecd0bc7c1141975705c2a8eef2046a.jpeg)
6
12
 
7
13
 
8
14
 

1

修正

2021/08/21 12:20

投稿

maplemee
maplemee

スコア16

test CHANGED
File without changes
test CHANGED
@@ -50,9 +50,9 @@
50
50
 
51
51
  context.translateBy(x: 45, y: 46) //45
52
52
 
53
- // 90度回転する
53
+ // 回転する
54
54
 
55
- context.rotate(by: -selectionAngle * CGFloat.pi/180) //-selectionAngle *
55
+ context.rotate(by: -selectionAngle * CGFloat.pi/180) //
56
56
 
57
57
 
58
58