首先在github上可以直接下载到Clipper的源码,是无压缩版的:https://github.com/Delapouite/JsClipper。
在使用Clipper前先看看Clipper的Demo展示:
http://jsclipper.sourceforge.net/6.4.2.2/main_demo.html
http://jsclipper.sourceforge.net/6.4.2.2/index.html?p=starter_boolean.html
接着就是Clipper的官网: https://sourceforge.net/projects/jsclipper/
API的URL:https://sourceforge.net/p/jsclipper/wiki/documentation/
Clipper的API方法列表:
Table of Contents
Clipper 6 Documentation
Table of Contents
Overview
Preprocessor defines
ClipperBase
--- ClipperBase methods ---
ClipperBase.AddPath()
ClipperBase.AddPaths()
ClipperBase.Clear()
Clipper
--- Clipper methods ---
ClipperLib.Clipper()
ClipperLib.Clipper.Area()
ClipperLib.Clipper.CleanPolygon()
ClipperLib.Clipper.CleanPolygons()
ClipperLib.Clipper.ClosedPathsFromPolyTree()
ClipperLib.Clipper.Execute()
ClipperLib.Clipper.GetBounds()
ClipperLib.Clipper.MinkowskiDiff()
ClipperLib.Clipper.MinkowskiSum()
ClipperLib.Clipper.OffsetPaths()
ClipperLib.Clipper.OpenPathsFromPolyTree()
ClipperLib.Clipper.Orientation()
ClipperLib.Clipper.PointInPolygon()
ClipperLib.Clipper.PolyTreeToPaths()
ClipperLib.Clipper.ReversePath()
ClipperLib.Clipper.ReversePaths()
ClipperLib.Clipper.SimplifyPolygon()
ClipperLib.Clipper.SimplifyPolygons()
--- Clipper Properties ---
ClipperLib.Clipper.PreserveCollinear
ClipperLib.Clipper.ReverseSolution
ClipperLib.Clipper.StrictlySimple
ClipperLib.Clipper.ZFillFunction
Types
ClipperLib.ClipType()
ClipperLib.EndType
ClipperLib.EndType_
ClipperLib.ExPolygon()
ClipperLib.ExPolygons()
InitOptions
ClipperLib.IntPoint()
ClipperLib.IntRect()
ClipperLib.JoinType
ClipperLib.Path()
ClipperLib.Paths()
ClipperLib.PolyFillType
ClipperLib.PolyType
ClipperLib.Clipper.ZFillCallback()
PolyTree
--- PolyTree methods ---
ClipperLib.PolyTree()
ClipperLib.PolyTree.Clear()
ClipperLib.PolyTree.GetFirst()
ClipperLib.PolyTree.Total()
PolyNode
--- PolyNode methods ---
ClipperLib.PolyNode()
ClipperLib.PolyNode.ChildCount()
ClipperLib.PolyNode.Childs()
ClipperLib.PolyNode.Contour()
ClipperLib.PolyNode.GetNext()
ClipperLib.PolyNode.IsHole()
ClipperLib.PolyNode.Parent()
--- PolyNode properties ---
ClipperLib.PolyNode.IsOpen
ClipperOffset
--- ClipperOffset methods ---
ClipperLib.ClipperOffset()
ClipperLib.ClipperOffset.AddPath()
ClipperLib.ClipperOffset.AddPaths()
ClipperLib.ClipperOffset.Clear()
ClipperLib.ClipperOffset.Execute()
--- ClipperOffset properties ---
ClipperLib.ClipperOffset.ArcTolerance
ClipperLib.ClipperOffset.MiterLimit
Rounding
JS
--- JS methods ---
ClipperLib.JS.AreaOfPolygon()
ClipperLib.JS.AreaOfPolygons()
ClipperLib.JS.BoundsOfPath()
ClipperLib.JS.BoundsOfPaths()
ClipperLib.JS.Clone()
ClipperLib.JS.Clean()
ClipperLib.JS.Lighten()
ClipperLib.JS.PerimeterOfPath()
ClipperLib.JS.PerimeterOfPaths()
ClipperLib.JS.ScaleDownPath()
ClipperLib.JS.ScaleDownPaths()
ClipperLib.JS.ScaleUpPath()
ClipperLib.JS.ScaleUpPaths()
ClipperLib.JS.PolyTreeToExPolygons()
ClipperLib.JS.ExPolygonsToPaths()
Copyright
下面简单记录一下使用方法:
Clipper最实用的就对多图形之间的剪裁功能。
var subj_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 clip_paths = [[{X:50,Y:50},{X:150,Y:50},{X:150,Y:150},{X:50,Y:150}],
[{X:60,Y:60},{X:60,Y:140},{X:140,Y:140},{X:140,Y:60}]];
var scale = 100;
ClipperLib.JS.ScaleUpPaths(subj_paths, scale);
ClipperLib.JS.ScaleUpPaths(clip_paths, scale);
var cpr = new ClipperLib.Clipper();
cpr.AddPaths(subj_paths, ClipperLib.PolyType.ptSubject, true);
cpr.AddPaths(clip_paths, ClipperLib.PolyType.ptClip, true);
var subject_fillType = ClipperLib.PolyFillType.pftNonZero;
var clip_fillType = ClipperLib.PolyFillType.pftNonZero;
var clipTypes = [ClipperLib.ClipType.ctUnion, ClipperLib.ClipType.ctDifference, ClipperLib.ClipType.ctXor,
ClipperLib.ClipType.ctIntersection];
var clipTypesTexts = "Union, Difference, Xor, Intersection";
var solution_paths, svg, cont = document.getElementById('svgcontainer');
var i;
for(i = 0; i < clipTypes.length; i++) {
solution_paths = new ClipperLib.Paths();
cpr.Execute(clipTypes[i], solution_paths, subject_fillType, clip_fillType);
console.log(JSON.stringify(solution_paths));
}
//最终得到的裁剪结果集
for(i2 = 0; i2 < solution_paths.length; i2++) {
for(j = 0; j < solution_paths[i2].length; j++) {
x = solution_paths[i2][j].X / scale;
y = solution_paths[i2][j].Y / scale;
}
}
关于clipTypes的说明:
---------------------
作者:fsgn