如何将镜像添加到2d框角 [英] how Add mirror image to 2d Box corners

问题描述

朋友我需要在右下角添加镜像 。
i借助此答案创建视图类型

但是我无法在右下角

$中添加图像b $ b

解决方案

当前方法与

hello friends i need to add mirror image in right corner and bottom. i create the type of view with the help of this answer

how to create a view like this shape in swift?

but i am not able to add image in right corner and bottom

解决方案

Current approach is somewhat different from the previous one.

Previously i've drawn the right and bottom corner and resized the image such that, the appearance is asked in that question.

But in this question, that approach won't work anymore. First reason is that draw(in rect: CGRect) does not provide mirroring functionality for image while drawing. iOS only provide mirroring functionality while drawing in UIImageView. So to do the mirroring we need to setup 3 image view.

So the approach to achieve it is following

1. Put one UIImageView in center.
2. Put one UIImageView in the right of the center another to the bottom.
3. Now calculate the right mirrored image and apply shear the right image view.
4. Do the same for the bottom.

One problem still remain in the approach described above. For example we shear the right image view according to y axis. The shear operation works along with center. So the left side and right side both shears across the y axis. So we translate positive to the x axis so that all the shear applies to the right of UIImageView. Thats why overlap the right and main image view to fill the gap between to, as following

rightImageView.leadingAnchor.constraint(equalTo: mainImageView.trailingAnchor, constant: -stripSize / 2),

Same goes for the bottom image view.

Code

lass ViewController: UIViewController {

    let mainImageView: UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.clipsToBounds = true
        return view
    }()
    let rightImageView: UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.clipsToBounds = true
        return view
    }()
    let bottomImageView: UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.clipsToBounds = true
        return view
    }()

    let rightDarkView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.4)
        return view
    }()

    let bottomDarkView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.5)
        return view
    }()


    let mainImageSize = CGSize(width: 240, height: 240)
    let stripSize = CGFloat(20)


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        setupView()
        setupMirroView()
    }



    func setupView() {
        view.addSubview(mainImageView)
        view.addSubview(rightImageView)
        view.addSubview(bottomImageView)

        view.addSubview(rightDarkView)
        view.addSubview(bottomDarkView)

        NSLayoutConstraint.activate([
            mainImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            mainImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            mainImageView.widthAnchor.constraint(equalToConstant: mainImageSize.width),
            mainImageView.heightAnchor.constraint(equalToConstant: mainImageSize.height),

            rightImageView.leadingAnchor.constraint(equalTo: mainImageView.trailingAnchor, constant: -stripSize / 2),
            rightImageView.topAnchor.constraint(equalTo: mainImageView.topAnchor),
            rightImageView.bottomAnchor.constraint(equalTo: mainImageView.bottomAnchor),
            rightImageView.widthAnchor.constraint(equalToConstant: stripSize),

            rightDarkView.leadingAnchor.constraint(equalTo: rightImageView.leadingAnchor),
            rightDarkView.topAnchor.constraint(equalTo: rightImageView.topAnchor),
            rightDarkView.trailingAnchor.constraint(equalTo: rightImageView.trailingAnchor),
            rightDarkView.bottomAnchor.constraint(equalTo: rightImageView.bottomAnchor),

            bottomImageView.topAnchor.constraint(equalTo: mainImageView.bottomAnchor, constant: -stripSize / 2),
            bottomImageView.leadingAnchor.constraint(equalTo: mainImageView.leadingAnchor),
            bottomImageView.trailingAnchor.constraint(equalTo: mainImageView.trailingAnchor),
            bottomImageView.heightAnchor.constraint(equalToConstant: stripSize),

            bottomDarkView.leadingAnchor.constraint(equalTo: bottomImageView.leadingAnchor),
            bottomDarkView.topAnchor.constraint(equalTo: bottomImageView.topAnchor),
            bottomDarkView.trailingAnchor.constraint(equalTo: bottomImageView.trailingAnchor),
            bottomDarkView.bottomAnchor.constraint(equalTo: bottomImageView.bottomAnchor)

            ])
    }

    func setupMirroView() {
        let image = UIImage(named: "image")
        mainImageView.image = image

        // prepare the image for the right image view
        let rightImage = image?.cropped(to: CGSize(width: stripSize, height: mainImageSize.height),
                                        drawInto: CGRect(x: stripSize - mainImageSize.width, y: 0, width: mainImageSize.width, height: mainImageSize.height))
        let rightImageMirrored = UIImage(cgImage: rightImage!.cgImage!, scale: 1.0, orientation: .upMirrored)
        rightImageView.image = rightImageMirrored

        var rightTransform = CGAffineTransform.identity
        rightTransform = rightTransform.translatedBy(x: stripSize / 2, y: 0)
        rightTransform = rightTransform.concatenating(CGAffineTransform(a: 1.0, b: 1.0, c: 0.0, d: 1.0, tx: 0.0, ty: 0.0))
        rightImageView.transform = rightTransform
        rightDarkView.transform = rightTransform


        // prepare the image for the left image view
        let downImage = image?.cropped(to: CGSize(width: mainImageSize.width, height: stripSize),
                                       drawInto: CGRect(x: 0, y: stripSize - mainImageSize.height, width: mainImageSize.width, height: mainImageSize.height))
        let downImageMirroed = UIImage(cgImage: downImage!.cgImage!, scale: 1.0, orientation: .downMirrored)
        bottomImageView.image = downImageMirroed

        var downTransform = CGAffineTransform.identity
        downTransform = downTransform.translatedBy(x: 0, y: stripSize / 2)
        downTransform = downTransform.concatenating(__CGAffineTransformMake(1.0, 0.0, 1.0, 1.0, 0.0, 0.0))
        bottomImageView.transform = downTransform
        bottomDarkView.transform = downTransform

    }

}

extension UIImage {
    func cropped(to size: CGSize, drawInto: CGRect) -> UIImage {
        UIGraphicsBeginImageContext(size)
        self.draw(in: drawInto)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage!
    }
}

output

这篇关于如何将镜像添加到2d框角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！