Blurry Back Wall Image

[Anatoly]

Hello!

We're trying to migrate to TeeChart.NET (2012 4.1.2012.05100) from older Active X version (v2010). Active X version used to produce sharp (aliased) background image:

ActiveX.png (5.94 KiB) Viewed 11987 times

Analogious code re-writen to TeeChart.NET produces blurry (anti-aliased) background image:

NET.png (14.69 KiB) Viewed 11974 times

To maintain backward compatibility we need to produce sharp (aliased) background image using TeeChart.NET (this is very important for our needs). Do you have any idea how to achieve that?

I you want, I can provide my source code... but it's very easy to reproduce - just create a small bitmap image using e.g. Paint and load it to back wall of a chart.

[Sandra]

Hello Anatoly,

I can not reproduce your problem using next code and last version of TeeChartFor.Net:

Code: Select all

private void InitializeChart()
        {
            tChart1.Aspect.View3D = false;
            Series1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
            Series1.FillSampleValues();
            tChart1.Draw();
            tChart1.Walls.Back.Brush.Image = Image.FromFile(@"Test.bmp");
            tChart1.Walls.Back.Brush.Gradient.Visible = false;
        }

And also I have attached the image I have used to make the test

Test.zip

(2.95 KiB) Downloaded 395 times

Can you try if your problem appears using my code and my image?

Thanks,

[Anatoly]

Sandra,

Thank you much for responding! And I'm sorry for not being clear in the first place, I should have provided my code. I use export to BMP:

Code: Select all

Chart chart = new Chart();
Bar bar;
bar = new Bar(chart);
bar.FillSampleValues();

chart.Aspect.View3D = false;

chart.Walls.Back.Gradient.Visible = false;
chart.Walls.Back.Brush.Image = Image.FromFile(@"d:\TEMP\Untitled.bmp");

BitmapFormat bitmap = chart.Export.Image.Bitmap;
bitmap.Width = 400;
bitmap.Height = 300;
bitmap.Save(@"d:\TEMP\output.bmp");

Also attaching my "Untitled.bmp" and "output.bmp" images. As you can see in output.bmp, the back wall image is anti-aliased.

It is reproducible with your BMP as well, but your BMP is quite large itself and smoothing is not that obvious. While my BMP is small and this where I get undesired smoothing.

[Anatoly]

Here is another example just to make the issue really obvious. In this attachement:

background.bmp - very small (1x3 pixels) bitmap to appear on the back wall of a chart
Ax.bmp - desired output generated with TeeChart Active X v2010
NET.bmp - incorrect output generated with TeeChart.NET

Thanks!

[Sandra]

Hello Anatoly,

I have inform you that we have imported image directly in the Form and image we have loaded in background appears blurry (anti-aliased) and is the same result you get if you blow up the image with image Editor, therefore it is behavior produced for the way that .Net Framework has to treat the images bitmap when their ImageMode is streach. To check it I have made a simple code without TChart:

Code: Select all

  private void InitializeChart()
        {
         
           BackgroundImage = Image.FromFile(@"C:\Users\Sandra\Downloads\TeeChartIssue\background.bmp");
           BackgroundImageLayout = ImageLayout.Stretch;
        }

And I have gotten next results:

TestBmp.jpg (50.27 KiB) Viewed 11938 times

Would be very helpful gpt us. if you can send me the code you have used in Activex, because, we can try to find a solution for you using TeeChartFor.Net

Thanks in advance,

[Anatoly]

Sure, here is my Active X code that produce correct output. This code is in C# and it invokes TeeChart via interop.

Code: Select all

ITChart chart = new TChartClass();
ISeries series = chart.Series(chart.AddSeries(ESeriesClass.scBar));
series.FillSampleValues();

chart.Aspect.View3D = false;
chart.Walls.Back.Gradient.Visible = false;

Bitmap b = new Bitmap(@"d:\TEMP\background.bmp");
chart.Walls.Back.Picture.AssignImage(b.GetHbitmap().ToInt32());

IBMPExport bitmap = chart.Export.asBMP;
bitmap.Width = 400;
bitmap.Height = 300;
bitmap.SaveToFile(@"d:\TEMP\Ax.bmp");

And another note that may help... export to Metafile produces correct (aliased) output even with TeeChart.NET.

[Sandra]

Hello Anatoly,

Would be very helpful if you can tell us with which version of ActiveX you made the code because using last version of ActiveX and your code I cannot get the same results as you and I get next result:

TestAx.jpg (65.89 KiB) Viewed 11939 times

Thank,

[Anatoly]

Well, I used v2010 and v2011 - it works all the same. I think you're not getting the same result as I did because you're not doing the same thing. On your screen capture you have a control while what I'm talking about here is export to BMP. Could you please try my exact code?

