Question

我需要将图像绘制到从.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，有更好的方法吗？

Answer 1

经过一些研究，我找到了答案。没有标准行为定义.svg图像应使用其标量功能重新缩放。事实上，在某些情况下（例如CSS背景），不同的浏览器会以不同的方式处理缩放。

我找到了一个解决方案，即使用第三方javascript库将SVG渲染到画布中。我使用了canvg，使用了dart javascript interopt librar。

代码：

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);

如何从.svg图像中获取调整大小的图像元素？

1 个答案: