C#開發PACS醫學影像處理系統(十九)：Dicom影像放大鏡

時間 2021-01-12

標籤 html 算法 canvas 微信架構併發 app 機器學習 ide 高併發欄目 C# 简体版

原文原文鏈接

在XAML代碼設計器中，添加canvas畫布與圓形幾何對象，利用VisualBrush筆刷來複制畫面內容到指定容器：html

<Canvas x:Name="CvsGlass" Width="106" Height="106"  HorizontalAlignment="Left" VerticalAlignment="Top"  MouseWheel="CvsGlass_MouseWheel" MouseDown="CvsGlass_MouseDown" MouseUp="CvsGlass_MouseUp" MouseMove="CvsGlass_MouseMove" MouseLeave="CvsGlass_MouseLeave">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                </TransformGroup>
            </Canvas.RenderTransform>
            <Canvas Name="magnifierCanvas">
                <Ellipse Width="106" Height="106" >
                    <Ellipse.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFD9D2D2" Offset="1"/>
                            <GradientStop Color="White"/>
                            <GradientStop Color="#FFDFDFDF" Offset="0.244"/>
                            <GradientStop Color="#FF777777" Offset="0.592"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Width="100" Height="100" Canvas.Left="3" Canvas.Top="3" Fill="Black"/>
                <Ellipse Width="100" Height="100" Name="magnifierEllipse" Canvas.Left="3" Canvas.Top="3">
                    <Ellipse.Fill>
                        <VisualBrush ViewboxUnits="Absolute" Viewbox="0,0,100,100" ViewportUnits="RelativeToBoundingBox" Viewport="0,0,1,1"/>
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock x:Name="TxtGlassScale" Foreground="Yellow" Visibility="Hidden" FontSize="14" Margin="110,40,0,55" FontFamily="Microsoft YaHei">
                    <TextBlock.Effect>
                        <DropShadowEffect/>
                    </TextBlock.Effect>
                </TextBlock>
            </Canvas>
        </Canvas>

獲得一個相似放大鏡的界面效果：算法

其中，TxtGlassScale是顯示放大鏡倍數的文字控件；canvas

VisualBrush是內容筆刷，看效果：微信

其中須要注意的是，放大鏡應該是和Box平級，屬於Cell的子控件，這樣在圖像平鋪模式下則能兼容全部圖像範圍：架構

看效果：併發

參考代碼：app

