在Flutter中绘制并与SVG交互 [英] Draw and interact with SVG in Flutter

问题描述

我们正在开发基于SVG输入的显示人体的应用程序.这种人体分为几个区域，例如头部，左臂，右臂，腹部等.

We are developing an application which displays a human body, based on a SVG input. This human body is divided in several regions, think of a head, left-arm, right-arm, belly etc.

例如，当用户单击一只手臂时，我们想突出显示图像的某个区域.在Flutter中实现这种目标的最佳方法是什么?

We want to highlight a region of the image when the user clicks on for example one arm. What is the best way to achieve such a thing in Flutter?

我们尝试将Flare用于Flutter，但此库没有提供与所显示人体的直接交互.

We tried to use Flare for Flutter, but this librart does not provide direct interaction with the human body being displayed.

有没有更简单的方法:

• 基于SVG渲染身体(艺术品可能会在未来的发展中发生变化)；
• 检测点击，例如GestureDetector;
• 根据点击的坐标查找受压区域；

• Render the body based on a SVG (artwork might change in future developnent);
• Detect click, e.g. GestureDetector;
• Find pressed region based on the coordinates of the click;

请注意，由于图像的某些部分重叠，因此简单框将不起作用.您可以看到我们想要达到的效果，我在这里单击了一只手.在其周围绘制一些可单击的框将无法正常工作.

Note that simple boxes will not work since parts of the image overlap. You can see the effect we want to achieve, I clicked on one arm here. Drawing some clickable box around it, will not work well.

谢谢.

推荐答案

我通过使用built_path库使之起作用，该库将SVG路径预编译为Path对象.然后，将其包装到ClipPath小部件中，如下所示:

I made it working by using the built_path library, which precompiles SVG paths into Path objects. We then wrapped it into a ClipPath Widget as follows:

return GestureDetector(
    onTap: () => _bodyPartTapped(part),
    child: ClipPath(
        child: Stack(children: <Widget>[
          Container(
              color: pressedBodyPart == part
                  ? Colors.blue
                  : Colors.transparent),
          CustomPaint(painter: PathPainter(path))
        ]),
        clipper: PathClipper(path)));

如果按下该按钮，它将使身体的一部分变成蓝色，效果很好.

It will color a body part blue if it's pressed, which is working perfectly fine.

我创建了一个完整的示例，可以在这里找到: https://github.com/gi097/flutter_clickable_regions

I have created a full example which can be found here: https://github.com/gi097/flutter_clickable_regions

这篇关于在Flutter中绘制并与SVG交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！