Skip to content

Setting ZIndex for Custom Visual #2031

@paul7aa

Description

@paul7aa

Hello!
I managed to create my own Custom Visual from an image, however I cannot seem to find a way to place it behind my ScatterSeries collection on the chart view. The ZIndex's on my ScatterSeries are > 0 and increasing the values doesn't have any effect. My question is whether this is even possible, given the way these visual elements are rendered.

This is my custom visual and initialization:

public class CustomCarVisual : Visual
{
    protected override CustomSkiaShape DrawnElement { get; } =
     new CustomSkiaShape { Fill = new SolidColorPaint(SKColors.Red) };

    public float CarLength;
    public float CarWidth;

    public CustomCarVisual(float carLength, float carWidth)
    {
        CarLength = carLength;
        CarWidth = carWidth;
    }

    protected override void Measure(Chart chart)
    {
        var cartesianChart = (ICartesianChartView)chart.View;

        var topLeftInDataScale = new LvcPointD(0 - CarLength / 2, 0 - CarWidth / 2);
        var topLeftInPixels = cartesianChart.ScaleDataToPixels(topLeftInDataScale);

        var bottomRightInDataScale = new LvcPointD(0 + CarLength / 2, 0 + CarWidth / 2);
        var bottomRightInPixels = cartesianChart.ScaleDataToPixels(bottomRightInDataScale);


        float widthInPixels = (float)Math.Abs(bottomRightInPixels.X - topLeftInPixels.X);
        float heightInPixels = (float)Math.Abs(bottomRightInPixels.Y - topLeftInPixels.Y);

        DrawnElement.X = (float)Math.Min(topLeftInPixels.X, bottomRightInPixels.X);
        DrawnElement.Y = (float)Math.Min(topLeftInPixels.Y, bottomRightInPixels.Y);
        DrawnElement.Width = widthInPixels;
        DrawnElement.Height = heightInPixels;
    }
}

public class CustomSkiaShape : BoundedDrawnGeometry, IDrawnElement<SkiaSharpDrawingContext>
{
    private SKImage _image;

    public CustomSkiaShape()
    {
        LoadImage();
    }

    private void LoadImage()
    {
        try
        {
            var uri = new Uri("pack://application:,,,/Icons/CarTopView.png");
            var streamInfo = Application.GetResourceStream(uri);

            if (streamInfo != null)
            {
                using (var stream = streamInfo.Stream)
                {
                    _image = SKImage.FromEncodedData(stream);
                }
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine($"Failed to load image: {ex.Message}");
        }
    }

    public void Draw(SkiaSharpDrawingContext context)
    {
        if (_image == null) return;

        var canvas = context.Canvas;

        var destRect = new SKRect(
            (float)X,
            (float)Y,
            (float)(X + Width),
            (float)(Y + Height)
        );

        canvas.DrawImage(_image, destRect);
    }
}

Initialization:

            VisualElements = new List<IChartElement>() {  _carVisual };
            LVCChart.VisualElements = VisualElements;

            InitializeChart();

Any help is appreciated...
Great library btw!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions