记录下对Clipper.js的使用

首先在github上可以直接下载到Clipper的源码，是无压缩版的：https://github.com/Delapouite/JsClipper。

在使用Clipper前先看看Clipper的Demo展示：

Javascript Clipper Main Demo

Clipper 6 Info and Examples

接着就是Clipper的官网： Javascript Clipper download | SourceForge.net

API的URL：https://sourceforge.net/p/jsclipper/wiki/documentation/

Clipper的API方法列表：

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的说明：

记录下对Clipper.js的使用相关推荐

总结下用Vue.js和webpack遇到的问题
这段时间用vue.js+webpack做一个单页应用的demo,第一次尝试模块化,技术水平有限,学习不够深入,总是遇到各种问题,所谓前事不忘后事之师,so记录下. 1.ES6匿名函数里面this值结 ...
记录下：订单模块初步完成
哇,好久没有记录自己写代码的总结了,今天记录下,点赞,订阅,转发,感谢各位老铁的支持与厚爱. 电商项目的总结给你七年时间,你会干什么?我想不出我会干什么耶,我只有确定的一件事情就是我会全国各地跑一遍 ...
记录下项目中常用到的JavaScript/JQuery代码一（大量实例）
一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而 ...
记录下 QT Linux 静态编译遇到的坑
记录下 QT Linux 静态编译遇到的坑记录下 QT Linux 静态编译遇到的坑 - 貘吃馍的日志 - 网易博客 http://qbaok.blog.163.com/blog/static/10 ...
记录下mitmproxy做代理，实现淘宝登陆
2019年1月1日我要上班很慌啊..这天气应该躺在被窝里美滋滋的睡觉.今天上班不知道干啥,闲来无事,记录下之前使用mitmproxy实现淘宝登陆.不多说,分割线-------------------- ...
【 Linux 】记录下第一次使linux系统遇到的问题（系统安装、配置查看、搜狗输入法安装）
作为一个有梦想的技术人,无论你是搞硬件的还是搞软件的,相信大家都有一颗探索的心,而Linux操作系统就不该成为一种神秘的系统,于是作为小白的我也开始玩一玩linux系统了,系统的安装是十分的简单,下载 ...
Ubuntu下安装Node.js
2019独角兽企业重金招聘Python工程师标准>>> ####Ubuntu下安装Node.js 下载Node.js 解压node-v7.9.0-linux-x64.tar.xz 方 ...
fiddler https 您的连接不是私密连接解决方法（不明原理但是照着做成功了，记录下）
fiddler https 您的连接不是私密连接解决方法(不明原理但是照着做成功了,记录下) 参考文章: (1)fiddler https 您的连接不是私密连接解决方法(不明原理但是照着做成功了, ...
NetFlow是一种数据交换方式，提供网络流量的会话级视图，记录下每个TCP/IP事务的信息...
NetFlow是一种数据交换方式,提供网络流量的会话级视图,记录下每个TCP/IP事务的信息.也许它不能象tcpdump那样提供网络流量的完整记录,但是当汇集起来时,它更加易于管理和易读.Netflo ...

记录下对Clipper.js的使用

Table of Contents

记录下对Clipper.js的使用相关推荐

最新文章

热门文章