ছায়া ছড়িয়ে এবং অস্পষ্টতা কীভাবে নিয়ন্ত্রণ করবেন?

Question

আমি স্কেচে ইউআই উপাদানগুলি ডিজাইন করেছি, এবং এর মধ্যে একটির ঝাপসা 1 এবং ছড়িয়ে ছায়া যুক্ত আছে I নিছক শ্যাডোস্পেসিটি) অস্পষ্টতা এবং ছড়িয়ে দেওয়ার মতো জিনিসগুলি কীভাবে নিয়ন্ত্রণ করতে পারে?

সম্পাদনা করুন:

স্কেচে আমার সেটিংস এখানে রয়েছে: এবং আমি আমার ছায়ার মতো দেখতে চাই তা এখানে:

এই মুহুর্তে এটি দেখতে কেমন দেখাচ্ছে: দ্রষ্টব্য, আসলে ছায়া দেখতে আপনাকে ছবিতে ক্লিক করতে হবে।

আমার কোডটি নিম্নরূপ:

func setupLayer(){
    view.layer.cornerRadius = 2
    view.layer.shadowColor = Colors.Shadow.CGColor
    view.layer.shadowOffset = CGSize(width: 0, height: 1)
    view.layer.shadowOpacity = 0.9
    view.layer.shadowRadius = 5
}

Comments

আইওএস (প্ল্যাটফর্ম), ডিজাইন (সফটওয়্যার স্কেচের ব্যবহার) এবং কোর-গ্রাফিক্স (ছায়া আঁকার জন্য কোনও ইউআইবিজেয়ারপথ ব্যবহার করা সম্ভব, যা প্রাসঙ্গিক হতে পারে) সমস্ত প্রাসঙ্গিক, আমি দেখতে পাচ্ছি না কেন তাদের উচিত অপসারণ করা.

— কোয়ান্টালিনাক্সাইট

আপনি কি ঠিক সেই সাদা দর্শনের জন্য ছায়া চান?

— ও-মোকার

দেখে মনে হচ্ছে স্কেচ এবং কোর অ্যানিমেশন ফ্রেমওয়ার্কের আলাদা মেট্রিক রয়েছে, কারণ এটি সর্বদা আইওএস এবং একই প্যারামগুলির সাথে স্কেচে আলাদা দেখায়।

— তৈমুর বার্নিকোভিচ 27'17

আহ। ডিজাইনারদের সাথে কাজ করার আনন্দগুলি এমন সরঞ্জামগুলি ব্যবহার করে যা iOS কাজ করে তার সাথে সামান্য বা কোনও সাদৃশ্য। যদি আপনি স্কেচের পরিবর্তে পেইন্টকোডের মতো কিছুতে যান তবে এটি কেবল আইওএসের মতো কাজ করে না তবে এটি আপনাকে প্রয়োজনীয় কোডও দেবে। :-)

— ফগমিস্টার

আপনি যদি স্কেচে ব্যাসার্ধ এবং অস্পষ্ট উভয়টি সেট করে রেখেছেন?

— ভ্লাদিমির

Answer 1

নিখুঁত নির্ভুলতার সাথে একটি ইউআইভিউয়ের স্তরে সমস্ত 6 স্কেচের ছায়া বৈশিষ্ট্য কীভাবে প্রয়োগ করবেন তা এখানে:

extension CALayer {
  func applySketchShadow(
    color: UIColor = .black,
    alpha: Float = 0.5,
    x: CGFloat = 0,
    y: CGFloat = 2,
    blur: CGFloat = 4,
    spread: CGFloat = 0)
  {
    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
    }
  }
}

বলুন আমরা নিম্নলিখিতটি উপস্থাপন করতে চাই:

আপনি সহজেই এর মাধ্যমে এটি করতে পারেন:

myView.layer.applySketchShadow(
  color: .black, 
  alpha: 0.5, 
  x: 0, 
  y: 0, 
  blur: 4, 
  spread: 0)

বা আরও সংক্ষেপে:

myView.layer.applySketchShadow(y: 0)

উদাহরণ:

বাম: আইফোন 8 ইউআইভিউ স্ক্রিনশট; ডান: স্কেচ আয়তক্ষেত্র।

বিঃদ্রঃ:

• শূন্য-বিহীন ব্যবহার spreadকরার সময় bounds, এটি ক্যালিয়ারের ভিত্তিতে একটি পাথ হার্ডকোড করে । যদি স্তরটির সীমাটি কখনও পরিবর্তন হয়, আপনি applySketchShadow()আবার পদ্ধতিটি কল করতে চান ।

Comments

হুঁ। স্কেচে, আপনি যদি স্প্রেড প্রয়োগ করেন তবে এটি 'সরে যায়', যেখানে ছায়ার ঝাপসা / গ্রেডিয়েন্ট শুরু হয়। যার অর্থ - অস্পষ্টতা শুরু না হওয়া পর্যন্ত এটি ধ্রুবক ছায়া-বর্ণে স্থির থাকে। তবে আমরা যদি ছায়ার লাইয়ারকে চারপাশে সরিয়ে নিয়ে যাই, তবে ছায়াটি কেবল সেই স্তর থেকে শুরু হবে, তাই না? (বলুন স্প্রেড 10, ছায়াটি কেবল 10 এর অফসেটের পরে শুরু হবে, যেখানে স্কেচের মতো, 10 এর অফসেটের পরে ঝাপসা / গ্রেডিয়েন্ট শুরু হবে)। সুতরাং তারা সত্যিই মেলে না, তাই না?

— স্টিফান

@ সেনসফুল আপনি কীভাবে এই সূত্রটি অর্জন করেছেন তা জানতে আগ্রহী ?!

— হাসেম আবুনাজমি

আপনি সেট করতে ভুলে গেছেন maskToBounds = false।

— স্কটিব্ল্যাডেস 23'18

স্কটিব্লেডস দ্বারা উপরে উল্লিখিত হিসাবে, এটি ছাড়া কাজ করবে না maskToBounds = false। এটি যেখানে ব্যর্থ হবে একটি উদাহরণ হ'ল এটিতে একটি ছায়া প্রয়োগ করার সময় UIButton।

— জোসে

এটি কি shadowRadius = blur / UIScreen.main.scaleহার্ড-কোডিংয়ের বিরোধিতা করা উচিত blur / 2.0? বা, 2 দিয়ে বিভক্ত করার আরও কি কারণ আছে? @ ম্যাটচিফ্যাং আপনি কি এটি বুঝতে পেরেছেন?

— JWK

Answer 2

আপনি এটি চেষ্টা করতে পারেন .... আপনি মান সহ খেলতে পারেন। shadowRadiusনির্দেশনা দাগ পরিমাণ। shadowOffsetছায়া কোথায় যায় তা নির্দেশ করে।

সুইফট ২.০

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height))
//Change 2.1 to amount of spread you need and for height replace the code for height

demoView.layer.cornerRadius = 2
demoView.layer.shadowColor = UIColor.blackColor().CGColor
demoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and y
demoView.layer.shadowOpacity = 0.5
demoView.layer.shadowRadius = 5.0 //Here your control your blur
demoView.layer.masksToBounds =  false
demoView.layer.shadowPath = shadowPath.CGPath

সুইফট 3.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height 
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height)) 
//Change 2.1 to amount of spread you need and for height replace the code for height

demoView.layer.cornerRadius = 2
demoView.layer.shadowColor = UIColor.black.cgColor
demoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and y
demoView.layer.shadowOpacity = 0.5
demoView.layer.shadowRadius = 5.0 //Here your control your blur
demoView.layer.masksToBounds =  false
demoView.layer.shadowPath = shadowPath.cgPath

উদাহরণ সহ স্প্রেড

একটি মৌলিক ছায়া তৈরি করতে

    demoView.layer.cornerRadius = 2
    demoView.layer.shadowColor = UIColor.blackColor().CGColor
    demoView.layer.shadowOffset = CGSizeMake(0.5, 4.0); //Here your control your spread
    demoView.layer.shadowOpacity = 0.5 
    demoView.layer.shadowRadius = 5.0 //Here your control your blur

সুইফট ২.০-তে বেসিক শেডোর উদাহরণ

Comments

তথ্যটি ভুল, অফসেটটি ছড়িয়ে পড়ার নিয়ন্ত্রণ নয়, এটি এক্স এবং ওয়াইয়ের একটি নিয়ন্ত্রণ।

— কোয়ান্টালিনাক্সাইট

@ কোয়ান্টালিইনসাইটে আমি উত্তরগুলি আপডেট করেছি মন্তব্যগুলিতে ঘটনাক্রমে পরিবর্তিত হয়েছি

— ও-এমকার

ডান, এবং এখন আমার প্রশ্নের মূল আসে: আমি কীভাবে বিস্তারকে নিয়ন্ত্রণ করব?

— কোয়ান্টালিনাক্সাইট

@ কোয়ান্টালিনাক্সাইট আপডেটেড কোডটি এখন আপনার প্রয়োজনীয়

— প্রসারণের

উত্তর করার জন্য ধন্যবাদ. এখানে আমি শেডোস্পেসিটি বুঝতে পারি না (কেন এটি ব্যবহৃত হয়)।

— সুনিতা

Answer 3

সুইচ 4-তে আইবি ডিজাইনযোগ্য এবং আইবিআইস্পেসটেবল ব্যবহার করে স্কেচ শ্যাডো

পাশ দিয়ে স্কেচ এবং এক্সকোড সাইড

কোড

@IBDesignable class ShadowView: UIView {

    @IBInspectable var shadowColor: UIColor? {
        get {
            if let color = layer.shadowColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set {
            if let color = newValue {
                layer.shadowColor = color.cgColor
            } else {
                layer.shadowColor = nil
            }
        }
    }

    @IBInspectable var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }

    @IBInspectable var shadowOffset: CGPoint {
        get {
            return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)
        }
        set {
            layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)
        }

     }

    @IBInspectable var shadowBlur: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue / 2.0
        }
    }

    @IBInspectable var shadowSpread: CGFloat = 0 {
        didSet {
            if shadowSpread == 0 {
                layer.shadowPath = nil
            } else {
                let dx = -shadowSpread
                let rect = bounds.insetBy(dx: dx, dy: dx)
                layer.shadowPath = UIBezierPath(rect: rect).cgPath
            }
        }
    }
}

আউটপুট

এটি কিভাবে ব্যবহার করতে

Comments

আপনি layer.shadowRadius * 2ছায়াব্লুর গেটের জন্য ফিরে আসবেন না

— বার্কুওকো

Answer 4

এই কোডটি আমার পক্ষে খুব ভালভাবে কাজ করেছে:

yourView.layer.shadowOpacity = 0.2 // opacity, 20%
yourView.layer.shadowColor = UIColor.black.cgColor
yourView.layer.shadowRadius = 2 // HALF of blur
yourView.layer.shadowOffset = CGSize(width: 0, height: 2) // Spread x, y
yourView.layer.masksToBounds = false

Comments

স্কেচের ব্লার মানটি কোর অ্যানিমেশনের ছায়ার ব্যাসার্ধের সাথে মেলে না ।

— সিআইফিল্টার

আমাদের জন্য কী পর্যাপ্ত পরিশ্রম করে শেষ হয়েছিল তা হল কোর অ্যানিমেশনের ছায়ার ব্যাসার্ধের জন্য স্কেচের অস্পষ্ট মানটি অর্ধেক করা।

— সিআইফিল্টার

Answer 5

যারা পূর্বনির্ধারিত পথে একটি ছায়া প্রয়োগ করার চেষ্টা করছেন (উদাহরণস্বরূপ, একটি বৃত্তাকার দৃশ্যের মতো), আমি এখানে কী শেষ করেছি:

extension CALayer {
    func applyShadow(color: UIColor = .black,
                     alpha: Float = 0.5,
                     x: CGFloat = 0,
                     y: CGFloat = 2,
                     blur: CGFloat = 4,
                     spread: CGFloat = 0,
                     path: UIBezierPath? = nil) {
        shadowColor = color.cgColor
        shadowOpacity = alpha
        shadowRadius = blur / 2
        if let path = path {
            if spread == 0 {
                shadowOffset = CGSize(width: x, height: y)
            } else {
                let scaleX = (path.bounds.width + (spread * 2)) / path.bounds.width
                let scaleY = (path.bounds.height + (spread * 2)) / path.bounds.height

                path.apply(CGAffineTransform(translationX: x + -spread, y: y + -spread).scaledBy(x: scaleX, y: scaleY))
                shadowPath = path.cgPath
            }
        } else {
            shadowOffset = CGSize(width: x, height: y)
            if spread == 0 {
                shadowPath = nil
            } else {
                let dx = -spread
                let rect = bounds.insetBy(dx: dx, dy: dx)
                shadowPath = UIBezierPath(rect: rect).cgPath
            }
        }
        shouldRasterize = true
        rasterizationScale = UIScreen.main.scale
    }
}

আমি পরে কিছু উদাহরণ পোস্ট করব, তবে এটি আমার জন্য বিজ্ঞপ্তি দর্শনের জন্য কাজ করেছে।

Comments

এটি "প্রায়" কাজ করে কিন্তু আপনি যখন এবং এর 1সাথে একটি স্প্রেড ব্যবহার করেন তখন স্প্রেডটি ভুল । এই ক্ষেত্রে ছায়ার একটি অফসেট থাকে যখন এটি হওয়া উচিত নয়। এখানে ত্রিভুজটির ছায়া সমস্ত দিকে 1px ছড়িয়ে থাকা উচিত আইবিবিএইচxy 0 shapeLayer.applyShadow(color: .black, alpha: 1, x: 0, y: 0, blur: 0, spread: 1, path: path)

— জানুয়ারী

Answer 6

আমার পোস্টটির ভিত্তিতে আমার সমাধান উত্তর দেয়: (সুইফট 3)

let shadowPath = UIBezierPath(rect: CGRect(x: -1,
                                           y: -2,
                                           width: target.frame.width + 2,
                                           height: target.frame.height + 2))

target.layer.shadowColor = UIColor(hexString: shadowColor).cgColor
target.layer.shadowOffset = CGSize(width: CGFloat(shadowOffsetX), height: CGFloat(shadowOffsetY))
target.layer.masksToBounds = false
target.layer.shadowOpacity = Float(shadowOpacity)
target.layer.shadowPath = shadowPath.cgPath

Answer 7

আমি এখানে পোস্ট করা উত্তর এবং মন্তব্যে পরামর্শগুলি সত্যিই পছন্দ করি । এইভাবে আমি সেই সমাধানটি সংশোধন করেছি:

extension UIView {
  func applyShadow(color: UIColor, alpha: Float, x: CGFloat, y: CGFloat, blur: CGFloat, spread: CGFloat) {
    layer.masksToBounds = false
    layer.shadowColor = color.cgColor
    layer.shadowOpacity = alpha
    layer.shadowOffset = CGSize(width: x, height: y)
    layer.shadowRadius = blur / UIScreen.main.scale
    if spread == 0 {
      layer.shadowPath = nil
    } else {
      let dx = -spread
      let rect = bounds.insetBy(dx: dx, dy: dx)
      layer.shadowPath = UIBezierPath(rect: rect).cgPath
    }
  }
}

ব্যবহার:

myButton.applyShadow(color: .black, alpha: 0.2, x: 0, y: 1, blur: 2, spread: 0)

Answer 8

এটি ইতিহাসে কিছুটা ডিগজিন হতে পারে তবে কারও কারও কাছে একই সমস্যা ছিল। আমি গৃহীত উত্তর থেকে কোড নমুনা ব্যবহার করেছি। তবে প্রভাবগুলি একেবারে পৃথক: - স্কেচের একই মানের তুলনায় y মানটি প্রায় অর্ধেক হতে হবে - আমি নেভিগেশন বারে ছায়া প্রয়োগ করার চেষ্টা করেছি এবং প্রভাবটি মারাত্মকভাবে আলাদা - স্কেচের মতো একই মান ব্যবহার করার সময় সবে দৃশ্যমান।

সুতরাং মনে হচ্ছে যে পদ্ধতিটি স্কেচ পরামিতিগুলিকে পুরোপুরি প্রতিফলিত করছে না। কোন ইঙ্গিত?

Comments

এটি কোনও উত্তর নয় - মন্তব্যগুলি মন্তব্যে যায়!

— ডেভ ওয়াই