1

.svg から取得したキャンバスに画像を描画する必要があります。現在、次のコードを使用しています。

active_toolbutton = query("#${event.target.id}").clone(false);
active_toolbutton.width = 100;
active_toolbutton.height = 100;
context.drawImageScaled(active_toolbutton, placeX, placeY,
  active_toolbutton.width, active_toolbutton.height);

これは Chrome では機能しますが、Firefox では機能しません。より良い方法はありますか?

4

1 に答える 1

0

いくつかの調査の後、私は答えを見つけました。スカラー機能を使用して .svg 画像を再スケーリングする必要があることを定義する標準的な動作はありません。実際、ブラウザによってスケーリングの処理が異なるケース (CSS の背景など) があります。

SVG をキャンバスにレンダリングするサードパーティの JavaScript ライブラリを使用するソリューションを見つけました。dart javascript interopt librar でcanvgを使用しました。

コード： 

import 'package:js/js.dart' as js;
...
    active_toolbutton = new CanvasElement();
    active_toolbutton.width = 100;
    active_toolbutton.height = 100;
    var options = js.map({ 'ignoreMouse:': true,
      'ignoreAnimation': true,
      'ignoreDimensions': true,
      'scaleWidth': 100,
      'scaleHeight': 100});
    js.context.canvg(active_toolbutton, event.target.src, options);
于 2013-04-22T09:58:59.183 に答える