gradient phong cách Heatmap trong .NET

Question

tôi đang cố gắng để tạo ra một bản đồ nhiệt với gradient mà trông tương tự như sau:

Hình ảnh này cho thấy ba điểm và gradient pha trộn độc đáo với nhau.

Đây là những gì tôi hiện đang làm trong chức năng vẽ của tôi:

public void DrawGradient(int x, int y, Graphics g) { 
    using (var ellipsePath = new GraphicsPath()) { 

    var bounds = new Rectangle(x, y, 100, 100); 
    ellipsePath.AddEllipse(bounds); 
    var brush = new PathGradientBrush(ellipsePath); 
    Color[] colors = { 
      Color.FromArgb(64, 0, 0, 255), 
      Color.FromArgb(140, 0, 255, 0), 
      Color.FromArgb(216, 255, 255, 0), 
      Color.FromArgb(255, 255, 0, 0) 
     }; 
    float[] relativePositions = {0f,0.25f,0.5f, 1.0f}; 
    ColorBlend colorBlend = new ColorBlend(); 
    colorBlend.Colors = colors; 
    colorBlend.Positions = relativePositions; 
    brush.InterpolationColors = colorBlend; 

    g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver; 
    g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality; 
    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
    g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half; 
    g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear; 

    g.FillEllipse(brush, bounds); 
    } 
} 

nào tạo ra một hình ảnh như thế này cho hai điểm chồng chéo:

Nó không pha trộn. Làm thế nào tôi có thể tạo ra một hiệu ứng pha trộn gradient trong một bản vẽ .NET?

Answer 1

Có điều này là có thể với < 100 dòng mã + vẽ NET và GDI ..:

Bạn cần thay đổi hai điều trong mã của bạn:

• Bạn cần phải làm mờ các khu vực điểm đến trong suốt, vì vậy bạn có thể thêm họ
• Bạn cần phải sử dụng một gradient màu xám, do đó bạn không tạo ra sai, màu sắc có lẽ bùn
• Như một hệ quả bạn cần phải remap màu sắc.

Dưới đây là chi tiết:

Bạn cần hai gradient:

• Một màu xám đi từ Black (255,0,0,0) để minh bạch Đen (0, 0,0,0). Bạn có thể ảnh hưởng đến độ mịn bằng cách làm cho đầu trong suốt mờ đi nhanh hơn hoặc chậm hơn.

• Gradient màu liệt kê màu sắc bản đồ nhiệt của bạn.

Tiếp theo, bạn cần một hoặc nhiều bitmap với vòng tròn màu xám. Nếu các khu vực điểm đều giống nhau, người ta sẽ làm ..

Bây giờ bạn có thể vẽ các bitmap lên bitmap đích. Hãy chắc chắn để thiết lập các Graphics.CompositingMode = CompositingMode.SourceOver; Điều này dẫn đến một cái gì đó giống như ảnh chụp màn hình bên trái.

Cuối cùng, bạn cần phải Remap các màu sắc:

Đối với điều này bạn cần phải thiết lập các ColorMaps:

• tạo hai danh sách màu sắc, một đi qua các màu sắc màu xám trong 256 bước, một với cùng một số bước đi qua màu sắc bản đồ nhiệt của bạn.Lưu ý rằng các danh sách phải có cùng số phần tử; tuy nhiên các gradient có thể có nhiều hoặc ít trong ColorBlend.Colors tùy ý bạn.

Các danh sách màu sắc có thể được tạo ra bằng cách điền vào một điểm ảnh 256x1 Bitmap với một LinearGradientBrush mà sử dụng cùng hai tương ứng ColorBlends và sau đó sử dụng GetPixel để kéo ra những màu sắc ..

Sau khi thực hiện một SetRemapTable chúng ta có thể cuối cùng vẽ bản đồ nhiệt, và thì đấy, ảnh chụp màn hình bên phải khá giống nhau, ngay cả khi không có bất kỳ tinh chỉnh nào để thực sự gần với bản đồ nhiệt của bạn.

Mã của bạn

Dưới đây là một vài nhận xét về các lỗ hổng trong mã của bạn:

• Bạn cần phải fade-in từ hoàn toàn minh bạch. Màu của bạn bắt đầu với alpha là 64, là đến nay là từ 'gần như trong suốt'. Đôi mắt của chúng tôi rất nhạy cảm vào cuối quy mô này!

Đây là gradient màu xám tôi đã sử dụng, với một nền bàn cờ photoshop kiểu, vì vậy bạn có thể thấy sự minh bạch:

• Một vấn đề khác với màu sắc của bạn là họ bắt đầu với màu xanh; họ thực sự cần phải bắt đầu với màu trắng!

• Vấn đề cơ bản nhất là pha trộn màu sắc. Đối với 'bản đồ nhiệt', (hoặc 'bản đồ hồ sơ' hoặc 'bản đồ dịch chuyển'), chúng tôi cần phải thêm các giá trị, không trộn chúng. Đối với điều này các kênh màu là vô ích. Màu sắc là hình tròn và chúng không tự nhiên tự cho mình vào danh sách các giá trị tăng dần. Nếu chúng tôi chỉ sử dụng kênh alpha, chúng tôi có thể giới hạn một cách đơn giản bản đồ thành 'bản đồ độ sáng', mà sau đó chúng tôi có thể tô màu theo bất kỳ cách nào chúng tôi thích ..

Lưu ý rằng tôi đã giả định rằng điểm tối đa. Nếu họ không, bạn cần phải mở rộng quy mô chúng xuống một alpha thấp ..

Cũng lưu ý, rằng cho các ứng dụng thực sự quan trọng, giống như y tế hoặc khoa học hình ảnh, bạn nên đi tất cả các cách để tính các giá trị, vì vậy bạn có toàn quyền kiểm soát ánh xạ!