Differences between CSharp and Javascript of Clipper

Donate Javascript Clipper Project

Differences between C# and Javascript Clipper, version 6

While I have tried to make Clipper translation from C# to Javascript as identical as possible, there are some features that are not possible to implement in Javascript without changes. I have added also some own helper functions to allow easier use.

Differences due to language dissimilarities

The following are properties in C#, but methods in Javascript.

Property in C#	Javascript
In PolyTree:
Total	Total()
In PolyNode:
ChildCount	ChildCount()
Childs	Childs()
Contour	Contour()
Parent	Parent()

Other differences

The following functions are added to make Javascript Clipper easier to use:

ClipperLib.Clone()

ClipperLib.Clone() makes a deep copy of Paths or Path so that also IntPoint objects are cloned and not only referenced.

:::javascript
var cloned_path = ClipperLib.Clone(path);
// or
var cloned_paths = ClipperLib.Clone(paths);

ClipperLib.Clean()

ClipperLib.Clean() joins vertices that are too near each other and causes distortion to offsetted polygons without cleaning.

:::javascript
var cleaned_path = ClipperLib.Clean (path, delta);
// or
var cleaned_paths = ClipperLib.Clean (paths, delta);

ClipperLib.Lighten()

ClipperLib.Lighten() removes points that doesn't affect much to the visual appearance. If middle point is at or under certain distance (tolerance) of the line segment between
start and end point, the middle point is removed.

:::javascript
var lightened_path = ClipperLib.Lighten(path, tolerance);
// or
var lightened_paths = ClipperLib.Lighten(paths, tolerance);

ClipperLib.PerimeterOfPath()

ClipperLib.PerimeterOfPath() returns a perimeter of Path. If Path is closed, clone of first point is added to the end of Path.

:::javascript
var path = [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];
var closed = true;
var scale = 100;
var perimeter = ClipperLib.PerimeterOfPath (path, closed, scale);
// perimeter is now 400

ClipperLib.PerimeterOfPaths()

ClipperLib.PerimeterOfPaths() returns a perimeter of Paths. If Paths is closed, clone of first point is added to the end of Paths.

:::javascript
var paths = [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],
            [{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]];
var closed = true;
var scale = 100;
var perimeter = ClipperLib.PerimeterOfPaths (paths, closed, scale);
// perimeter is now 720

ClipperLib.AreaOfPolygon()

ClipperLib.AreaOfPolygon() returns an area of closed Path. If path is already scaled up, you can set scale value to force function to return downscaled area.

:::javascript
var path = [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];
var scale = 100;
var area = ClipperLib.AreaOfPolygon (path, scale);
// area is now 10000

ClipperLib.AreaOfPolygons()

ClipperLib.AreaOfPolygons() returns an area of closed Paths. If path is already scaled up, you can set scale value to force function to return downscaled area.

:::javascript
var paths = [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],
            [{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]];
var scale = 100;
var perimeter = ClipperLib.AreaOfPolygons (path, scale);
// area is now 3600

ClipperLib.GetBoundsOfPath()

ClipperLib.GetBoundsOfPath() returns a rectangle object which describes the bounding box of path. If path is already scaled up, you can set scale value to force function to return downscaled bounds.

:::javascript
var path = [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];
var scale = 100;
var bounds = ClipperLib.GetBoundsOfPath (path, scale);
// returns bounds: {"left":10,"top":10,"right":110,"bottom":110}

ClipperLib.GetBoundsOfPaths()

ClipperLib.GetBoundsOfPaths() returns a rectangle object which describes the bounding box of Paths. If Path is already scaled up, you can set scale value to force function to return downscaled bounds.

:::javascript
var paths = [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],
            [{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]];
var scale = 100;
var bounds = ClipperLib.GetBoundsOfPaths (paths, scale);
// returns bounds: {"left":10,"top":10,"right":110,"bottom":110}

ClipperLib.ScaleUpPath()

ClipperLib.ScaleUpPath() scales up each coordinate of Path by scaling coefficient and rounds to nearest integer using Math.round().

:::javascript
var path = [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];
var scale = 100;
ClipperLib.ScaleUpPath (path, scale);
// path is now [{X:1000,Y:1000},{X:11000,Y:1000},{X:11000,Y:11000},{X:1000,Y:11000}];

ClipperLib.ScaleUpPaths()

ClipperLib.ScaleUpPaths() scales up each coordinate of Paths by scaling coefficient and rounds to nearest integer using Math.round()

:::javascript
var paths = [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],
            [{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]];
var scale = 100;
ClipperLib.ScaleUpPaths (path, scale);
// path is now [[{X:1000,Y:1000},{X:11000,Y:1000},{X:11000,Y:11000},{X:1000,Y:11000}],
//              [{X:2000,Y:2000},{X:2000,Y:10000},{X:10000,Y:10000},{X:10000,Y:2000}]];

ClipperLib.ScaleDownPath()

ClipperLib.ScaleDownPath() scales down each coordinate of Path by scaling coefficient.

:::javascript
var path = [{X:1000,Y:1000},{X:11000,Y:1000},{X:11000,Y:11000},{X:1000,Y:11000}];
var scale = 100;
ClipperLib.ScaleDownPath (path, scale);
// path is now [{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}];

ClipperLib.ScaleDownPaths()

ClipperLib.ScaleDownPaths() scales down each coordinate of Paths by scaling coefficient.

:::javascript
var paths = [[{X:1000,Y:1000},{X:11000,Y:1000},{X:11000,Y:11000},{X:1000,Y:11000}],
             [{X:2000,Y:2000},{X:2000,Y:10000},{X:10000,Y:10000},{X:10000,Y:2000}]];
var scale = 100;
ClipperLib.ScaleDownPaths (path, scale);
// path is now [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],
//              [{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]];

ClipperLib.ExPolygon()

Creates an instance of ExPolygon object.

:::javascript
var expolygon = new ClipperLib.ExPolygon();

ClipperLib.ExPolygons()

Creates an instance of ExPolygons object ie array.

:::javascript
var expolygons = new ClipperLib.ExPolygons();

ClipperLib.PolyTreeToExPolygons()

Converts PolyTree to ExPolygons.

:::javascript
var expolygons = new ClipperLib.ExPolygons();
ClipperLib.PolyTreeToExPolygons(polytree, expolygons)

ClipperLib.ExPolygonsToPaths()

Converts PolyTree to Paths.

:::javascript
var paths = new ClipperLib.Paths();
ClipperLib.ExPolygonsToPaths(polytree, paths)