　　　　#region -----放大鏡-----/// <summary>
        /// 當前大小與vs設計器中的大小的比例 
        /// </summary>
        public double ActualScaleVal = 0;

        /// <summary>
        /// 放大比例
        /// </summary>
        double glassScale = 2.0;

        /// <summary>
        /// 放大鏡視圖範圍寬度
        /// </summary>
        double glassWidth = 0;

        /// <summary>
        /// 放大鏡視圖範圍高度
        /// </summary>
        double glassHeight = 0;

        /// <summary>
        /// 顯示放大鏡
        /// </summary>
        public void UseGlass()
        {
            if (CvsGlass.IsShow())
            {
                CvsGlass.Hide();
                return;
            }

            if (glassWidth == 0 || glassHeight == 0)
            {
                //計算放大鏡比例 100是放大鏡的viewbox的大小
                glassWidth = 100 / glassScale;
                glassHeight = 100 / glassScale;

            }
            TxtGlassScale.Foreground = shapeManager.shapeMeasureColor;
            TxtGlassScale.FontSize = shapeManager.shapeMeasureFontSize;
            SetGlassViewBox(ActualWidth, ActualHeight, new Point(), true);
            CvsGlass.Show();
        }


        /// <summary>
        /// 關閉放大鏡
        /// </summary>
        public void CloseGlass()
        {
            CvsGlass.Hide();
        }


        //滾輪控制放比例
        private void CvsGlass_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            if (e.Delta > 0)
            {
                glassScale -= 0.05;
            }
            else
            {
                glassScale += 0.05;
            }

            glassScale = glassScale < 0.1 ? 0.1 : glassScale;
            glassScale = glassScale > 5 ? 5 : glassScale;

            glassWidth = 100 / glassScale;
            glassHeight = 100 / glassScale;

            Point pos = e.MouseDevice.GetPosition(GridMain);
            SetGlassViewBox(pos.X, pos.Y, new Point(), false, false);
            TxtGlassScale.Text = ((glassScale * ActualScaleVal * 2) * 100).ToString("f1") + "%";
            TxtGlassScale.Show();

        }

        //是否按下放大鏡鼠標
        bool isGlassDown = false;

        //記錄按下鼠標的位置
        Point glassPoint = new Point(0, 0);

        //按下放大鏡
        private void CvsGlass_MouseDown(object sender, MouseButtonEventArgs e)
        {
            glassPoint.X = e.GetPosition(CvsGlass).X;
            glassPoint.Y = e.GetPosition(CvsGlass).Y;
            isGlassDown = true;
        }


        //移動放大鏡
        private void CvsGlass_MouseMove(object sender, MouseEventArgs e)
        {
            if (isGlassDown)
            {
                //相對於 GridLine 獲取鼠標的座標
                Point svMainPos = e.MouseDevice.GetPosition(ScrollCell);

                Point glassPos = e.MouseDevice.GetPosition(CvsGlass);

                SetGlassViewBox(glassPos.X, glassPos.Y, svMainPos, false);

                Mouse.Capture(CvsGlass);
            }
        }


        /// <summary>
        /// 設置放大內容
        /// </summary>
        /// <param name="vbX">寬度參數</param>
        /// <param name="vbY">高度參數</param>
        /// <param name="svMainPos">相對於GridLine的座標</param>
        /// <param name="isInit">是不是初始化</param>
        /// <param name="reLocation">是否從新定位座標</param>
        private void SetGlassViewBox(double vbX, double vbY, Point svMainPos, bool isInit = false, bool reLocation = true)
        {
            Rect viewBox = GlassVB.Viewbox;
            double xoffset = viewBox.Width / 2.0;
            double yoffset = viewBox.Height / 2.0;
            if (isInit)
            {
                viewBox.X = (vbX - xoffset) / 2;
                viewBox.Y = (vbY - yoffset) / 2;
                CvsGlass.Margin = new Thickness((vbX - 106) / 2, (vbY - 106) / 2, (vbX - 106) / 2, (vbY - 106) / 2);
            }
            else
            {
                if (reLocation)
                {
                    viewBox.X = svMainPos.X - xoffset - (vbX - 106 / 2);
                    viewBox.Y = svMainPos.Y - yoffset - (vbY - 106 / 2);

                    CvsGlass.Margin = new Thickness(
                         CvsGlass.Margin.Left + vbX - glassPoint.X,
                         CvsGlass.Margin.Top + vbY - glassPoint.Y,
                         CvsGlass.Margin.Right - vbX + glassPoint.X,
                         CvsGlass.Margin.Bottom - vbY + glassPoint.Y);
                }
            }
            viewBox.Width = glassWidth;
            viewBox.Height = glassHeight;
            GlassVB.Viewbox = viewBox;
            TxtGlassScale.Hide();
        }


        private void CvsGlass_MouseLeave(object sender, MouseEventArgs e)
        {
            isGlassDown = false;
        }


        private void CvsGlass_MouseUp(object sender, MouseButtonEventArgs e)
        {
            isGlassDown = false;
            Mouse.Capture(null);
        }


        /// <summary>
        /// 從新設置放大鏡大小和位置
        /// </summary>
        public void ReSetGlass()
        {
            if (BoxList.Count == 0)
            {
                return;
            }

            //*2是由於放大鏡在vs設計器中顯小 放大兩倍
            BoxList[0].SetScaleTrans(CvsGlass, ActualScaleVal * 2, ActualScaleVal * 2, false);
            if (CvsGlass.Margin.Left >= ActualWidth || CvsGlass.Margin.Top >= ActualHeight)
            {
                CvsGlass.Margin = new Thickness((ActualWidth - 106) / 2, (ActualHeight - 106) / 2, (ActualWidth - 106) / 2, (ActualHeight - 106) / 2);
            }
        }

        #endregion