我有一个 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;
}
}