如何在 Xamarin ColorPicker 栏前显示触摸点

How to show touch point in front of bar Xamarin ColorPicker

我正在尝试制作颜色选择器栏并进行自定义我遇到了这个问题(我正在学习 Xamarin)。问题是我看不到如何在栏前制作触摸指针。 任何的想法?怎么做?

原始回购 https://github.com/UdaraAlwis/XFColorPickerControl

Color picker

// Painting the Touch point
using (SKPaint paintTouchPoint = new SKPaint())
{
paintTouchPoint.Style = SKPaintStyle.Fill;
paintTouchPoint.Color = SKColors.Black;
paintTouchPoint.IsAntialias = true;

var valueToCalcAgainst = (skCanvasWidth > skCanvasHeight) ? skCanvasWidth : skCanvasHeight;

var pointerCircleDiameterUnits = PointerCircleDiameterUnits+0.05; // 0.6 (Default)
pointerCircleDiameterUnits = (float)pointerCircleDiameterUnits / 10f; //  calculate 1/10th of that value
var pointerCircleDiameter = (float)(valueToCalcAgainst * pointerCircleDiameterUnits);

// Outer circle of the Pointer (Ring)
skCanvas.DrawCircle(
    _lastTouchPoint.X,
    _lastTouchPoint.Y,
    pointerCircleDiameter / 2, paintTouchPoint);

paintTouchPoint.Style = SKPaintStyle.Fill;
paintTouchPoint.Color = SKColors.White;
paintTouchPoint.IsAntialias = true;

valueToCalcAgainst = (skCanvasWidth > skCanvasHeight) ? skCanvasWidth : skCanvasHeight;

pointerCircleDiameterUnits = PointerCircleDiameterUnits; // 0.6 (Default)
pointerCircleDiameterUnits = (float)pointerCircleDiameterUnits / 10f; //  calculate 1/10th of that value
pointerCircleDiameter = (float)(valueToCalcAgainst * pointerCircleDiameterUnits);

// Outer circle of the Pointer (Ring)
skCanvas.DrawCircle(
    _lastTouchPoint.X,
    _lastTouchPoint.Y,
    pointerCircleDiameter / 2, paintTouchPoint);

// Draw another circle with picked color
paintTouchPoint.Color = touchPointColor;

var pointerCircleBorderWidthUnits = PointerCircleBorderUnits; // 0.3 (Default)
var pointerCircleBorderWidth = (float)pointerCircleDiameter *
                                        (float)pointerCircleBorderWidthUnits; // Calculate against Pointer Circle
                
// Inner circle of the Pointer (Ring)
skCanvas.DrawCircle(
    _lastTouchPoint.X,
    _lastTouchPoint.Y,
    ((pointerCircleDiameter - pointerCircleBorderWidth) / 2), paintTouchPoint);
}

我检查了你的 post 的库部分,xaml 展示了如何使用控件来显示颜色选择器,如:

   <Frame
                x:Name="ColorPickerHolderFrame"
                CornerRadius="8"
                HeightRequest="200"
                HorizontalOptions="Center"
                WidthRequest="350">
                <controls:ColorPicker
                    x:Name="ColorPicker"
                    ColorListDirection="Horizontal"
                    GradientColorStyle="DarkToColorsToLightStyle"
                    PickedColorChanged="ColorPicker_PickedColorChanged"
                    PointerCircleBorderUnits="0.3"
                    PointerCircleDiameterUnits="0.7">
                    <controls:ColorPicker.ColorList>
                        <x:Array Type="{x:Type x:String}">
                            <!--  Red  -->
                            <x:String>#ff0000</x:String>
                            <!--  Yellow  -->
                            <x:String>#ffff00</x:String>
                            <!--  Green (Lime)  -->
                            <x:String>#00ff00</x:String>
                            <!--  Aqua  -->
                            <x:String>#00ffff</x:String>
                            <!--  Blue  -->
                            <x:String>#0000ff</x:String>
                            <!--  Fuchsia  -->
                            <x:String>#ff00ff</x:String>
                            <!--  Red  -->
                            <x:String>#ff0000</x:String>
                        </x:Array>
                    </controls:ColorPicker.ColorList>
                </controls:ColorPicker>
            </Frame>