如何向UIView添加大小调整句柄? [英] How can I add sizing handles to a UIView?

问题描述

我试图根据用户请求在运行时动态创建视图(UIImageView和UITextView)，然后允许用户移动它们并调整其大小.除了调整大小，我的所有工作都很好.我尝试使用捏手势识别器，但发现它对于我想要的东西来说太笨拙了.因此，我想使用大小调整手柄.我相信我可以在每个手柄上放置一个平移手势识别器，并在其中一个移动时调整视图框架.

I'm trying to dynamically create views (UIImageView and UITextView) at runtime by user request and then allow the user to move and resize them. I've got everything working great, except for the resizing. I tried using the pinch gesture recognizer, but find it too clumsy for what I want. Therefore, I would like to use sizing handles. I believe I could put a pan gesture recognizer on each handle, and adjust the view frame as one of them is moved.

问题是，我不太确定如何创建大小调整手柄.我会指出我尝试过的所有内容，但说实话，我不太确定从哪里开始.我确实有一些想法...

The problem is, I'm not quite sure how to create the sizing handles. I would indicate all the things I've tried, but truthfully, I'm not quite sure where to start. I do have a few ideas...

1)可能使用核心图形在拐角和侧面绘制框或圆吗?我会创建一个新图层并在其上绘制它们吗?不确定.

1) Possibly use coregraphics to draw boxes or circles on the corners and sides? Would I create a new layer and draw them on that? Not sure.

2)在每个角上粘贴一个方框或圆形的小图像吗?

2) Stick a little image of a box or circle on each corner?

3)XIB文件上已经放置了句柄?

3) XIB file with the handles already placed on it?

任何建议表示赞赏.我只需要指出正确的方向.

Any suggestions appreciated. I just need to be pointed in the right direction.

Apple在Pages中使用的东西将是完美的！

Something like what Apple uses in Pages would be perfect!

推荐答案

首先，我建议为UIView创建一个自定义View子类，您将在此处处理所有行为.我们称它为ResizableView.

First, I suggest create a custom View subclass to UIView, you will handle all of the behavior here. Let's call it ResizableView.

在自定义视图中，您需要在拐角处绘制图层或查看这些点并向其添加PangestureRecognized.然后您可以在用户拖动它们时使用recognizer.locationInView()跟踪这些点的位置，这将用于计算View的比例尺.以下是您可以参考的代码:

In the custom view, You need to draw layer or view for these dot at corner and add PangestureRecognized to them.Then you can track the location of these dot using recognizer.locationInView() when user drag them, which you will use to calculate the scale of View.Here is the code you can refer to:

func rotateViewPanGesture(recognizer: UIPanGestureRecognizer) {
    touchLocation = recognizer.locationInView(self.superview)

    let center = CalculateFunctions.CGRectGetCenter(self.frame)

    switch recognizer.state {
    case .Began:
        initialBounds = self.bounds
        initialDistance = CalculateFunctions.CGpointGetDistance(center, point2: touchLocation!)


    case .Changed:        

        //Finding scale between current touchPoint and previous touchPoint
        let scale = sqrtf(Float(CalculateFunctions.CGpointGetDistance(center, point2: touchLocation!)) / Float(initialDistance!))
        let scaleRect = CalculateFunctions.CGRectScale(initialBounds!, wScale: CGFloat(scale), hScale: CGFloat(scale))

        self.bounds = scaleRect

        self.refresh()

    case:.Ended:
          self.refresh() 

    default:break

一步一步

touchLocation手势的位置

center是ResizableView的中心

center is the center of ResizableView

initialBounds是PanGesture开始时ResizableView的初始边界.

initialBounds is the initial bounds of the ResizableView when PanGesture begin.

initailDistance是用户拖动的点的touchPoint的ResizableView的中心之间的距离.

initailDistance is the distance between the center of the ResizableView of touchPoint of the dot the user is dragging.

然后您可以根据给定的initialDistance，center，touch location

Then you can calculate the scale given initialDistance, center, touch location

现在，您已根据需要缩放视图.您还需要相应地刷新这些点在拐角处的位置，这就是refresh()的作用，您需要自己实现.

Now you have scaled the view as You want. You also need to refresh the position of these dot at corner accordingly, that's what refresh() for, you need to implement it yourself.

我倾向于定义一些helpFunction来帮助我进行计算.

I tend to define some helpFunctions to help me calculate.

CalculateFunctions.CGPointGetDistance用于计算视图中心与触摸位置之间的距离.

CalculateFunctions.CGPointGetDistance is used to calculate the distance between center of the view and touch location.

CalculateFunctions.CGRectScale根据您刚刚计算出的比例返回比例缩放的CGRect.

CalculateFunctions.CGRectScale return the scaled CGRect given the the scale you just calculated.

CalculateFunctions.CGRectGetCenter返回CGRect的中心点

CalculateFunctions.CGRectGetCenter return the center point of a CGRect

那只是一个粗略的想法.实际上，您可以参考很多图书馆. 一些建议:

• SPUserResizableView 这正是您想要的ResizableView，但是它是用ObjC编写的，并且很长一段时间都没有更新.但是您可以参考它.
• JLStickerTextView 这可能无法很好地满足您的要求，因为它适用于文本(编辑，调整大小，旋转用一根手指)但是，这是用Swift编写的，对您来说是一个很好的例子.

• SPUserResizableView This is a ResizableView exactly what you want, but it was written in ObjC and hasn't been updated for a long time. But you can refer to it.
• JLStickerTextView This may not fit your requirement very well as it is for text(edit, resize, rotate with one finger) However, this one is written in Swift, a good example for you.

如果有任何疑问，请随时发表.祝你好运:-)

If you have any questions, feel free to post it.Good Luck:-)

这篇关于如何向UIView添加大小调整句柄?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！