Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > 丸、四角、線、三角を描画

UIBezierpathで丸、四角、三角を描画する

先日のPlaygroundの記事で動作を検証していたのですが描画方法がすぐ見つからなかったのでこの記事を追加します。

参考:[iPhone] UIBezierPath 図形の描画(Objective-C)
参考:Drawing the circle in Swift
参考:Create triangle with straight lines from list of points - with iPhone(Objective-C)

丸を描画してみる



        //1.view作成
        let size = CGSize(width: 150, height: 150)
        let view:UIView = UIView(frame: CGRect(origin: CGPointZero, size: size))
        UIGraphicsBeginImageContextWithOptions(size, false, 0);//描画開始
        
        //2.丸作成
        var bounds:CGRect = CGRectMake(0, 0, 150, 150);//サイズ
        var center = CGPoint()
        center.x = bounds.origin.x + bounds.size.width / 2.0;
        center.y = bounds.origin.y + bounds.size.height / 2.0;
        var radius = (min(bounds.size.width, bounds.size.height) / 2.0);
        var path:UIBezierPath = UIBezierPath();
        path.addArcWithCenter(center, radius: radius, startAngle: 0.0, endAngle: CGFloat(M_PI) * 2.0, clockwise: true);
        UIColorFromRGB(0xfde9ac).setFill();
        path.stroke();//枠線
        path.fill();//色
        
        //3.viewに反映
        view.layer.contents = UIGraphicsGetImageFromCurrentImageContext().CGImage
        UIGraphicsEndImageContext()
        
        //4.selfにview追加
        self.view.addSubview(view);
        
         //おまけ関数(色を16進数から取得)
         func UIColorFromRGB(rgbValue: UInt) -> UIColor {
        return UIColor(
            red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
            blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
            alpha: CGFloat(1.0)
        )
        }

口の線を描画してみる

上記の丸サンプルの(2)を以下コードに入れ替え。もしくは追加。


    let path_line = UIBezierPath();
    path_line.moveToPoint(CGPointMake(20, 80));//始点
    path_line.addLineToPoint(CGPointMake(130, 80));//終点
    UIColor.blackColor().setStroke();
    path_line.stroke();

鼻の三角を描画してみる

三角は線を三つつなげる


    let path_triangle = UIBezierPath();
    path_triangle.moveToPoint(CGPointMake(70, 60));//始点
    path_triangle.addLineToPoint(CGPointMake(80, 60));//次の点
    path_triangle.addLineToPoint(CGPointMake(75, 40));//次の点
    path_triangle.addLineToPoint(CGPointMake(70, 60));//終点(最初の点)
    UIColor.blackColor().setStroke();
    path_triangle.stroke();

目の四角を追加する

roundSizeやCornerを調整することで角丸にしたりも可能です。


    let roundCorner = UIRectCorner.TopLeft | UIRectCorner.BottomRight;
    let roundSize = CGSizeMake(1.0, 1.0);
    let path_square = UIBezierPath(roundedRect: CGRectMake(10, 20, 130, 10), byRoundingCorners: roundCorner, cornerRadii: roundSize)
    UIColor.blackColor().setFill();
    path_square.fill();

時間の関係で目は一つにしようとコーディングしていると、 目隠しの変態中年になってしまいました。。。どうせなのでこの四角をモザイクにしてみます。

目の四角をモザイクにする

流石に時間がなくなってしまいましたので、改めて時間をもうけて別記事にて追加してみますorz

記事追加しました<2014/11/19>:モザイク描画(#1)

↓こんな記事もありますよ!

GはGoogle他のアルファベットを勝手に妄想してみる

さて昨日はGoogleが衝撃的な発表でAlphabetという親会社をつくって、Googleはアルファベットの中のGがGoogleとの 位置づけで今後展開していくとの事。ネーミングもですが、今後の期待を大きく感じる、またわかりやすく好印象だったのか株価も 大きく上がったとのことでした。さて、その他残りのアルファベットはどんな風になるのかなぁと勝手に歩きながら妄想してみました。

UITableViewCellをプログラムで動的に作成する

UITableViewをStoryboardで作成する方法は結構ありますが、プログラムだけで作成するサンプルが少なかったので共有します。

willsetとdidsetでプロパティを監視。意味あるのか???

クラスのプロパティにはWillsetとdidsetという監視用の関数があると聞いたのですが、用途は分かるにしても メリットとしてはどういうものなのかなと、うーん、と考えていました。調べていると海外のサイトでは同じように疑問にもつ質問があがっていました。 getとsetで同じことができるのでは?との私と同じスタンスです。解決されていましたので、順に説明していきます。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!