Question

我正在使用Photo Editing App，并且有3个带有UIImageview的Scrollview，我想将ScrollViews设置如下

我尝试过“ Scenekit ”，但因为我想要ScrollableView而无法使用。

基本上我想创建 3D拼贴
还有其他方法吗？

是否可以将UIScrollView设置为3d正方形？

Answer 1

我使用以下代码使用 CATransform3D 实现此目标

我在StoryBoard中使用UIImageview创建了3个Scrollview

@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)
}
}

使用UIKit创建UIScrollView

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和 Gemini。

CubeController是最接近您的要求的，您可能需要稍作修改。 Gemini也具有多维数据集实现。

如何像3D正方形一样设置UIScrollView

3 个答案:

使用SceneKit创建多维数据集UI

使用UIKit创建UIScrollView