Using Graphics class and DrawRectangle method(-x, -y) in webforms using c#

Question

Scenario: I need to replicate the solar power plant field configuration on web page(set of rectangles for mirrors and receiver). I need to dynamically add rectangles to webpages with given X,Y,width and height parameters using c#.net. I will receive the user input a set of coordinates for rectangles as X,Y full page graph. Eg: (-42.34,-240.34,2.25,16.65) (10.34,-140.34,10.25,5.65)

The coordinates I receive from user input are related to X & Y full page graph that includes negative coordinates also. But the DrawRectangle accepts the X & Y values as positive and only integer values.

My query is how should I relate the user input X & Y Coords ( -ve & +ve) on the web page and float width values to integer?

When I try to convert to Int, the rectangles are either getting overlapped or not displaying at all. The set of input values for rectangles are closer and there is difference in point values only.

How are you adding the generated images to the page? Have you tried this with simple, "foolproof" rectangles? That would rule out that it's your "solar power mirrors" algorithm. — John Saunders, Oct 17 '12 at 00:44

score 2 · Answer 1 · edited May 23 '17 at 12:04

Given the objective (and ignoring the required Graphic.DrawRectangle), Your best bet is to use SVG. The SVG format is actually a XML file that describes the image you want, so you can generate it on server side and cache it as text (either on clint or server), also the SVG uses vectorial graphics (as the name suggests*) wich allows for arbitrary resolution.

*: SVG stands for Scalable Vector Graphics.

I recommend you this tutorial at 3w.org on SVG to get you started.

Here are examples of a SVG:

Inline SVG in HTML

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>SVG test</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="10" y="10" width="50" height="30" />
        </svg>
    </body>
</html>

SVG in img element

rectangle.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="10" y="10" width="50" height="30" />
</svg>

index.htm

<!DOCTYPE html>
<html>
    <head>
        <title>SVG test</title>
    </head>
    <body>
        <img src="rectangle.svg" alt="rectangle" />
    </body>
</html>

I recommend the second option (separate file). Note that this are woking drafts, well supported working draft. So, check browser compatibility.

It may be the case that you would prefer not to output the SVG text directly, in that case, check Drawing SVG in .NET/C#? here, at StackOverflow.

Using Graphics class and DrawRectangle method(-x, -y) in webforms using c#

1 Answers1

Inline SVG in HTML

SVG in img element