Formulating Image Outline Programmatically (Prefer

问题:

I would just like to ask for assistance to anyone on the logic, and much better sample code of formulating an image's outline.

To make it clearer, I'm talking about a transparent image. Say, I have a PNG image with a polygon shape in the middle, or much better a top view of an island. Now, I would like to trace the outlines and set a color on it. Like the Effect 'Stroke' in Adobe Photoshop.

I have accomplished that far, I've created a program that would trace the outlines. But my problem is, it's linear scanning. From left to right, then down, then left to right again. I'm sure you get the idea. I wanted the tracing to be flowing, like you would trace it manually. Like you with Trace a Circle.

The purpose is, for it to be used as a trigger area for hovering accurately a polygon. And also my problem is if there's two island for example.

I hope my query is clear. Any suggestions, samples are appreciated. But much better if it's in a c# code form or pseudo code with some explanations.

Thanks a lot in advance.

-- Addition:

Also, I would like (I guess I've forgotten to mention) to record the coordinates of the stroke in a sequential manner. So I could manipulate them later on. That is why I wanted to make the outlining logic in a flow manner. That is the algorithm i'm looking for specifically. Thanks a lot!

回答1:

One way is to use a general edge detection algorithm. For example, Sobel edge detection. However, it's not optimized for clean, antialiased, two-color images like the example below, so it produces a somewhat rough result. To better preserve the antialiasing, and get a smooth result, I suggest the following algorithm:

Image blurredImg = gaussianBlur(sourceImg, blurRadius = desiredOutlineWidth);
const float sharpnessCoef = 0.1; // value may need tuning or may need to
                                 // depend on the blur radius
Image dilatedImg = from blurredImg, map all pixels with
                   brightness > sharpnessCoef to white and
                   multiply the rest by 1 / sharpnessCoef
Image smoothResult = subtract sourceImg from dilatedImg

Example:

回答2:

Consider using image processing techniques, like this one:

http://www.codeproject.com/KB/cs/Canny_Edge_Detection.aspx