アンドロイドでVectorDrawableのpathDataについて学びます

6月 28, 2019 nguyenvanquan7826 ENアンドロイド応答を残し

から翻訳、編集記事: medium.com著者 マザフェア・アリ

あなたは属性でVectorDrawableいくつかの不可解な文字が表示されます任意のXMLファイルを開きます。 pathData.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FF0000"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
</vector>

パスと定期的に働く人々は、それを理解し、あなたはそれが何かを描く知るためにそれを説明することができます. あまりをしない人たちは、それが謎になります.

VectorDrawableは何ですか

VectorDrawable ベクターのXMLで記述. ビットマップなど、他の一般的な画像フォーマットとは異なり、, JPEG, GIFおよびPNG, 彼らはスケールアップまたはスケールダウンされたときに品質の損失をベクトルません. これは、画質やサイズ違いの使用は必要ありませんます, あなたは、ファイルサイズAPKを削減. 実は, VectorDrawablesは、コマンドのパスが含まれています (線や電源の描き方) そして、パスのコマンドのようなキャンバスで作業する場合, 描画とレンダリングVectorDrawablesプロセスは時間がかかり、メモリであり、, だからこそVectorDrawableです, 最高のシンプルなフラットなグラフィックスのために使用さ.

なぜ、このコマンドを理解する必要があります? 私はちょうどSVGから取りました?

あなたはVectorDrawableのエフェクトを作成する場合, 任意の動き、今日のように, 要件の一つは、あなたがVectorDrawable効果が働いているということです？開始と終了は、合理的なコマンドを持っている必要があります. さらに, あなたは、これらのコマンドは、アニメーションにモーション/変更を行う方法を知っているだろう. そしてもちろん、コマンドの意味を理解できますか？あなた自身のVectorDrawableを作成するようPathDataが多くを助けることができます,…

pathDataでコマンドを理解します

私はあなたが学ぶ場合でも、と言ってみましょうどのくらいのパス・コマンド, あなたは天才でない限り、, あなたが理解できるものには限界があります. ベクトルグラフィックスプログラムは本当にありません “クリーンなコード” そして読みやすいですか？人間. SVGベクターグラフィックスなどのファイルは、AndroidのVectorDrawable・スタジオの創設を通過した後, 彼らは、コンパクトで読みやすくなります, 但し, 私はたくさんはまだはるかに複雑に必要なものよりも指示することができることに気付きました. ？そして、, 唯一のあなたはもっと想像力や数学的な能力を持っている必要が円や円弧を理解するには？グッド.

基本的な

基本的なパスコマンドは、1つまたはそれ以上続くアルファベットを含み. 数は、通常、カンマで区切られ、時にはスペースをすることができ. 例:

L200,300のM100,100 L300,100
//若しくは
M 100 100 L 300 100 L 200 300 から
//若しくは
M1100,100L300,100L200,300z

アルファベットは大文字でも小文字でもかまいません. 大文字は絶対的な位置を意味します, 小文字は相対的な位置を意味します.

コマンド

FまたはM (X, アンド) +

へ引っ越す: 位置にカーソルを移動, 絶対大文字, 小文字は比較的です. MoveToコマンドは、座標Xが続いています, アンド. 強い要請Mの座標の複数のセットがあるかもしれません, それらはコマンドとみなされます LINETO 暗黙.

Z又はZ

closepath: パスの開始位置にカーソルの現在位置からの線を引きます. 接続された任意のパラメータなし.

LまたはL (X, アンド) +

LINETO: Xで指定された場所にあなたの現在の場所から直線を描きます, アンド. 大文字は絶対座標を意味します, 小文字は相対座標を意味します. あなたは順序で、座標の複数のセットを持つことができますLINETO. あなたは、座標の複数のセットを指定する場合, それはあなたが複数行を作成できることを意味します (多くの連続した道路).

HまたはH (X) +

水平LINETO: Xによって指定された位置に、現在のカーソル位置からの水平線を引きます. 以上の座標Xの要請を受けた場合, これは、マルチラインと考えられています. Yはそのまま座標. 大文字Hは絶対座標であります, 小文字hは相対座標であります.

VまたはV (アンド) +

垂直LINETO: Yによって指定された位置に、現在のカーソル位置からの垂直線を引きます. 以上の座標Yの要請を受けた場合, これは、マルチラインと考えられています. X座標変わらず. 大文字のVは絶対座標であります, 小文字Vは相対座標であります.

述べた基本的なコマンドと, 私たちは、上記の例では、コマンドを説明しましょう:

L200,300のM100,100 L300,100

M100,100: 絶対座標のXの=にカーソルを移動 100 Y = 100pxに.
L300,100: = Xに直線を描きます 300 Y = 100 (位置が開始 100.100).
L200.300: = Xに直線を描きます 200 Y = 300 (位置が開始 300.100).
から: クローズパス, にあなたの現在の場所から直線を描きます 100.100. あなたが最初のポイントに最後の点から線を引くすなわち、パスを閉じると. あなたはプラスを描画する場合などのためにプレーする必要がない場合は、それを削除することができます (+).

私たちは、XMLファイルの中に置く場合pathDataシンプルVectorDrawable, 我々は結果を見ることができます:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
        android:width="400px"
        android:height="400px"
    <!-- size of the virtual canvas -->
        android:viewportWidth="400.0"
        android:viewportHeight="400.0">
    <path
        android:fillColor="#0000FF"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="4"
        android:pathData="M100,100 L300,100 L200,300 z"/>
</vector>

ここでは基本的にpathDataあなたが理解し、簡単なVectorDrawableを作成することができます. 最後に、元の記事にもいくつかの例 (上のリンクを参照してください) あなたが相談することができます.

あなたは好きかもしれません: