web-dev-qa-db-ja.com

Androidのベクターグラフィック

私は他の誰かの画像のデータベースを表示するアプリケーションに取り組んでいます。これらの画像はすべてベクターグラフィックスであり、任意の形式に変換できますが、ユーザーがおそらくズームインしたいので、ベクター形式で保存することをお勧めします。

問題は、Androidでベクターグラフィックを表示する組み込みの方法があるかどうかです。フォーマットは関係ありません-変換できます。現在検討しているフォーマットはPDFですが、ネイティブのPDFサポートがないため、それを機能させるためにかなり複雑なことを行う必要があります（たとえば、統合 poppler NDKを介してアプリに追加）代わりに、ベクターグラフィックを単純な形式（JPG、GIF）に変換するだけですが、それは避けたいです。

androidvector-graphics
33
Dan Lew

チェックアウト svg-Android -これは比較的新しいライブラリであり、SVG Basicのみをサポートしていますが、Androidifyの描画に使用されるライブラリです。 SVGからDrawableを取得する方法の例がホームページにあります。これは、あなたが探しているものになるように設定されています。

21
Matt Hall

ベクタードローアブルの作成

私はこの質問が古いことを知っていますが、これと同じ要件に遭遇し、Android 5.0がベクタードローアブルをサポートするようになりました。<vector>タグとパスデータでベクタードローアブルを作成し、API-21の魅力のように機能します。ハートの形のベクトル画像を生成する例を次に示します。

<!-- res/drawable/heart.xml -->
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:height="256dp"
    Android:width="256dp"
    Android:viewportWidth="32"
    Android:viewportHeight="32">

    <!-- draw a path -->
    <path Android:fillColor="#8fff"
        Android:pathData="M20.5,9.5
                    c-1.955,0,-3.83,1.268,-4.5,3
                    c-0.67,-1.732,-2.547,-3,-4.5,-3
                    C8.957,9.5,7,11.432,7,14
                    c0,3.53,3.793,6.257,9,11.5
                    c5.207,-5.242,9,-7.97,9,-11.5
                    C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

これまでに直面した唯一の問題は、サポートライブラリに含まれていないため、下位のAPIでそれらを使用できないことです。素晴らしいことは、ベクトルドローアブルをアニメーション化できることです。例を示します。

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:height="64dp"
    Android:width="64dp"
    Android:viewportHeight="600"
    Android:viewportWidth="600">
    <group
        Android:name="rotationGroup"
        Android:pivotX="300.0"
        Android:pivotY="300.0"
        Android:rotation="45.0" >
        <path
            Android:name="v"
            Android:fillColor="#000000"
            Android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

ベクタードローアブルアニメーションの詳細 こちら 。

7
Subin Sebastian

TinyLive SVG は、Android用のSVGビューアを提供します。まだ試したことがないので、良いかどうかはわかりません。

このバグリクエストを読む ブラウザでSVGmightが有効になっているようです-おそらくWebView -ジンジャーブレッド。しかし、これは将来のリリースで可能な機能であるため、おそらく今はあまり役に立ちません。

4
Dave Webb

BetterVectorDrawable libを SVG to VectorDrawable Converter と一緒に見てください。

BetterVectorDrawableは、Android 4.0+のVectorDrawable実装であり、Android 5.0+。

SVGからVectorDrawableへのコンバーターは、SVG画像からAndroid VectorDrawable XMLリソースファイルへのバッチコンバーターです。オンラインバージョンは- ここ 。

リンクは、libとコンバーターの使用方法に関する十分な情報を提供するreadmeを指しています。

3
A-student

この質問は古いです。しかし、私の答えがここの将来の訪問者に役立つことを望んでいます.

VectorDrawableファイルをドローアブルフォルダーに配置します。 AnimatedVectorDrawableもドローアブルです。したがって、これらのファイルもドローアブルフォルダーに配置します。以下は2つの例です。

vd_omega.xml

    <vector 

        xmlns:Android="http://schemas.Android.com/apk/res/Android"
                Android:width="1536dp"
                Android:height="864dp"
                Android:viewportWidth="1536.0"
                Android:viewportHeight="864.0">

            <path
                Android:name="my_vector"
                Android:pathData="M  162   8
                q    -07    00   -41    26
                q    -34    27   -50    64
                q    -25    59   -19   117
                q     07    70    53   121
                q     57    63   151    62
                q     87   -01   140   -66
                q     46   -55    48  -142
                q     01   -56   -34  -105
                q    -38   -52   -77   -70
                l    -29   -11
                q     16   -01    31   -02
                q     59   -01   119   -02 "

                Android:strokeLineCap="round"
                Android:strokeColor="#f00f"
                Android:fillColor="#00000000"
                Android:strokeWidth="32"
                Android:trimPathEnd="0"/>



        </vector>

avd_omega_animator.xml

<animated-vector
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:aapt="http://schemas.Android.com/aapt"
Android:drawable="@drawable/vd_number8">

    <target
        Android:name="my_vector"
        Android:animation="@animator/trimpath_animator"/>       



</animated-vector>

その後、次のようなアニメータファイルを使用してアニメートできます。

trimpath_animator.xml

<set xmlns:Android="http://schemas.Android.com/apk/res/Android">

<objectAnimator
Android:propertyName="trimPathEnd"
Android:duration="1000"
Android:valueFrom="0"
Android:valueTo="1"
Android:repeatCount="0"
Android:repeatMode="reverse"/>
</set>

さまざまなプロパティの同じファイルにより多くのアニメータを含めることができます。

レイアウトファイル内

activity_main.xml

<RelativeLayout
    xmlna:Android="http://schemasandroid.com/apk/res/Android"
    xmlna:app="http://schemasandroid.com/apk/res-auto"
    xmls:tools="http:schemas.Android.com/tools"
    Android:id="@+some_id"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <ImageView
    Android:id="@+id/my_image"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:src="@drawable/avd_omega_animator"/>

</RelativeLayout>

アクティビティで、onCreateに次のコードを記述します。

インポート...インポート...

public class MyActivity extends Activity{

ImageView myImage;


...
...
setContentView(R.layout.activity_main);
myImage = (ImageView)findViewById(R.id.my_image);
Drawable d = myImage.getDrawable():
if(d instance of Animatable){
d.start;
}

楽しみを見てください。

上記でgetDrawableを使用したのと同じように、他のメソッドを使用して、setImageDrawable（ "d"）などのようにImageViewにドローアブルを配置することもできます。

Alex Lockwood氏の「アイコンアニメーションテクニックの紹介」も参照できます。

https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

良い例です。

参考になったと思います。

上記のすべてのサンプルコードは機能します。シンプルでストレートです。

0
Vempati Satya Suryanarayana

恥知らずなセルフプラグインですが、多分あなたは興味があるでしょう ribbon-vg ？これは基本的な、純粋なJavaで高速です。レンダリングプロセスでCPUの負荷を軽減するために最先端の技術に依存しています。

0
Mapsy