Mais conteúdo relacionado
Cocoa勉強会201303公開用pdf
- 1. Bézier
2013.3.30
Cocoa勉強会 関西
大森智史
@oogon / satoshi.oomori
2013年 3月 31日 日曜日
- 3. あんた、誰?
• と、いうわけで自己紹介。
2013年 3月 31日 日曜日
- 4. • 大森智史といいます。
• Objective-Cで遊んでます。
• Cocoa勉強会関西は最初からいます。
2013年 3月 31日 日曜日
- 9. Bézier
• こんなやつですな
2013年 3月 31日 日曜日
- 10. ところで
• iOS 6 になって、ものすごく気になるUIパー
ツができました。
2013年 3月 31日 日曜日
- 12. • これです。
• びよーん。
2013年 3月 31日 日曜日
- 19. • つまり
• 上半円、下半
円、それをつ
なぐ曲線
• 塗り
• これでいい訳だ
2013年 3月 31日 日曜日
- 23. • 実際にやってみましょう。
• //下の半円
UIBezierPath *currentPath = [UIBezierPath
bezierPath];
[currentPath addArcWithCenter:
CGPointMake(200,currentPosition.y+200)
radius:100-(currentPosition.y/5)
startAngle:radians(0)
endAngle:radians(180)
clockwise:YES];
2013年 3月 31日 日曜日
- 24. • 度→ラジアンはマクロを作っておくと便利です。
//PIを3.14...と定義
#define PI 3.14159265358979323846
//関数定義degrees*PI/180がradians
static inline double radians(double
degrees) { return degrees * PI / 180; }
2013年 3月 31日 日曜日
- 25. • ベジェパスを作る
[UIBezierPath bezierPath];
2013年 3月 31日 日曜日
- 26. • 弧を描く
[currentPath addArcWithCenter:中心点
radius:半径
startAngle:開始角(ラジアン)
endAngle:終了角(ラジアン)
clockwise:時計回りですか?
];
π 0
2013年 3月 31日 日曜日
- 27. • 弧を描く
[currentPath addArcWithCenter:中心点
radius:半径
startAngle:開始角(ラジアン)
endAngle:終了角(ラジアン)
clockwise:時計回りですか?
];
π 0
2013年 3月 31日 日曜日
- 28. • 弧を描く
[currentPath addArcWithCenter:中心点
radius:半径
startAngle:開始角(ラジアン)
endAngle:終了角(ラジアン)
clockwise:時計回りですか?
];
π 0
2013年 3月 31日 日曜日
- 29. • 弧を描く
[currentPath addArcWithCenter:中心点
radius:半径
startAngle:開始角(ラジアン)
endAngle:終了角(ラジアン)
clockwise:時計回りですか?
];
π 0
2013年 3月 31日 日曜日
- 30. • 弧を描く
[currentPath addArcWithCenter:中心点
radius:半径
startAngle:開始角(ラジアン)
endAngle:終了角(ラジアン)
clockwise:時計回りですか?
];
π 0
2013年 3月 31日 日曜日
- 31. • 弧を描く
[currentPath addArcWithCenter:中心点
radius:半径
startAngle:開始角(ラジアン)
endAngle:終了角(ラジアン)
clockwise:時計回りですか?
];
π 0
2013年 3月 31日 日曜日
- 32. • 次に曲線
//左側のつなぎ
[currentPath
addCurveToPoint:CGPointMake(100,200)
controlPoint1:CGPointMake(100+
(currentPosition.y/
5),currentPosition.y+200-
(currentPosition.y/3))
controlPoint2:CGPointMake(100,200+
(currentPosition.y/5))];
2013年 3月 31日 日曜日
- 33. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
2013年 3月 31日 日曜日
- 34. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
2013年 3月 31日 日曜日
- 35. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
開始点
2013年 3月 31日 日曜日
- 36. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
開始点
2013年 3月 31日 日曜日
- 37. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
開始点
2013年 3月 31日 日曜日
- 38. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
開始点
2013年 3月 31日 日曜日
- 39. • 曲線を描く
[currentPath addCurveToPoint:終了点
controlPoint1:コントロールポイント1
controlPoint2:コントロールポイント2
];
開始点
2013年 3月 31日 日曜日
- 41. • パスを閉じて
[currentPath closePath];
2013年 3月 31日 日曜日
- 42. • カラーをセットして
[[UIColor lightGrayColor] setFill];
• 塗ります。
[currentPath fill];
2013年 3月 31日 日曜日
- 44. • DEMO
• Bezier
2013年 3月 31日 日曜日
- 48. • Bézierについてのお話
コントロールポイント コントロールポイント
C1 C2
セグメント
P1 P2
アンカーポイント
アンカーポイント
2013年 3月 31日 日曜日
- 49. • Bézierについてのお話
C1 0:8 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 50. • Bézierについてのお話
C1 0:8 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 51. • Bézierについてのお話
C1 1:7 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 52. • Bézierについてのお話
C1 2:6 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 53. • Bézierについてのお話
C1 3:5 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 54. • Bézierについてのお話
C1 4:4 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 55. • Bézierについてのお話
C1 5:5 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 56. • Bézierについてのお話
C1 6:2 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 57. • Bézierについてのお話
C1 7:1 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 58. • Bézierについてのお話
C1 8:0 C2
P1 P2
参考:「中学生でもわかるベジェ曲線」
http://ruiueyama.tumblr.com/post/11197882224
2013年 3月 31日 日曜日
- 60. 角の処理
マイター、ベベル
2013年 3月 31日 日曜日
- 61. マイターリミット(ポイント接続部の角の処理)
• 線幅との比率(デフォルトは10.0)
• リミット値を超えるとマイター接続になります。
• (それまではベベル接続)
thePath.miterLimit = 20.0;
ベベル接続
マイター接続
マイター
2013年 3月 31日 日曜日
- 63. • DEMO
• BezierMiter
2013年 3月 31日 日曜日
- 64. 破線
ラインダッシュ
2013年 3月 31日 日曜日
- 65. float array[5];
array[0] = 8.0;
array[1] = 3.0;
array[2] = 20.0;
array[3] = 3.0;
[outPath setLineDash: array count: 4
phase: 0.0];
2013年 3月 31日 日曜日
- 66. • DEMO
• BezierLineDash
2013年 3月 31日 日曜日
- 67. 端の処理
ラインキャップスタイル
2013年 3月 31日 日曜日
- 68. • lineCapStyleプロパティ
• CGLineCap
• kCGLineCapButt キャップなし
• kCGLineCapRound 丸い端
• kCGLineCapSquare 四角
2013年 3月 31日 日曜日
- 69. ヒットテスト
その位置にパスがあるか
2013年 3月 31日 日曜日
- 71. くりぬき
2つの処理方法
2013年 3月 31日 日曜日
- 72. • くりぬき方法(デフォルト)
• Non-Zero ルール
thePath.usesEvenOddFillRule = NO;
2013年 3月 31日 日曜日
- 79. • 参考
• パスの順序を反転する
• - (UIBezierPath *)bezierPathByReversingPath
NS_AVAILABLE_IOS(6_0);
2013年 3月 31日 日曜日
- 80. • くりぬき方法
• Even-Odd ルール
• ( usesEvenOddFillRuleプロパティを使用)
thePath.usesEvenOddFillRule = NO;thePath.usesEvenOddFillRule = YES;
2013年 3月 31日 日曜日
- 86. クリッピング
画像をマスク
2013年 3月 31日 日曜日
- 87. • 画像のクリッピング
• 画像をパスで切り抜きできます。
• [outPath2 addClip];
2013年 3月 31日 日曜日
- 88. • 画像のクリッピング
• [outPath2 addClip];
2013年 3月 31日 日曜日
- 89. • DEMO
• BezierAddclip
2013年 3月 31日 日曜日
- 90. ブレンド
合成方法の指定
2013年 3月 31日 日曜日
- 91. • ブレンドモード
• 塗り、線で下地との混ざり具合を調整します
2013年 3月 31日 日曜日
- 92. • ブレンドモード
• [outPath3 fillWithBlendMode:
(CGBlendMode)kCGBlendModeSourceAtop
alpha:0.8];
2013年 3月 31日 日曜日
- 93. • CGBlendMode
kCGBlendModeNormal, kCGBlendModeSaturation, kCGBlendModeDestinationOver
kCGBlendModeMultiply, kCGBlendModeColor,
kCGBlendModeDestinationIn
kCGBlendModeScreen, kCGBlendModeLuminosity,
kCGBlendModeDestinationOut
kCGBlendModeOverlay,
kCGBlendModeClear,
kCGBlendModeDarken, kCGBlendModeDestinationAtop
kCGBlendModeCopy
kCGBlendModeLighten,
kCGBlendModeSourceIn kCGBlendModeXOR
kCGBlendModeColorDodge,
kCGBlendModeSourceOut
kCGBlendModePlusDarker
kCGBlendModeColorBurn,
kCGBlendModeSourceAtop
kCGBlendModeSoftLight, kCGBlendModePlusLighter
kCGBlendModeDestinationOver
kCGBlendModeHardLight,
kCGBlendModeDestinationIn
kCGBlendModeDifference,
kCGBlendModeDestinationOut,
kCGBlendModeExclusion,
kCGBlendModeHue, kCGBlendModeDestinationAtop,
2013年 3月 31日 日曜日
- 94. • DEMO
• BezierBlendMode
2013年 3月 31日 日曜日
- 95. 座標計算
パスの位置を求める
2013年 3月 31日 日曜日
- 96. • セグメント上の座標を求める( 0 ≦ t ≦ 1 )
float tp = (1-t);
CGFloat x = t*t*t*x2 + 3*t*t*tp*cp2x + 3*t*tp*tp*cp1x +
tp*tp*tp*x1;
CGFloat y = t*t*t*y2 + 3*t*t*tp*cp2y + 3*t*tp*tp*cp1y +
tp*tp*tp*y1;
t=1
ここはどこ?
t=0
2013年 3月 31日 日曜日
- 97. • DEMO
• BezierSegmentPoint
2013年 3月 31日 日曜日
- 98. 接線の角度
ある地点の傾き
2013年 3月 31日 日曜日
- 99. • 接線の角度を求める( 0 ≦ t ≦ 1 )
float tp = (1-t);
CGFloat dx = 3*(t*t*(x2-cp2x)+2*t*tp*(cp2x-cp1x)+tp*tp*(cp1x-
x1));
CGFloat dy = 3*(t*t*(y2-cp2y)+2*t*tp*(cp2y-cp1y)+tp*tp*(cp1y-
y1));
NSLog(@"%.2f,(%.2f,%.2f)",degrees(atan2(dy,dx)),dx,dy);
t=1
ラジアンを度に変換してい
るマクロ関数
0° t=0
2013年 3月 31日 日曜日
- 100. • DEMO
• BezierSegmentIncline
2013年 3月 31日 日曜日
- 101. パスの変形
アフィン変換
2013年 3月 31日 日曜日
- 103. グリフのパス取得はソースを見てね
パスの変形
CGAffineTransform affine =
CGAffineTransformMakeTranslation(x,y);
affine =
CGAffineTransformRotate(affine,
atan2(dy,dx));
[glyphBezierPath
applyTransform:affine];
2013年 3月 31日 日曜日
- 104. • DEMO
• BezierSegmentInclineString
2013年 3月 31日 日曜日
- 105. ヒットテスト
セグメント上で
2013年 3月 31日 日曜日
- 106. • 任意の点から一番近いポイントを求める。
• 計算でできるみたいなんだけど、よくわからなかった
ので、t=0からt=1までのセグメント上の点の位置を計
算して、セグメント上の距離を比較してみました。
2013年 3月 31日 日曜日
- 108. • DEMO
• BezierSegmentNearPoint
2013年 3月 31日 日曜日
- 110. • パスの分割
• 2の位置で分割する(0 ≦ t1 ≦ 1, 0 ≦ t2 ≦ 1, t1 < t2)
2
1
2013年 3月 31日 日曜日
- 111. • パスの分割
double t1p = 1-t1;
double t2p = 1-t2;
double newx1 = t1p*t1p*t1p*x1 + 3*t1*t1p*t1p*cp1x + 3*t1*t1*t1p*cp2x + t1*t1*t1*x2;
double newy1 = t1p*t1p*t1p*y1 + 3*t1*t1p*t1p*cp1y + 3*t1*t1*t1p*cp2y + t1*t1*t1*y2;
double newcp1x = t1p*t1p*(t2p*x1+t2*cp1x) + 2*t1p*t1*(t2p*cp1x+t2*cp2x) + t1*t1*(t2p*cp2x+t2*x2);
double newcp1y = t1p*t1p*(t2p*y1+t2*cp1y) + 2*t1p*t1*(t2p*cp1y+t2*cp2y) + t1*t1*(t2p*cp2y+t2*y2);
double newcp2x = t2p*t2p*(t1p*x1+t1*cp1x) + 2*t2p*t2*(t1p*cp1x+t1*cp2x) + t2*t2*(t1p*cp2x+t1*x2);
double newcp2y = t2p*t2p*(t1p*y1+t1*cp1y) + 2*t2p*t2*(t1p*cp1y+t1*cp2y) + t2*t2*(t1p*cp2y+t1*y2);
double newx2 = t2p*t2p*t2p*x1 + 3*t2*t2p*t2p*cp1x + 3*t2*t2*t2p*cp2x + t2*t2*t2*x2;
double newy2 = t2p*t2p*t2p*y1 + 3*t2*t2p*t2p*cp1y + 3*t2*t2*t2p*cp2y + t2*t2*t2*y2;
t2
newcp2
newcp1
t1
2
1
2013年 3月 31日 日曜日
- 112. • DEMO
• BezierSplit
2013年 3月 31日 日曜日