拖曳手勢幾何拼貼 App之小蘑菇和車車拼貼

(一)成果展示

(二)github

Cookie890416/GAME-2-main-2

(三)蘑菇和車

進階

1. 拖曳形狀

使用DragGesture移動圖片

.gesture(
DragGesture()
.onChanged({(value) in
offs[item].offset = CGSize(width: value.translation.width +        offs[item].newPosition.width, height: value.translation.height +  offs[item].newPosition.height)
})
.onEnded({(value) in
offs[item].newPosition =  offs[item].offset
})
)

2.旋轉

使用RotationGesture旋轉圖片

.gesture(RotationGesture()
.onChanged{
angle in
offs[item].degrees = angle.degrees
})

3.縮放

使用MagnifcationGesture縮放圖片

.gesture(MagnificationGesture()
.onChanged{value in
offs[item].scale = value.magnitude
})

4.額外功能

利用struct所形成的array，並由struct的offset和newPosition來儲存圖片所位移的舊數據和新數據

ForEach(0..<rec.count, id: \.self)
{ (item) in
Rectangle()
.frame(width: 100, height: 100)
.rotationEffect(Angle.degrees(degrees))
.foregroundColor(color)
.scaleEffect(rec[item].scale)
.offset(rec[item].offset)
.rotationEffect(Angle.degrees(rec[item].degrees))
.gesture(
DragGesture()
.onChanged({(value) in
rec[item].offset = CGSize(width: value.translation.width +  rec[item].newPosition.width, height: value.translation.height +  rec[item].newPosition.height)
})
.onEnded({(value) in
rec[item].newPosition =  rec[item].offset
})
)
.gesture(MagnificationGesture()
.onChanged{value in
rec[item].scale = value.magnitude
})
.gesture(RotationGesture()
.onChanged{
angle in
rec[item].degrees = angle.degrees
})
}

這次的加分題真的花很久的時間才寫出來,尤其是最後在試手勢的時候電腦版真的超難用的,不過最後有下定決心一定要把這項作業做出來,所以還是有完成！！！