如何像三维广场一样设置UIScrollView

Question

我正在制作照片编辑应用程序，我使用UIImageview有3个滚动视图，我想设置Scrollviews如下所示

​

​

我曾经尝试过"Scenekit“，但是它无法工作，因为我想要ScrollableView。

基本上我想创建3D拼贴

还有别的办法吗？

可以设置像3d广场一样的UIScrollView吗？

Answer 1

我使用以下代码使用CATransform3D实现了这一目标

我用UIImageview在StoryBoard中创建了3个滚动视图

@IBOutlet var faces: [UIView]!

ViewDidiLoad

    var perspective: CATransform3D = CATransform3DIdentity
    perspective.m34 = -1.0 / 500.0

    self.view?.layer.sublayerTransform = perspective

    perspective = CATransform3DRotate(perspective, CGFloat(-Double.pi / 4), 1, 0, 0)
    perspective = CATransform3DRotate(perspective, CGFloat(-Double.pi / 4), 0, 1, 0)

    print(perspective)

    self.view.layer.sublayerTransform = perspective

    //add cube face 1
    var transform: CATransform3D = CATransform3DMakeTranslation(0, 0, 50)
    addFace(0, withTransform: transform)

    //add cube face 2
    transform = CATransform3DMakeTranslation(50, 0, 0)
    transform = CATransform3DRotate(transform, CGFloat(Double.pi / 2), 0, 1, 0)

    addFace(1, withTransform: transform)

    //add cube face 3
    transform = CATransform3DMakeTranslation(0, -50, 0)
    transform = CATransform3DRotate(transform, CGFloat(Double.pi / 2), 1, 0, 0)

    addFace(2, withTransform: transform)

addFace函数

func addFace(_ index: Int, withTransform transform: CATransform3D) {
    let face: UIView? = faces[index]

    if let aFace = face {
        self.view.addSubview(aFace)
    }

    let containerSize: CGSize? = self.view.bounds.size

    face?.center = CGPoint(x: (containerSize?.width ?? 0.0) / 2.0, y: (containerSize?.height ?? 0.0) / 2.0)
    face?.layer.transform = transform
}

输出

​

​

Answer 2

看起来你需要用手势来旋转立方体来调整拼贴。因此，您不能只为了实现同样的目标而选择UIKit。

从UIKit坐标转换到SceneKit坐标是您的需求中具有挑战性的问题。

相反，您需要使用SceneKit和UIKit来完成同样的任务。

按照以下步骤执行

使用SceneKit创建多维数据集UI

import UIKit
import SceneKit

class ViewController: UIViewController {

@IBOutlet weak var mySceneView: SCNView!
override func viewDidLoad() {
    super.viewDidLoad()
    mySceneView.allowsCameraControl = true
    //Create instance of scene
    let scene = SCNScene()
    mySceneView.scene = scene
    //Add cube to scnview
    AddCubeToScene()
}

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

func AddCubeToScene()
{
    //Create a box of size 0.1 * 0.1 * 0.1
    let myBox = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)
    myBox.firstMaterial?.diffuse.contents = UIColor.red
    myBox.firstMaterial?.isDoubleSided = true
    //Create SCnnode of from geometry and specified its position
    let cubeNode = SCNNode(geometry: myBox)
    //Add created scnnode to scene
    mySceneView.scene?.rootNode.addChildNode(cubeNode)
}
}

使用UIScrollView创建UIKit

weak var scrollView: UIScrollView?

override func viewDidLoad() {
super.viewDidLoad()

let scrollView = UIScrollView(frame: CGRect.zero)
scrollView.contentSize = contentSize
scrollView.delegate = self
scrollView.minimumZoomScale = 1
scrollView.maximumZoomScale = 3
scrollView.indicatorStyle = .white
self.scrollView = scrollView

let clearContentView = UIView(frame: CGRect(x: 0, y: 0, width: contentSize.width, height: contentSize.height))
    clearContentView.backgroundColor = UIColor.clear
    scrollView.addSubview(clearContentView)
    self.clearContentView = clearContentView
    clearContentView.addObserver(self, forKeyPath: "transform", options: .new, context: &ViewTransformChangedObservationContext)
    skView.addSubview(scrollView)
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    scrollView?.frame = view.bounds
    scene?.size = view.bounds.size
    if let scrollView = scrollView {
        adjustContent(scrollView: scrollView)
    }
}

func adjustContent(scrollView: UIScrollView) {
    let zoomScale = scrollView.zoomScale
    scene?.setContentScale(scale: zoomScale)
    let contentOffset = scrollView.contentOffset
    let contentSize = scrollView.contentSize
    let scrollAreaHeight: CGFloat = contentSize.height - scrollView.bounds.height
    let yUIKit: CGFloat = contentOffset.y

    // Convert from UIKit coordinates to SpriteKit coordinates
    // UIKit has 0,0 in the top-left corner
    // SpriteKit has 0,0 in the bottom-left corner
    let ySpriteKit = scrollAreaHeight - yUIKit
    let contentOffsetSpriteKit = CGPoint(x: contentOffset.x, y: ySpriteKit)
    scene?.contentOffset = contentOffsetSpriteKit
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    adjustContent(scrollView: scrollView)
}

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return clearContentView
}

func scrollViewDidTransform(scrollView: UIScrollView) {
    adjustContent(scrollView: scrollView)
}

// scale between minimum and maximum. called after any 'bounce' animations
func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {
    adjustContent(scrollView: scrollView)
}

现在将UIScrollView实例添加到多维数据集的两边(即子节点)

你在那儿！

Answer 3

您正在寻找的解决方案可以作为一个框架。您可以查看这些开源项目。MKCubeController，CubeController和双子座。

CubeController是最接近您的需求的一个，您可能需要修改这些内容。双子座也有多维数据集实现。