質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • Xamarin

    517questions

    Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Xamarin.formsでSVG画像を読み込みたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 522

crew8573

score 3

前提・実現したいこと

Xamarin.Formsでsvg画像を読み込みたいのですが良い方法はないでしょうか?
個人的に調べた結果、PCLでiOS,Android固有のSVG読み込みAPIへのdependencyServiceを定義し、
Forms上で定義したdependecyServiceにより固有のAPIを呼び出すようにすれば良いのではと考えています。

http://ticktack.hatenablog.jp/entry/2016/01/02/212230
そこで上記のページを参考に、NugetでNGraphicsをiosのプロジェクトに追加し、
Resourcesフォルダの中にtiger.scgを格納し、呼び出そうとしたのですがうまくいきません。

参考サイトでは、変数svgTigerの中にsvgのファイル情報を直接入れ込んでいますが、
実装上ファイル名から呼び出したいので私は以下のように定義しています。

string svgTiger = "Tiger.svg"
var reader = new StringReader(svgTiger);
var graphic = Graphic.LoadSvg(reader);

Graphic.LoadSvgのところでエラーが発生してしまっているのですが、
どのように定義すれば参考サイトのようにSVGファイルを呼び出せるでしょうか?

ちなみに、SkiaSharpというものがXamarinの公式APIとして出ているようなのですが、
一般的にはSkiaSharpを利用する人の方が多いのですかね?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

PCL上のResourceファイルの読み込み処理が抜けているかと思います。
またNGraphicsではGraphicを取得するところまではPCL上でできるので
取得したGraphicをDependencyServiceに渡せば良いかと思います。

var src = "プロジェクト名.フォルダ名.Tiger.svg";
//ResourceのStreamを取得
var stream = typeof(PCLの任意のクラス).GetTypeInfo().Assembly.GetManifestResourceStream(src);
using(var sr = new StreamReader(stream)){
    var g = NGraphics.Graphic.LoadSvg(sr);
}

SkiaSharpでもSVGは扱えるようですが、利用者の状況はすみませんが私はわかりません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 00:11

    ご返信ありがとうございます。
    PCL上で動作できることは知りませんでした。
    上記の内容の処理を追加してみようと思います。

    ただ、PCLでSVGが読めるなら、読み込んだSVGをImageSourceに確保し、確保したImageSourceを
    各プラットフォームのカスタムレンダラーに渡せないかと思ったのですが、そのような処理はできませんか?

    キャンセル

  • 2017/09/08 02:47

    ImageSourceはPCL上でファイルパスやURLやリソースのstreamなどを確保するだけで実際にそれを画像に展開するにはNative側で対応するHandlerが必要になりますので、残念ながらNGraphicsを直接ImageSourceにする方法はありません。

    その辺をやってみているものを作ったのですが
    http://kamusoft.hatenablog.jp/entry/2017/08/25/193552
    これはXamarin.Formsのプレリリースからの対応です。

    NGraphicsの場合も実際に描画するところはNativeでの処理が必要になります。
    NGraphicsを利用したNControlというのがあって、これを使う方が手っ取り早いかもしれません。
    http://ticktack.hatenablog.jp/entry/2016/02/02/000243

    あるいはこちらも内部でNGraphicsを利用しているものですが
    http://ytabuchi.hatenablog.com/entry/2017/03/24/170000
    ものすごく丁寧に書かれているのでこれを使っても良いと思います。

    キャンセル

  • 2017/09/08 21:05

    本日試してみたところ、回答していただいたような内容で実装することができました!
    ありがとうございます。

    その他のご紹介いただいた方法についても一通り目を通しておきます。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • Xamarin

    517questions

    Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。