1

(Before this gets marked as a duplicate, I'd like to say that I've tried the answers on other posts, but they don't seem to work for my specific issue.)

I'm creating a sort of "map game", where there's a map split into multiple areas. Currently, this is what I have:

It works, but it's not pretty. I want to make the buttons (currently they're the Rectangle control, but I can change that easily) the right shape.

I tried making a path in Inkscape, which gave me this SVG path:

m 283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762 z

However, when I tried to make a Button (and later Polygon) use the path, it didn't work and instead made a completely different shape.

The Buttons need to have a background color that can change during runtime, so a PictureBox won't work.

Is there a reason why the Path didn't work? Or maybe there is a much easier method?

EDIT: Here is the code I used for the Polygon

<Polygon Fill="Blue" Points="283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762" Margin="248,102,956,22" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2"/>

And here is the result, which is the same shape I got when I tried changing the shape of a Button (unfortunately I deleted the code for that):

enter image description here

Here is what it should look like (path drawn in Inkscape):

enter image description here

m654
  • 158
  • 1
  • 2
  • 16
  • 1
    Would you please provide the code used to define your rectangle / polygons (not just the path)? – SharpNip Mar 08 '19 at 16:58
  • @SharpNip Sure! I edited the post. – m654 Mar 08 '19 at 18:10
  • 1
    For some added context; Might browse [this one](https://stackoverflow.com/questions/43350165/is-there-any-way-to-make-geometrydrawing-interactive-from-the-ui-or-how-to-loa/43355097#43355097) – Chris W. Mar 08 '19 at 19:19

2 Answers2

2

I figured it out and it was actually pretty easy! I actually didn't need Inkscape at all.

I imported the map image into Blend, and I traced the area with the Pen tool and made it into a Path, which I copied back into Visual Studio.

Example:

enter image description here

m654
  • 158
  • 1
  • 2
  • 16
0

Are you sure you didn't get mixed up with which part you picked out the xaml inkscape produced?

Because that's roughly the top right part of the iberian peninsular. Like your drawn map. Roughly anyhow. That's just a polygon - with hard edges. Meaning however you produced it, you didn't trace the curvy/rough edges of what you're showing us.

Also. If you look at the data that's in it. See where it starts?

 m 283.60033,267.22114

Those are x,y co-ordinates.

268px left, 267px down

From the top left corner of whatever container you put it in. Is that going to work for you?

Andy
  • 11,864
  • 2
  • 17
  • 20
  • Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number: `m 353.69716,262.60424`. – m654 Mar 08 '19 at 18:19