Plotting Points and Saving drawings a bitmaps

Oct 12, 2009 at 12:52 PM

As one person commented: "First of all, A great piece of work. Boy! there is lot to learn from your style of coding."

All I can say is: WOW! All working here, no issues and what an eye-opener!

MAYBE you could shed some light on these issues I'm trying to solve in Silverlight.

At the moment I have a Windows app developed in VB and C# that uses GDI+ framework for drawing and saving drawings.
We know Silverlight does not use GDI+

How would I be able to do this: Save any drawing as a bitmap? .jpg, .png, .gif, .tiff
Maybe using writeablebitmap class?

I would also like to limit the canvas area and load a picture into the background. The user draws onto that background, then the whole thing, background included, can get saved to a new file, again .jpg, .png, .gif or.tiff

Lastly, if the user draws an arc or a circle or parabola, I'd like to take that line and plot points along it such that each "segment" is of equal length.
I can then manipulate those points along the line as I need.

ANY suggestions would be just great. This geometry project has already solved many unanswered questions I had with my intended move to Silverlight.

THANKS

 

Coordinator
Oct 13, 2009 at 7:20 AM

Thanks! Flattered to hear that :)

Saving images is not a problem at all: http://blogs.msdn.com/kirillosenkov/archive/2009/10/12/saving-images-bmp-png-etc-in-wpf-silverlight.aspx. You will also be able to save whatever appears on the control - background picture, bitmap effects, overlay shapes, etc.

Best regards,

Kirill

P.S. As for your last question, it's a little hard to understand without actually seeing some sort of a mock up or a sketch. I've tried to guess, try saving this xml as a .lgf file and open it in Live Geometry.

