如何在 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>
我正在尝试制作颜色选择器栏并进行自定义我遇到了这个问题(我正在学习 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>