Question

我有以下要求： -有静态图片（例如Tiger图片） -我要完成的是，如果我单击任何特定的图像部分，它应该执行某些功能。例如。如果我单击“头部”部分，应该说“您单击了头部” 如果我单击“尾巴”部分，它应该显示“您单击了尾巴”

请帮助我使用Xamarin表单（适用于Android和iOS）实现此功能

编辑：我已经实现了来自@LeonLu的此引用 https://forums.xamarin.com/discussion/157534/clickable-image-regions-in-xamarin-forms/p1?new=1

我能够获得点击的坐标，但是它们在不同分辨率的设备上并不统一。（即，敲击头部可在一个设备上使用，但不适用于其他分辨率不同的设备）

我的总体要求：

有人体部位的静态图像（头部，鼻子，眼睛，耳朵，肩膀，二头肌，手，脚踝，胸部，胃等），如附件图像所示
我需要选择每个身体部位的功能，并且单击时应突出显示所选部位
单击每个身体部位后，它应执行特定操作（例如，插入每个身体部位的健康状态）
在具有不同分辨率的所有设备上，身体部位的位置应该一致，以便在单击头部时，它应该在所有分辨率的设备上提供正确的响应。

Body Parts Image

Answer 1

您可以使用绝对布局，以透明颜色填充堆栈布局上方的布局图像，并在其上添加点击侦听器。

Answer 2

我建议使用RelativeLayout来实现此功能。我创建了一个简单的演示来实现此功能。主要代码如下：

xaml文件

  <ContentPage.Content>
    <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <Image Source="test2.jpg" 
                Aspect="Fill"
            RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 1}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}"
               >
        </Image>
        <BoxView Color="Transparent" x:Name="topView" 
            RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = .5}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}" />

        <BoxView Color="Transparent" x:Name="bottonView"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.5}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
            RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,  Property=Height, Factor=0.5}" />
    </RelativeLayout>
</ContentPage.Content>

xaml.cs

并使用TapGestureRecognizer在BoxView上实现触摸事件。

 var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.Tapped += (s, e) => {
            // handle the tap
            DisplayAlert("Alert", "You clicked on head", "OK");
        };
        topView.GestureRecognizers.Add(tapGestureRecognizer);

        var tapGestureRecognizer_button = new TapGestureRecognizer();
        tapGestureRecognizer_button.Tapped += (s, e) => {
            // handle the tap
            DisplayAlert("Alert", "You clicked on tail", "OK");
        };
        bottonView.GestureRecognizers.Add(tapGestureRecognizer_button);

效果是这样的：

注意：您可以根据需要调整布局。添加图像的中间拍子。

Xamarin表单中的可点击图像区域

2 个答案: