ユーザ用ツール

サイト用ツール


canvasでベジェ曲線描画とクリッピング

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
canvasでベジェ曲線描画とクリッピング [2015/09/29 17:30]
sou
canvasでベジェ曲線描画とクリッピング [2015/10/05 11:38] (現在)
sou
ライン 1: ライン 1:
 使うシーンがあるか微妙ですが。。\\ 使うシーンがあるか微妙ですが。。\\
  
 +■ベジェ曲線とは\\
 +n個の制御点から得られるn-1次曲線です (wikipediaより)\\
 +
 +こちらに解りやすく図解してました。\\
 +・中学生でもわかるベジェ曲線\\
 +[[http://​blog.sigbus.info/​2011/​10/​bezier.html]]\\
 +
 +
 +
 +ベジェ曲線を簡単に描ける関数がAndroidAPIで用意されています。\\
 +前者が2次ベジェ,​ 後者が3次ベジェです。制御点の数が違います。\\
 +
 +引数 : 制御点1X,​ 制御点1Y,​ 終点1X, 終点2Y\\
 Path # quadTo (float x1, float y1, float x2, float y2)\\ Path # quadTo (float x1, float y1, float x2, float y2)\\
 +
 +引数 : 制御点1X,​ 制御点1Y,​ 制御点2X,​ 制御点2Y,​ 終点1X, 終点2Y\\
 Path # cubicTo (float x1, float y1, float x2, float y2, float x3, float y3)\\ Path # cubicTo (float x1, float y1, float x2, float y2, float x3, float y3)\\
-制御点の数が違います 
  
-cubicToで一角だけ描画\\+※始点はPathの現在地になります。(デフォルト値はx0,​ y0)\\ 
 +\\ 
 + 
 +cubicTo(3次ベジェ)で一角だけ描画してみます\\
     @Override     @Override
     protected void onDraw(Canvas canvas) {     protected void onDraw(Canvas canvas) {
ライン 28: ライン 45:
 {{:​device-2015-09-29-163334.png?​direct&​300|}} {{:​device-2015-09-29-163334.png?​direct&​300|}}
  
-矩形を描画してクリッピング\\+ 
 +矩形を描画してクリッピング\\
     @Override     @Override
     protected void onDraw(Canvas canvas) {     protected void onDraw(Canvas canvas) {
ライン 49: ライン 67:
 Canvas # clipPath()を実行する際はPathで完全に囲われている場所がないとクリッピングに失敗するので注意\\ Canvas # clipPath()を実行する際はPathで完全に囲われている場所がないとクリッピングに失敗するので注意\\
 {{:​device-2015-09-29-164337.png?​direct&​300|}} {{:​device-2015-09-29-164337.png?​direct&​300|}}
 +
 +ちなみに分かりにくいですがクリッピングされた箇所はアンチエイリアスが効いてません。\\
 +drawBitmapの第4引数にPaintを渡してもダメでした。\\
 +
 +アンチエイリアスをオンにする場合はXfermodeとかで色々しないとダメ?\\
 +http://​developer.android.com/​reference/​android/​graphics/​Xfermode.html
 +
canvasでベジェ曲線描画とクリッピング.1443515417.txt.gz · 最終更新: 2015/09/29 17:30 by sou