WPF 解决 ViewBox 不显示线的问题

ViewBox 是一个好用的东西,但是在他缩小的时候,可能有一些线无法显示。 现在公司项目就是做一个类似 ppt 的软件,所以需要使用缩略图,而对于矩形形状,在缩略图,经常看不到线。 因为 ViewBox 和 visualBrush 都使用 邻近算法 所以 ViewBox 和 visualBrush 都存在丢失线的问题。 本文提供一个算法,解决 单线条在WPF不显示问题。1像素线段在WPF不显示问题。ViewBox 缩小失去线段问题。

我发现这个问题,于是在 堆栈网提问:https://stackoverflow.com/q/44495238/6116637,最后在walterlv 的帮助下,找到解决方法。

先来说下问题:

如果使用 ViewBox 缩小一个矩形,如果线段只有 1 像素,那么容易就丢失。

请看上图,左边就是一个矩形,右边是使用 ViewBox 做出来的缩小图形。可以看到存在线条不显示,但是在移动矩形过程中,有些线就显示了,于是看起来图形在闪烁,这个设计不好。

当然为了显示矩形,我需要使用 VisualBrush 。为了说明 ViewBox 问题,我用了两个方法,一个就是使用 一个ViewBox 里面放矩形。一个就是使用 ViusalBrush 显示矩形。得到结果差不多, ViewBox 和 visualBrush 都会丢失线段。

         <Border x:Name="SlideBorder" Margin="10,10,10,100" BorderThickness="1" BorderBrush="White">
                <Border.Background>
                    <VisualBrush  Visual="{Binding ElementName=Rectangle}" Stretch="Uniform"  />
                </Border.Background>
            </Border>
            <Viewbox  >
            <Grid x:Name="Rectangle" Background="#FFFFFFFF">
                <Rectangle Margin="10,50,10,10" Stroke="#FF565656"
                           StrokeThickness="1"
                           UseLayoutRounding="True">

                </Rectangle>
                </Grid>
                
            </Viewbox>

但是大家都知道,ps 缩小图片,不会容易就出现线段不显示,于是能否使用和 ps 相似的方法?

答案,是的。于是使用的技术有:控件截图、改变图片大小

通过控件截图得到控件的图片,然后通过改变图片大小方式,不会让线段不显示。

wpf 截图

可以使用下面代码截图,width 是图片像素宽度,height是高度

             var bitmap = new RenderTargetBitmap(width, height, 96.0 dpi 就是96, 96.0, PixelFormats.Pbgra32);
            bitmap.Render(控件);

如果dpi不是96,那么请使用其他值

通过上面方法就可以截图,然后需要修改图片大小。

修改图片大小

修改图片大小,可以使用TransformedBitmap

如果需要把图片修改为大小为 size ,请使用下面代码,这个代码的效率很高。

    new TransformedBitmap(bitmap, new ScaleTransform(size.Width / 图片宽度, size.Height / 图片高度))

这样可以返回一个 BitmapImage ,于是就得到从输入一个控件到输出一个图片

通过上面的方法,可以使用和 VisualBrush 的方法,把控件转为图片,但是效率没有 visualBrush 那么高。不过效率大概比 VisualBrush 时间大概多不到 50 毫秒在1280*720P的控件。当然我的配置比较高也有关,TransformedBitmap 的代码是在 GPU 计算的,而截图是在 UI 线程,所以需要注意一下。

总的代码就是:

        public static BitmapSource ToBitmapSource(Visual visual, Size size)
        {
            var bounds = VisualTreeHelper.GetDescendantBounds(visual);
            var width = (int) Math.Round(bounds.Width);
            var height = (int) Math.Round(bounds.Height);
            var bitmap = new RenderTargetBitmap(width, height, 96.0, 96.0, PixelFormats.Pbgra32);
            bitmap.Render(visual);
            return new TransformedBitmap(bitmap, new ScaleTransform(size.Width / width, size.Height / height));
        }

输入你需要转换的控件,输入转换后的大小,得到一个图片

于是大概就是 VisualBrush 的功能。

于是使用上面的代码,尝试缩小,可以看到不会丢失线

缺点:无法获得用户的输入,得到是图片,只能用于显示

大法的缩略图,是在用户输入完成在做新的图片,尝试移动一个图片,在移动中,缩略图是不显示的。

呆磨:http://download.csdn.net/detail/lindexi_gd/9868941

参见:How to fix VisualBrush lost line?

how to avoid a single pixel line disappear in wpf?


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9775
来自专栏黑白安全

javascript实现background 定时循环随机背景图

这里用的固定地址,用的新浪图床,喜欢的话可以自己扩充图片,我这里简短的展示了10个图片!

1633
来自专栏我的博客

ewebeditor v3.8水印处理位置调整

今天使用ewebeditor编辑器,发现图片水印不能调节,只能在左上角。于是找相关调节水印代码。找到关键代码,将水印调节到右下角了。 找到php文件夹下的upl...

2945
来自专栏腾讯社交用户体验设计

表格边框你知多少

2093
来自专栏非著名程序员

Android字体大小怎么自适应不同分辨率?

今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的。 一、 原理如下: 假设需要适应320...

3758
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.7K9
来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

2578
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

3539
来自专栏前端知识分享

第124天:移动web端-Bootstrap轮播图插件使用

> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

3444
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

2018

扫码关注云+社区

领取腾讯云代金券