web-dev-qa-db-ja.com

UIViewの3辺からのみシャドウを描画

次のように、UIViewの周りに影を描画することに成功しました。

block1.layer.masksToBounds = NO;
block1.layer.shadowOffset = CGSizeMake(0, 0);
block1.layer.shadowRadius = 1;
block1.layer.shadowOpacity = 0.7;

今何が起こっているのですか？私は長方形のUIViewを持っていて、その周りに影を描きたいですbottom側面を残さずに影。

新しいUIBezierPathを作成してblock1.layer.shadowPathを指定する必要があることはわかっていますが、その方法がわかりません。

もちろん、layer.shadowOffsetを設定しても問題は解決しません。

前もって感謝します！

iosobjective-ccocoa-touchuiviewuikit
21
Sergey Grischyov

_layer.shadowOffset_を設定しても効果がないと言っているのはわかっていますが、負の値を入力することは許可されているため、layer.shadowOffset = CGSizeMake(0.0, -2.0)を設定すると、探している効果に近づきますが、もちろんそれが3つの側面で同じになってほしいと思います。

したがって、ここでは_layer.shadowPath_を使用します。

_UIView *block1 = [[UIView alloc] initWithFrame:CGRectMake(32.0, 32.0, 128.0, 128.0)];
[block1 setBackgroundColor:[UIColor orangeColor]];
[self.view addSubview:block1];

block1.layer.masksToBounds = NO;
block1.layer.shadowOffset = CGSizeMake(0, 0);
block1.layer.shadowRadius = 1;
block1.layer.shadowOpacity = 0.7;

UIBezierPath *path = [UIBezierPath bezierPath];

// Start at the Top Left Corner
[path moveToPoint:CGPointMake(0.0, 0.0)];

// Move to the Top Right Corner
[path addLineToPoint:CGPointMake(CGRectGetWidth(block1.frame), 0.0)];

// Move to the Bottom Right Corner
[path addLineToPoint:CGPointMake(CGRectGetWidth(block1.frame), CGRectGetHeight(block1.frame))];

// This is the extra point in the middle :) Its the secret sauce.
[path addLineToPoint:CGPointMake(CGRectGetWidth(block1.frame) / 2.0, CGRectGetHeight(block1.frame) / 2.0)];

// Move to the Bottom Left Corner
[path addLineToPoint:CGPointMake(0.0, CGRectGetHeight(block1.frame))];

// Move to the Close the Path
[path closePath];

block1.layer.shadowPath = path.CGPath;
_

そして、何が起こっているのかを知るために、ここにあなたが描いた実際のシャドウパスがあります:)

enter image description here

余分な中点を他の線の前または後に移動して、どちら側を省略するかを選択できます。

49
Ryan Poolos

Ashok R Swiftコードのおかげで、他の回答が少し改善されました。

すべての側面に影のあるビューの背景に三角形のビューを作成していたので、側面の影に白い三角形は必要ありません。

高さよりも幅が比較的大きいビューの場合は壊れます。

image with triangle shadow

回避策は、三角形のビューパスを完全に作成するのではなく、シャドウが少し必要なラインのパスをビューのその側にシフトすることですパスを完全に作成します 。

そのための拡張機能を作成しました-

_extension UIView {
    func addshadow(top: Bool,
                   left: Bool,
                   bottom: Bool,
                   right: Bool,
                   shadowRadius: CGFloat = 2.0) {

        self.layer.masksToBounds = false
        self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
        self.layer.shadowRadius = shadowRadius
        self.layer.shadowOpacity = 1.0

        let path = UIBezierPath()
        var x: CGFloat = 0
        var y: CGFloat = 0
        var viewWidth = self.frame.width
        var viewHeight = self.frame.height

        // here x, y, viewWidth, and viewHeight can be changed in
        // order to play around with the shadow paths.
        if (!top) {
            y+=(shadowRadius+1)
        }
        if (!bottom) {
            viewHeight-=(shadowRadius+1)
        }
        if (!left) {
            x+=(shadowRadius+1)
        }
        if (!right) {
            viewWidth-=(shadowRadius+1)
        }
        // selecting top most point
        path.move(to: CGPoint(x: x, y: y))
        // Move to the Bottom Left Corner, this will cover left edges
        /*
         |☐
         */
        path.addLine(to: CGPoint(x: x, y: viewHeight))
        // Move to the Bottom Right Corner, this will cover bottom Edge
        /*
         ☐
         -
         */
        path.addLine(to: CGPoint(x: viewWidth, y: viewHeight))
        // Move to the Top Right Corner, this will cover right Edge
        /*
         ☐|
         */
        path.addLine(to: CGPoint(x: viewWidth, y: y))
        // Move back to the initial point, this will cover the top Edge
        /*
         _
         ☐
         */        
        path.close()
        self.layer.shadowPath = path.cgPath
    }
_

シャドウを表示したい側のいずれかにブール値をtrueに設定します

myView.addshadow(top: false, left: true, bottom: true, right: true, shadowRadius: 2.0)

//シャドウの半径は上記ではオプションであり、デフォルトで2.0に設定されています

enter image description here

またはmyView.addshadow(top: true, left: true, bottom: true, right: true, shadowRadius: 2.0)

enter image description here

またはmyView.addshadow(top: false, left: false, bottom: true, right: true, shadowRadius: 2.0)

enter image description here

7
Saurabh Yadav

更新中Ryan PoolosAnswer to Swift 3.0

おかげでRyan Poolos

class sampleViewController: UIViewController {
    var block1: UIView! = nil

    override func viewDidLoad() {

        super.viewDidLoad()
        block1 = UIView(frame: CGRect(x: 32.0, y: 32.0, width: 128.0, height: 128.0))
        block1.backgroundColor = UIColor.orange
        self.view.addSubview(block1)

        block1.layer.masksToBounds = false
        block1.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
        block1.layer.shadowRadius = 1.0
        block1.layer.shadowOpacity = 0.7

        let path = UIBezierPath()

        // Start at the Top Left Corner
        path.move(to: CGPoint(x: 0.0, y: 0.0))

        // Move to the Top Right Corner
        path.addLine(to: CGPoint(x: block1.frame.size.width, y: 0.0))

        // Move to the Bottom Right Corner
        path.addLine(to: CGPoint(x: block1.frame.size.width, y: block1.frame.size.height))

        // This is the extra point in the middle :) Its the secret sauce.
        path.addLine(to: CGPoint(x: block1.frame.size.width/2.0, y: block1.frame.size.height/2.0))

        // Move to the Bottom Left Corner
        path.addLine(to: CGPoint(x: 0.0, y: block1.frame.size.height))

        path.close()

        block1.layer.shadowPath = path.cgPath
    }
}

結果：

image

3
Ashok R

これを試して

extension CALayer {
func applySketchShadow(color: UIColor, alpha: CGFloat, x: CGFloat, y: CGFloat, blur: CGFloat, spread: CGFloat)
{
    shadowColor = color.cgColor
    shadowOpacity = alpha
    shadowOffset = CGSize(width: x, height: y)
    shadowRadius = blur / 2.0
    if spread == 0 {
        shadowPath = nil
    } else {
        let dx = -spread
        let rect = bounds.insetBy(dx: dx, dy: dx)
        shadowPath = UIBezierPath(rect: rect).cgPath
    }
}
0
roopesh chowdary