<?xml version="1.0" encoding="utf-16"?>
<Drawing>
  <Viewport Left="-13.8854166667" Top="6.78125" Right="12.6979166666" Bottom="-6.96875" />
  <Styles>
    <PointStyle Color="#FF000000" Fill="#FFFFFF00" Name="1" Size="10" StrokeWidth="1" />
    <PointStyle Color="#FF000000" Fill="#FFBCDAAB" Name="2" Size="10" StrokeWidth="1" />
    <PointStyle Color="#FF000000" Fill="#FFFFFF00" Name="3" Size="10" StrokeWidth="1" />
    <LineStyle Color="#FF000000" Name="4" StrokeWidth="1" />
    <ShapeStyle Color="#00FFFFFF" Fill="#FFFFFF00" Name="5" StrokeWidth="1" />
    <TextStyle Bold="false" Color="#FF000000" FontFamily="Arial" FontSize="35" Italic="false" Name="6" />
    <TextStyle Bold="false" Color="#FF000000" FontFamily="Arial" FontSize="10" Italic="false" Name="7" />
    <LineStyle Color="#FFE3DFDF" Name="8" StrokeWidth="1" />
  </Styles>
  <Figures>
    <FreePoint Name="FreePoint13" Style="1" X="-10.875" Y="-0.7708333333" />
    <FreePoint Name="FreePoint14" Style="1" X="-11.375" Y="0.0416666667" />
    <Segment Name="Segment15" Style="4">
      <Dependency Name="FreePoint13" />
      <Dependency Name="FreePoint14" />
    </Segment>
    <FreePoint Name="FreePoint16" Style="1" X="-11.3333333333" Y="0.9583333333" />
    <Segment Name="Segment17" Style="4">
      <Dependency Name="FreePoint14" />
      <Dependency Name="FreePoint16" />
    </Segment>
    <FreePoint Name="FreePoint18" Style="1" X="-10.7708333333" Y="1.7083333333" />
    <Segment Name="Segment19" Style="4">
      <Dependency Name="FreePoint16" />
      <Dependency Name="FreePoint18" />
    </Segment>
    <FreePoint Name="FreePoint20" Style="1" X="-9.9166666667" Y="2.1875" />
    <Segment Name="Segment21" Style="4">
      <Dependency Name="FreePoint18" />
      <Dependency Name="FreePoint20" />
    </Segment>
    <FreePoint Name="FreePoint22" Style="1" X="-8.8541666667" Y="2.1875" />
    <Segment Name="Segment23" Style="4">
      <Dependency Name="FreePoint20" />
      <Dependency Name="FreePoint22" />
    </Segment>
    <FreePoint Name="FreePoint24" Style="1" X="-8.2291666667" Y="1.75" />
    <Segment Name="Segment25" Style="4">
      <Dependency Name="FreePoint22" />
      <Dependency Name="FreePoint24" />
    </Segment>
    <FreePoint Name="FreePoint26" Style="1" X="-7.8125" Y="1.1041666667" />
    <Segment Name="Segment27" Style="4">
      <Dependency Name="FreePoint24" />
      <Dependency Name="FreePoint26" />
    </Segment>
    <FreePoint Name="FreePoint28" Style="1" X="-2.5208333334" Y="6.0208333333" />
    <FreePoint Name="FreePoint29" Style="1" X="-0.625000000099999" Y="6.0208333333" />
    <Segment Name="Segment30" Style="4">
      <Dependency Name="FreePoint28" />
      <Dependency Name="FreePoint29" />
    </Segment>
    <FreePoint Name="FreePoint33" Style="1" X="-4.2083333333" Y="0.5833333333" />
    <CircleByRadius Name="CircleByRadius34" Style="4">
      <Dependency Name="FreePoint28" />
      <Dependency Name="FreePoint29" />
      <Dependency Name="FreePoint33" />
    </CircleByRadius>
    <FreePoint Name="FreePoint37" Style="1" X="1.2708333333" Y="0.4791666667" />
    <CircleByRadius Name="CircleByRadius38" Style="4">
      <Dependency Name="FreePoint28" />
      <Dependency Name="FreePoint29" />
      <Dependency Name="FreePoint37" />
    </CircleByRadius>
    <PointOnFigure Name="PointOnFigure39" Style="1" X="-5.80170374542296" Y="1.61063794120484" Parameter="2.56892627084463">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure40" Style="1" X="-5.26972967543346" Y="2.15419991979202" Parameter="2.16501003055561">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure41" Style="1" X="-6.07289707399727" Y="0.926241607519803" Parameter="2.95971691182676">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure42" Style="1" X="-5.95197708896455" Y="-0.16090485503988" Parameter="3.54501168686364">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure43" Style="1" X="-4.27079939766632" Y="2.4781372858117" Parameter="1.60375142440804">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure44" Style="1" X="-3.31837683776518" Y="2.25729912258806" Parameter="1.08215392419196">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure45" Style="1" X="-2.75542256714063" Y="1.80121441666964" Parameter="0.697624271058644">
      <Dependency Name="CircleByRadius34" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure46" Style="1" X="-0.194126857582393" Y="-0.724193490020013" Parameter="3.82926390959745">
      <Dependency Name="CircleByRadius38" />
    </PointOnFigure>
    <PointOnFigure Name="PointOnFigure47" Style="1" X="-0.456475437075391" Y="-0.302234919832588" Parameter="3.56642481647751">
      <Dependency Name="CircleByRadius38" />
    </PointOnFigure>
    <Circle Name="Circle49" Style="8">
      <Dependency Name="PointOnFigure47" />
      <Dependency Name="PointOnFigure46" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint50" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle49" />
      <Dependency Name="CircleByRadius38" />
    </IntersectionPoint>
    <Circle Name="Circle52" Style="8">
      <Dependency Name="IntersectionPoint50" />
      <Dependency Name="PointOnFigure47" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint53" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle52" />
      <Dependency Name="CircleByRadius38" />
    </IntersectionPoint>
    <Circle Name="Circle55" Style="8">
      <Dependency Name="IntersectionPoint53" />
      <Dependency Name="IntersectionPoint50" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint56" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle55" />
      <Dependency Name="CircleByRadius38" />
    </IntersectionPoint>
    <Circle Name="Circle58" Style="8">
      <Dependency Name="IntersectionPoint56" />
      <Dependency Name="IntersectionPoint53" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint59" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle58" />
      <Dependency Name="CircleByRadius38" />
    </IntersectionPoint>
    <Circle Name="Circle61" Style="8">
      <Dependency Name="IntersectionPoint59" />
      <Dependency Name="IntersectionPoint56" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint62" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle61" />
      <Dependency Name="CircleByRadius38" />
    </IntersectionPoint>
    <Circle Name="Circle64" Style="8">
      <Dependency Name="IntersectionPoint62" />
      <Dependency Name="IntersectionPoint59" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint65" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle64" />
      <Dependency Name="CircleByRadius38" />
    </IntersectionPoint>
    <FreePoint Name="FreePoint68" Style="1" X="7.125" Y="0.6041666667" />
    <CircleByRadius Name="CircleByRadius69" Style="4">
      <Dependency Name="FreePoint28" />
      <Dependency Name="FreePoint29" />
      <Dependency Name="FreePoint68" />
    </CircleByRadius>
    <FreePoint Name="FreePoint70" Style="1" X="6.8958333333" Y="4.0416666667" />
    <FreePoint Name="FreePoint71" Style="1" X="7.4583333333" Y="4.0416666667" />
    <Segment Name="Segment72" Style="4">
      <Dependency Name="FreePoint70" />
      <Dependency Name="FreePoint71" />
    </Segment>
    <PointOnFigure Name="PointOnFigure73" Style="1" X="5.81133620773218" Y="-0.76275376570853" Parameter="3.94685575320684">
      <Dependency Name="CircleByRadius69" />
    </PointOnFigure>
    <CircleByRadius Name="CircleByRadius77" Style="8">
      <Dependency Name="FreePoint70" />
      <Dependency Name="FreePoint71" />
      <Dependency Name="PointOnFigure73" />
    </CircleByRadius>
    <IntersectionPoint Name="IntersectionPoint78" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="CircleByRadius77" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Circle Name="Circle82" Style="8">
      <Dependency Name="IntersectionPoint78" />
      <Dependency Name="PointOnFigure73" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint83" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle82" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Circle Name="Circle85" Style="8">
      <Dependency Name="IntersectionPoint83" />
      <Dependency Name="IntersectionPoint78" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint86" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle85" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Circle Name="Circle88" Style="8">
      <Dependency Name="IntersectionPoint86" />
      <Dependency Name="IntersectionPoint83" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint89" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle88" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Circle Name="Circle91" Style="8">
      <Dependency Name="IntersectionPoint89" />
      <Dependency Name="IntersectionPoint86" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint92" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle91" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Circle Name="Circle94" Style="8">
      <Dependency Name="IntersectionPoint92" />
      <Dependency Name="IntersectionPoint89" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint95" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle94" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Circle Name="Circle97" Style="8">
      <Dependency Name="IntersectionPoint95" />
      <Dependency Name="IntersectionPoint92" />
    </Circle>
    <IntersectionPoint Name="IntersectionPoint98" Style="2" Algorithm="IntersectCircleAndCircle2">
      <Dependency Name="Circle97" />
      <Dependency Name="CircleByRadius69" />
    </IntersectionPoint>
    <Label Name="Label99" Style="6" Text="1" X="-9.75" Y="-2.9166666667" />
    <Label Name="Label100" Style="6" Text="2" X="-4.5416666667" Y="-2.875" />
    <Label Name="Label101" Style="6" Text="3" X="1.125" Y="-2.75" />
    <Label Name="Label102" Style="6" Text="4" X="6.9375" Y="-2.5833333334" />
  </Figures>
