kingor309
kingor309
采纳率100%
2018-01-21 01:02

WPF中怎样实现叠加显示大量图片?

40
已采纳

麻烦大神指点:
我的程序不断接收1张张小的jpg图片,接收到1张小图片后,就要把它显示到特定坐标位置上。我尝试用1个DrawingVisual对象,并在它的DrawingContext中实现叠加地绘制图片,但每次调用DrawingContext.Drawxxx()都会擦除原来的内容,以至于无法不断地叠加显示jpg图。请问,这种需求应该用WPF哪种绘图方式呢?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • hxycsdn9159 hxycsdn9159 3年前

    1.首先jpg图片是不支持透明的图片你叠加的意义在哪里?一旦叠加后面的图片肯定会覆盖前面的图片。
    2.如果是想要后面的图片是半透明类型的和前面的叠加也就是做图片的Alpha融合的话有两个思路:
    (1).使用WPF的WriteableBitmap类读取融合前的像素颜色,然后和新要叠加的图片像素颜色进行融合 ,通过alpla融合公式重新计算像素颜色后进行逐个像素的写入。
    (2).自己用HLSL写一个Alpha融合的Shader,继承ShaderEffect类,然后把这个融合的shader应用于你控件的Effect类。

    个人倾向于第二种方法,因为WriteableBitmap类你用的话会发现效率很低,因为处理像素的数量级都很大,例如一个500*500的图片就要处理25000个像素,都交由cpu处理的话UI线程的响应速度大大降低。用shader的话就把这个任务交给了gpu去处理,你会发现效率很高,不会影响你程序UI线程的响应速度。

    点赞 评论 复制链接分享
  • kingor309 kingor309 3年前

    用WriteableBitmap搞定了。废话不说,源码附上,以备后来人使用——

    //创建WriteableBitmap对象,以及它关联的Image对象(用来呈现画面)
    WriteableBitmap wrBmp = new WriteableBitmap(1200, 800, 72, 72, PixelFormats.Pbgra32, null);
    Image img = new Image();
    img.Source = this.wrBmp;
    img.Width = 1200;//img的尺寸不必跟wrBmp一样,wrBmp的画面会自动在img中居中的
    img.Height = 800;

    //假设网络上收过来的图片数据(格式为jpeg或png……)放在byt[] streamByte中
    //通过BitmapImage对象,把收过来的小图片的pixels拷贝出来
    MemoryStream memStream = new MemoryStream(streamByte);
    BitmapImage bmp = new BitmapImage();
    bmp.BeginInit();
    bmp.StreamSource = memStream;
    bmp.EndInit();
    int stride = (int)(bmp.PixelWidth) * 4;
    byte[] bufArr = new byte[stride* (int)bmp.PixelHeight];
    bmp.CopyPixels(bufArr, stride, 0);

    //用拷贝出来的pixels更新WriteableBitmap对象
    wrBmp.Lock();
    Int32Rect rect = new Int32Rect(offsetX, offsetY, bmp.PixelWidth, bmp.PixelHeight);//offsetX、offsetY是这张小图片左上角在图片显示区域的坐标
    wrBmp.WritePixels(rect, bufArr, stride, 0);
    wrBmp.AddDirtyRect(rect);//刷新改写的位图区域
    wrBmp.Unlock();

    点赞 评论 复制链接分享
  • xiaoyaowangsen xiaoyaowangsen 3年前

    可以放在一个列表里试试

    点赞 评论 复制链接分享
  • z1156560936 z1156560936 3年前

    比如你图片长宽分别为20X20





    应该可以

    点赞 评论 复制链接分享
  • z1156560936 z1156560936 3年前

    WrapPanel布局
    比如你图片长宽分别为20X20






    这样应该可以 不确定是不是你想要的结果

    点赞 评论 复制链接分享
  • kingor309 kingor309 3年前

    各种百度后,发现WriteableBitmap 类应该可以解决我的问题,呵呵

    点赞 评论 复制链接分享