2

我有一个 Xamarin.Forms 应用程序,我需要在其中拖动不规则形状的控件 (TwinTechForms SvgImageView ),如下所示:

在此处输入图像描述

我希望它只响应黑色区域的触摸,而不是透明(方格)区域

我尝试使用MR.Gestures包。连接到 Panning 事件可以让我拖动图像,但当我触摸它的透明部分时它也会开始拖动。

我的设置如下所示:

<mr:ContentView x:Name="mrContentView" Panning="PanningEventHandler" Panned="PannedEventHandler" Background="transparent">
  <ttf:SvgImageView x:Name="svgView" Background="transparent" SvgPath=.../>
</mr:ContentView>

和代码隐藏

private void PanningEventHandler(object sender, PanningEventParameters arg){  
     svgView.TranslateX = arg.IsCancelled ? 0: arg.TotalDistance.X;
     svgView.TranslateY = arg.IsCancelled ? 0: arg.TotalDistance.Y; 
}

private void PannedEventHandler(object sender, PanningEventParameters arg){  
  if (!arg.IsCancelled){
     mrContentView.TranslateX = svgView.TranslateX;
     mrContentView.TranslateY = svgView.TranslateY; 
  }
  svgView.TranslateX = 0;
  svgView.TranslateY = 0;
}

在这个代码隐藏中,我应该如何检查我是否击中了目标对象上的透明点,以及当发生这种情况时如何取消手势,以便该手势下的另一个视图可以响应它?在右侧图像中,触摸绿色 O 孔内的红色应该开始拖动红色 O

更新:已解决

接受的答案的建议有效,但并不简单。

我不得不分叉和修改 NGraphics ( github fork ) 和 TwinTechsFormsLib ( TTFL, github fork )

在 NGraphics 分支中,我向 SvgReader 添加了一个 XDocument+filter ctor,因此可以将相同的 XDocument 传递到具有不同解析过滤器的不同 SvgImageView 实例中,从而有效地将原始 SVG 拆分为多个 SvgImageView 对象,这些对象可以独立移动而无需太多内存命中。我必须为我的 SVG 修复一些笔刷继承,才能按预期显示。

TTFL fork 公开了 XDocument+filter ctor 并将特定于平台的 GetPixelColor 添加到渲染器。

然后在我的 Xamarin.Forms 页面中,我可以将原始 SVG 文件加载到多个 SvgImageView 实例中:

List<SvgImageView> LoadSvgImages(string resourceName, int widthRequest = 500, int heightRequest = 500)
{
    var svgImageViews = new List<SvgImageView>();

    var assembly = this.GetType().GetTypeInfo().Assembly;
    Stream stream = assembly.GetManifestResourceStream(resourceName);
    XDocument xdoc = XDocument.Load(stream);

    // only groups that don't have other groups
    List<XElement> leafGroups = xdoc.Descendants()
        .Where(x => x.Name.LocalName == "g" && x.HasElements && !x.Elements().Any(dx => dx.Name.LocalName == "g"))
        .ToList();

    leafGroups.Insert(0, new XElement("nonGroups")); // this one will 
    foreach (XElement leafGroup in leafGroups)
    { 
        var svgImage = new SvgImageView
        {
            HeightRequest = widthRequest,
            WidthRequest = heightRequest,
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.End,
            StyleId = leafGroup.Attribute("id")?.Value, // for debugging
        };

        // this loads the original SVG as if only there's only one leaf group
        // and its parent groups (to preserve transformations, brushes, opacity etc)
        svgImage.LoadSvgFromXDocument(xdoc, (xe) =>
        {
            bool doRender = xe == leafGroup ||
                            xe.Ancestors().Contains(leafGroup) ||
                            xe.Descendants().Contains(leafGroup); 
            return doRender;
        });

        svgImageViews.Add(svgImage);
    }

    return svgImageViews;
}

然后,我将所有 svgImageViews 添加到 MR.Gesture<mr:Grid x:Name="movableHost">并将 Panning 和 Panned 事件连接到它。

SvgImageView dragSvgView = null; 点 originalPosition = Point.Zero;movableView.Panning += (sender, pcp) => { // 如果我们没有拖动任何东西 - 检查之前加载的 SVG 图像 // 如果它们在触摸点有不透明的像素 if (dragSvgView==null) { dragSvgView = svgImages.FirstOrDefault(si => { var c = si.GetPixelColor(pcp.Touches[0].X - si.TranslationX, pcp.Touches[0].Y - si.TranslationY); 返回 cA > 0.0001; });

    if (dragSvgView != null)
    {
      // save the original position of this item so we can put it back in case dragging was canceled
      originalPosition = new Point (dragSvgView.TranslationX, dragSvgView.TranslationY);  
    }
  }
  // if we're dragging something - move it along
  if (dragSvgView != null)
  {
    dragSvgView.TranslationX += pcp.DeltaDistance.X;
    dragSvgView.TranslationY += pcp.DeltaDistance.Y;
  }

}

4

1 回答 1

2

MR.Gestures 和任何底层平台都不会检查视图中的触摸区域是否透明。监听触摸手势的元素总是矩形的。所以你必须自己做命中测试。

PanningEventParameters包含Point[] Touches所有触摸手指的坐标。使用这些坐标,您可以检查它们是否匹配 SVG 中的任何可见区域。

从您的样本中对甜甜圈进行命中测试很容易,但对一般形状进行测试并不容易(我认为这就是您想要的)。如果你很幸运,那么 SvgImage 已经支持它了。如果不是,那么您可能会在SVG 渲染引擎Point-In-Polygon Algorithm — Determining If A Point Is Inside A Complex Polygon2D 碰撞检测中找到如何做到这一点的原理。

不幸的是,重叠元素有点问题。当我最初编写 MR.Gestures 时,我尝试使用标志来实现它Handled,但我无法让它在所有平台上工作。因为我认为保持一致比让它只在一个平台上工作更重要,所以我忽略Handled了所有平台,而是为所有重叠元素引发事件。(我应该完全删除标志)

在您的特定情况下,我建议您对多个 SVG 使用这样的结构:

<mr:ContentView x:Name="mrContentView" Panning="PanningEventHandler" Panned="PannedEventHandler" Background="transparent">
  <ttf:SvgImageView x:Name="svgView1" Background="transparent" SvgPath=.../>
  <ttf:SvgImageView x:Name="svgView2" Background="transparent" SvgPath=.../>
  <ttf:SvgImageView x:Name="svgView3" Background="transparent" SvgPath=.../>
</mr:ContentView>

在其中,PanningEventHandler您可以检查是否Touches在任何 SVG 上,如果是,则哪个在顶部。

如果你做多个ContentViews 每个只有一个 SVG,那么PanningEventHandler每个重叠的矩形元素都会被调用,这不是你想要的。

于 2017-01-26T13:46:48.943 回答