</Drawing>
Oct 13, 2009 at 2:38 PM

Kiril, THANKS for the help, this really saves me a lot of time...!

To explain what I mean by calculating all these points on a circle or arc:

Right now, a user draws a freehand line which I handle through the mouse_move and mouse_up events. Because the speed at which the user moves the mouse is random, the points collected are also random along the user-defined line. I take those points (on mouse_up event) and calculate a series of new points at equal distance along the same line, then redraw the line through the new points.

These points allow me to create proprietary linetypes, eg: a zigzag along the line.

Now I'd like to add something like your functionality while redeveloping in Silverlight & C#, to allow the user to create arcs and maybe bezier curves THEN calculate all the points along THOSE lines and render my proprietary linetype(s).

Anyway, THAT would be most useful to know how to do - calculate points along ANY line, at equal distance apart (right now I use 10 to 15 px, depending on the line).

ANY ideas/thoughts/advice is most welcome!!

THANKS

Oct 19, 2009 at 11:11 AM

Kiril, just in case you had any time to give this any thought, here's a bit more info on what I want to do.

As already stated, I collect points on a freehand line drawn with the mouse_move event. I put those through a couple algorithms and get even spaced points along the same line which I use to create different line-type, like zigzag etc. ie: I'm drawing multiple little lines or arcs in a given pattern along the path of the original line. Doing the same with point-to-point lines is exactly the same.

As I try to improve the drawing mechanisms, I am looking into allowing the user to draw a point-to-point line, deform/stretch the line like a bezier curve on one or more points using grab-handles (maybe) then calculate even-spaced points along the NEW line and apply the linetype (again, say a zig zag) to those new points.

Collecting the primary points, no problem, collecting grab-handle points, no problem, calculate even-spaced points along the NEW line, BIG PROBLEM, drawing the linetype, no problem.

So, considering your knowledge of geometry, I thought I'd try get some further ideas/input.

THANKS!!