iPhone,重现放大镜效果

时间:2010-01-08 21:04:48

标签: iphone uiview

我希望能够在自定义视图中创建一个可移动的放大镜(就像复制和粘贴时那样),用于缩放视图的一部分。

我不知道如何开始,你有什么想法吗?

提前感谢您的帮助:)

3 个答案:

答案 0 :(得分:16)

我们在填字游戏中这样做。在drawRect方法中,屏蔽圆形(使用包含放大镜“遮罩”的单色位图)并使用2x缩放变换在其中绘制主题视图。然后在上面画一个放大镜图像,你就完成了。

- (void) drawRect: (CGRect) rect {
    CGContextRef    context = UIGraphicsGetCurrentContext();
    CGRect          bounds = self.bounds;
    CGImageRef      mask = [UIImage imageNamed: @"loupeMask"].CGImage;
    UIImage         *glass = [UIImage imageNamed: @"loupeImage"];

    CGContextSaveGState(context);
    CGContextClipToMask(context, bounds, mask);
    CGContextFillRect(context, bounds);
    CGContextScaleCTM(context, 2.0, 2.0);

    //draw your subject view here

    CGContextRestoreGState(context);

    [glass drawInRect: bounds];
}

答案 1 :(得分:4)

有一个完整的例子over here。下载的项目中存在一个小错误,但是它运行良好并且完全符合您的需要。

答案 2 :(得分:1)

我在Swift 3中使用此代码:

class MagnifyingGlassView: UIView {

    var zoom: CGFloat = 2 {
        didSet {
            setNeedsDisplay()
        }
    }

    weak var readView: UIView?

    // MARK: - UIVIew

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }

    override func draw(_ rect: CGRect) {
        guard let readView = readView else { return }
        let magnifiedBounds = magnifyBounds(of: readView, zoom: zoom)
        readView.drawHierarchy(in: magnifiedBounds, afterScreenUpdates: false)
    }

    // MARK: - Private

    private func setupView() {
        isOpaque = false
        backgroundColor = UIColor.clear
    }

    private func magnifyBounds(of view: UIView, zoom: CGFloat) -> CGRect {
        let transform = CGAffineTransform(scaleX: zoom, y: zoom)
        var bounds = view.bounds.applying(transform)
        bounds.center = view.bounds.center
        return view.convert(bounds, to: self)
    }
}

extension CGRect {
    var center: CGPoint {
        get {
            return CGPoint(x: origin.x + width / 2, y: origin.y + height / 2)
        }
        set {
            origin.x = newValue.x - width / 2
            origin.y = newValue.y - height / 2
        }
    }
}

如果您的阅读视图是scrollView,则需要在setNeedsDisplay中调用scrollViewDidScroll: