web-dev-qa-db-ja.com

Swift CGContextを使用して長方形/線を手続き的に描画する方法

Swiftで手続き的に長方形または線を描画する方法に関する最も単純なコード例を見つけようとして、私は何日もインターネットを探していました。 DrawRectコマンドをオーバーライドすることでそれを行う方法を見てきました。 CGContextを作成してから画像に描画できると思いますが、簡単なコード例をいくつか見てみたいです。または、これはひどいアプローチですか？ありがとう。

class MenuController: UIViewController 
{

    override func viewDidLoad() 
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.view.backgroundColor = UIColor.blackColor()

        var logoFrame = CGRectMake(0,0,118,40)
        var imageView = UIImageView(frame: logoFrame)
        imageView.image = UIImage(named:"Logo")
        self.view.addSubview(imageView)

        //need to draw a rectangle here
    }
}
swiftcgcontextrect
17
iphaaw

以下は、透明な背景と、斜めの線が交差する赤い長方形を含むカスタムUIImageを作成する例です。

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad();

        let imageSize = CGSize(width: 200, height: 200)
        let imageView = UIImageView(frame: CGRect(Origin: CGPoint(x: 100, y: 100), size: imageSize))
        self.view.addSubview(imageView)
        let image = drawCustomImage(size: imageSize)
        imageView.image = image
    }
}

func drawCustomImage(size: CGSize) -> UIImage {
    // Setup our context
    let bounds = CGRect(Origin: .zero, size: size)
    let opaque = false
    let scale: CGFloat = 0
    UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
    let context = UIGraphicsGetCurrentContext()!

    // Setup complete, do drawing here
    context.setStrokeColor(UIColor.red.cgColor)
    context.setLineWidth(2)

    context.stroke(bounds)

    context.beginPath()
    context.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
    context.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
    context.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
    context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
    context.strokePath()

    // Drawing complete, retrieve the finished image and cleanup
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}
32
Wolf McNally

Swift 3.0を使用して更新された回答

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad();

        let imageSize = CGSize(width: 200, height: 200)
        let imageView = UIImageView(frame: CGRect(Origin: CGPoint(x: 100, y: 100), size: imageSize))
        self.view.addSubview(imageView)
        let image = drawCustomImage(size: imageSize)
        imageView.image = image
    }
}

func drawCustomImage(size: CGSize) -> UIImage? {
    // Setup our context
    let bounds = CGRect(Origin: CGPoint.zero, size: size)
    let opaque = false
    let scale: CGFloat = 0
    UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }

    // Setup complete, do drawing here
    context.setStrokeColor(UIColor.red.cgColor)
    context.setLineWidth(5.0)

    // Would draw a border around the rectangle
    // context.stroke(bounds)

    context.beginPath()
    context.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
    context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
    context.strokePath()

    // Drawing complete, retrieve the finished image and cleanup
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

let imageSize = CGSize(width: 200, height: 200)
let imageView = UIImageView(frame: CGRect(Origin: CGPoint(x: 100, y: 100), size: imageSize))
let image = drawCustomImage(size: imageSize)
imageView.image = image
9
KFDoom

Tic Tac Toeゲームでプレイヤーの1人が勝ったときに、受け入れられた答えを使用して線を引きました。おかげで、うまくいったことを知ってよかった。残念ながら、異なるサイズのiPhoneとiPadで同時に動作させるために、いくつかの問題に遭遇しました。これはおそらく対処されるべきものです。基本的に私が言っているのは、あなたのケースによっては、実際にはそのコードのすべてのトラブルに見合う価値がないかもしれないということです。

私の代替ソリューションは、Photoshopでカスタマイズされた見栄えの良いラインを作成し、UIImageViewでロードすることです。私にとっては、これは非常にシンプルで、実行も良く、見栄えもよかったです。明らかにそれは本当にあなたがそれを必要とするものに依存します。

手順：

1：イメージをダウンロードまたは作成します（.PNGとして保存することが望ましい）

2：プロジェクトにドラッグします

3：UIImageビューをストーリーボードにドラッグします

4：画像ビューをクリックして、属性インスペクターで画像を選択します

5：Ctrlキーを押しながらイメージビューを.Swiftファイルにドラッグして、アウトレットを宣言します

6：すべてのデバイスで簡単に動作するように自動レイアウト制約を設定します

また、画面上での画像ビューのアニメーション化、回転、変換も間違いなく簡単です

画像を変更するには：

yourImageViewOutletName.image = UIImage(named: "ImageNameHere")
3
mothy