[Narcís]

Hi Anatoly,

This is a .NET framework feature. Check out this code:

Code: Select all

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
  public class myControl : Panel
  {
    private Image image;

    public Image Image
    {
      get { return image; }
      set { image = value; }
    }

    protected override void OnPaint(PaintEventArgs e)
    {
      base.OnPaint(e);

      Rectangle dest = new Rectangle(0, 0, this.Width, this.Height);
      Rectangle src = new Rectangle(0, 0, image.Width, image.Height);

      //e.Graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
      //e.Graphics.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.None;
      e.Graphics.DrawImage(image, dest, src, GraphicsUnit.Pixel);
    }
  }

  public partial class Form1 : Form
  {
    public Form1()
    {
      InitializeComponent();
      InitializeChart();
    }
    
    private void InitializeChart()
    {
      Image image = Image.FromFile(@"c:\TEMP\Untitled.bmp");

      tChart1.Aspect.View3D = false;
      tChart1.Walls.Back.Gradient.Visible = false;
      tChart1.Walls.Back.Brush.Image = image;

      tChart1.Draw();
      Rectangle rect = tChart1.Chart.ChartRect;

      myControl p = new myControl();
      p.Width = rect.Width;
      p.Height = rect.Height;
      p.Left = rect.Left;
      p.Top = tChart1.Bottom;
      p.Image = image;
      this.Controls.Add(p);
    }
  }
  
}

It plots a custom Panel with a background image the very same way TeeChart does. Now try uncommenting the lines that set Graphics.InterpolationMode and Graphics.PixelOffsetMode at myControl's OnPaint override. Those are the properties that make a difference here. I added this issue (TF02016191) to the wish-list to be investigated for future releases. Probably it would make most sense setting those properties as shown in the example when changing TChart.Aspect.SmoothingMode, for example:

Code: Select all

      tChart1.Aspect.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None;

In the meantime, if you are a source code customer, you can modify it at Steema.TeeChart.Drawing.Graphics3DGDIplus.Draw(Rectangle destRect, Rectangle srcRect, Image image, bool transparent) in CanvasGDIplus.cs.

[Anatoly]

Hi Narcís,

Thanks a lot! I will try to leverage this information to get the desired result. Unfortunatelly I'm not a source code customer... so do you have any any idea when this issue could be addrressed on your side?

Anatoly

[Anatoly]

I was trying to use your idea in conjunction with Chart.Draw(Graphics g, Rectangle r) method and it almost worked. The image is now sharp but it is not aligned correctly:

1.jpg (39.72 KiB) Viewed 11941 times

The background is drawn in the top-left part of the chart. Compare to the output of Active X version:

Ax.jpg (46.42 KiB) Viewed 11942 times

[Anatoly]

Here is the corresponding code:

Code: Select all

			Chart chart = new Chart();
			Bar bar;
			bar = new Bar(chart);
			bar.FillSampleValues();

			chart.Aspect.View3D = false;

			chart.Walls.Back.Gradient.Visible = false;
			chart.Walls.Back.Brush.Image = Image.FromFile(@"d:\TEMP\background.bmp");

			Bitmap b = new Bitmap(400, 300);
			Graphics g = Graphics.FromImage(b);
			g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
			g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.None;

			chart.Draw(g, new Rectangle(0, 0, 400, 300));
			g.Dispose();
			b.Save(@"d:\temp\1.bmp");

[Narcís]

Hi Anatoly,

In that case I think it's much easier custom drawing on the chart canvas as shown here:

Code: Select all

    public Form1()
    {
      InitializeComponent();
      InitializeChart();
    }
    
    private void InitializeChart()
    {
      tChart1.Chart.Aspect.View3D = false;
      tChart1.Series.Add(new Steema.TeeChart.Styles.Bar(tChart1.Chart)).FillSampleValues();
      tChart1.BeforeDrawSeries += new Steema.TeeChart.PaintChartEventHandler(tChart1_BeforeDrawSeries);
      tChart1.Export.Image.JPEG.Save(@"c:\temp\customdrawing.jpeg");
    }

    void tChart1_BeforeDrawSeries(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
      Rectangle chartRect = tChart1.Chart.ChartRect;
      Rectangle rect = new Rectangle(chartRect.Left, 100, chartRect.Width, 100);
      g.Pen.Visible = false;
      g.Brush.Color = Color.Red;
      g.Rectangle(rect);
    }

Which produces this image for me:

customdrawing.jpeg (37.89 KiB) Viewed 11879 times

Does this fit your needs or do you needs?

[Anatoly]

Hi Narcís,

Thanks! Using a combination of your workarounds I was able to solve the problem.

Anatoly