0

我正在尝试在 c# 中使用 Win2D 在圆圈内绘制缩放图像，但我没有这样做。

我的尝试是例如：

    CanvasBitmap image;
    bool resourcesLoaded = false;
    public Other() {
        this.InitializeComponent();
    }
    void canvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args) {
        if( resourcesLoaded ) {
            var halfWidth = sender.ActualWidth / 2;
            var halfHeight = sender.ActualHeight / 2;

            double displayScaling = DisplayInformation.GetForCurrentView().LogicalDpi / 96.0;
            double pixelWidth = halfWidth * displayScaling;
            double pixelHeight = halfHeight * displayScaling;

            var scaleEffect = new ScaleEffect() {
                Source = image,
                Scale = new Vector2() {
                    X = ( float ) ( pixelHeight / image.Size.Height ),
                    Y = ( float ) ( pixelHeight / image.Size.Height ),
                }
            };
            var blurEffect = new GaussianBlurEffect() {
                Source = scaleEffect,
                BlurAmount = 5f
            };

            args.DrawingSession.FillCircle( new System.Numerics.Vector2() { X = ( float ) halfWidth, Y = (float) halfHeight },
              (float) halfHeight/2,
              new CanvasImageBrush( sender, blurEffect ) {
                  SourceRectangle = new Rect(0,0, scaleEffect.GetBounds(sender).Width, scaleEffect.GetBounds( sender ).Height)
              } );
        }
    }
    private void canvasControl_CreateResources(CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args) {
        args.TrackAsyncAction( CreateResources( sender ).AsAsyncAction() );
    }
    private async Task CreateResources(CanvasControl sender) {
        image = await CanvasBitmap.LoadAsync( canvasControl, new Uri( "ms-appx:///Imgs/test.jpg" ) );
        resourcesLoaded = true;
        sender.Invalidate();
    }

发生的情况是图像似乎是在窗口的 X=0 和 Y=0 位置绘制的（画布使用所有窗口），所以我的圆圈在窗口的中间，然后只有一点图像被绘制我希望我的图像被放置在圆的中心。

所以问题是： - 我的规模是否正确完成？为什么要除以 96？我可以从系统中读取这个吗？- 是否可以只模糊图像的边缘？- 我怎样才能在圆圈的中心绘制我的图像？

谢谢

4

1 回答 1

0

我想我设法纠正了我的问题，首先可能的问题的答案是：

  • 我的秤做对了吗？

现在在下一个示例代码中它们是（比例必须同时使用，with 和 height）

  • 为什么要除以 96？我可以从系统中读取这个吗？

96是DPI，所以我们需要获取你系统当前使用的DPI，我们可以调用CanvasControl.Dpi来查找

  • 我怎样才能在圆圈的中心绘制我的图像？

最好显示代码来回答这个问题，但基本上这个想法是在 CanvasCommandList 内做所有事情，然后在窗口上任何需要的地方绘制 CanvasCommandList：

    CanvasCommandList cl;
    CanvasBitmap image;
    bool resourcesLoaded = false;
    private void canvasControl_CreateResources(CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args) {
        args.TrackAsyncAction( CreateResources( sender ).AsAsyncAction() );
    }
    private async Task CreateResources(CanvasControl sender) {
        image = await CanvasBitmap.LoadAsync( canvasControl, new Uri( "ms-appx:///Imgs/test.jpg" ) );
        int ratio = 6;
        var newImgWidth = image.Size.Width / ratio;
        var newImgHeight = image.Size.Height / ratio;

        double displayScaling = DisplayInformation.GetForCurrentView().LogicalDpi / sender.Dpi;
        double pixelWidth = newImgWidth * displayScaling;
        double pixelHeight = newImgHeight * displayScaling;

        cl = new CanvasCommandList( sender );
        using( CanvasDrawingSession clds = cl.CreateDrawingSession() ) {
            var scaleEffect = new ScaleEffect() {
                Source = image,
                Scale = new Vector2() {
                    X = ( float ) ( pixelWidth / image.Size.Width ),
                    Y = ( float ) ( pixelHeight / image.Size.Height ),
                }
            };
            var blurEffect = new GaussianBlurEffect() {
                Source = scaleEffect,
                BlurAmount = 5f
            };

            //don't now why but we need to do this in order to have the correct bounds size
            clds.DrawImage( blurEffect, 0, 0, new Rect( 0, 0, newImgWidth, newImgHeight ), 0.05f );
            //now draw the circle
            clds.FillCircle( ( float ) newImgWidth / 2, ( float ) newImgHeight / 2,
              ( float ) ( newImgWidth > newImgHeight ? newImgHeight : newImgWidth ) / 2,
              new CanvasImageBrush( sender, scaleEffect ) {
                  SourceRectangle = new Rect( 0, 0, newImgWidth, newImgHeight )
              } );
        }
        resourcesLoaded = true;
    }

    void canvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args) {
        if( resourcesLoaded ) {
            //cell (0,0)
            args.DrawingSession.DrawImage( cl,
                0,
                0 );
            args.DrawingSession.DrawRectangle( new Rect(
                0, 0,
                cl.GetBounds( sender ).Width, cl.GetBounds( sender ).Height ), Windows.UI.Colors.Red, 3 );
            //cell (0,1)
            args.DrawingSession.DrawImage( cl,
                ( float ) ( sender.ActualWidth - cl.GetBounds( sender ).Width ),
                ( float ) ( 0 ) );
            args.DrawingSession.DrawRectangle( new Rect(
                ( sender.ActualWidth - cl.GetBounds( sender ).Width ), 0,
                cl.GetBounds( sender ).Width, cl.GetBounds( sender ).Height ), Windows.UI.Colors.Green, 3 );
            //cell (1,0)
            args.DrawingSession.DrawImage( cl, ( float ) ( 0 ),
                ( float ) ( sender.ActualHeight - cl.GetBounds( sender ).Height ) );
            args.DrawingSession.DrawRectangle( new Rect(
                ( 0 ),
                ( sender.ActualHeight - cl.GetBounds( sender ).Height ),
                cl.GetBounds( sender ).Width, cl.GetBounds( sender ).Height ), Windows.UI.Colors.Yellow, 3 );
            //cell (1,1)
            args.DrawingSession.DrawImage( cl,
                ( float ) ( sender.ActualWidth - cl.GetBounds( sender ).Width ),
                ( float ) ( sender.ActualHeight - cl.GetBounds( sender ).Height ) );
            args.DrawingSession.DrawRectangle( new Rect(
                ( sender.ActualWidth - cl.GetBounds( sender ).Width ),
                ( sender.ActualHeight - cl.GetBounds( sender ).Height ),
                cl.GetBounds( sender ).Width, cl.GetBounds( sender ).Height ), Windows.UI.Colors.Orange, 3 );
        }
    }

这会按照预期和期望在窗口的每个角落正确绘制 4 个圆形图像，我认为这可能是一个错误的唯一问题是，如果您只在 CanvasCommandList 中绘制圆形，则它的边界是预期的一半，为此我需要绘制所有褪色的图像，以确保边界正确如预期......也许有更好的解决方案，但这是我找到的最好的解决方案。

于 2018-03-03T16:32:02.883 回答