克利珀斯

克利珀斯 抽象层( 简化 API)

这个图书馆的目标是消除复杂性,为克利珀尔建立一个整体的更清洁的JavaScript平面API.

当使用此 API 一个类时, 形状 被使用 。 形状是一组所有集体关闭或开放的路径. 有孔的形状被定义为多条闭路道,其中轮廓为顺时针而孔为逆时针. 形状有多种功能,可以用来计算复杂的布尔操作,例如从一个简单的调用.

接下来的两个代码示例显示在剪接机和ClipperJS中有一个简单的布尔操作. 两者都使用两个预先定义的路径

const subjectPaths = [[{ X: 30, Y: 30 }, { X: 10, Y: 30 }, { X: 10, Y: 10 }, { X: 30, Y: 10 }]];
const clipPaths = [[{ X: 20, Y: 20 }, { X: 0, Y: 20 }, { X: 0, Y:0 }, { X: 20, Y: 0 }]];

剪辑机中的布尔交叉操作是这样的

const result = new ClipperLib.Paths();
const clipper = new ClipperLib.Clipper();
clipper.AddPaths(subjectPaths, ClipperLib.PolyType.ptSubject, true);
clipper.AddPaths(clipPaths, ClipperLib.PolyType.ptClip, true);
clipper.Execute(ClipperLib.ClipType.ctIntersection, result);

// result = [[{ X: 20, Y: 20 }, { X: 10, Y: 20 }, { X: 10, Y: 10 }, { X: 20, Y: 10 }]]

在克利珀斯

const subject = new Shape(subjectPaths, true);
const clip = new Shape(subjectPaths, true);

const result = subject.intersect(clip);

// result = { closed: true, paths: [[{ X: 20, Y: 20 }, { X: 10, Y: 20 }, { X: 10, Y: 10 }, { X: 20, Y: 10 }]] }

使用量

使用 JSPM( ECMAScript / ES6 模块)

安装库.

jspm install github:Doodle3D/clipper-js

包括图书馆.

import Shape from 'Doodle3D/clipper-js';

使用国家预防机制(共同JS模块)

安装库.

npm install @doodle3d/clipper-js --save

包括图书馆.

var Shape = require('clipper-js');

API 密码

形状

形状接受3个可选参数, paths, (中文(简体) ), closed 财务报告和审定财务报表 capitalConversion。 。 。 . paths 也可以用大写和小写来形容 克利珀顿仅使用大写属性,输入时使用小写 captalConversion 需要设置为 true。 。 。 .

new Shape([ paths = [], closed = true, capitalConversion = false, integerConversion = false, removeDuplicates = false ])

paths = [...[...{ X: Number, Y: Number }] || [...[...{ x: Number, y: Number }]
paths = Array
closed = Bool
capitalConversion = Bool
removeDuplicates = Bool

• 路径: 构成形状的路径
• 关闭:形状是多边形或行
• 大写转换:将小写x和y转换为大写X和Y
• 资本转换:剪接器只与接口工作, 有时输入在浮点数剪接器中失败
• 删除重复: 当数据集出现重复点时, 剪辑器有时会失败, 此参数过滤出所有重复点

Note: due to the nature of Clipper, some functions are destructive and some are non-destructive.

布尔操作: 联盟

Shape = Shape.union( clipShape: Shape )

• 剪辑形状:布尔操作的剪辑

布尔操作: 差异

Shape = Shape.difference( clipShape: Shape )

• 剪辑形状:布尔操作的剪辑

布尔操作:相交

Shape = Shape.intersect( clipShape: Shape )

• 剪辑形状:布尔操作的剪辑

布尔操作: Xor

Shape = Shape.xor( clipShape: Shape )

• 剪辑形状:布尔操作的剪辑

折减

Shape = Shape.offset( offset: Number, options: {
  jointType = 'jtSquare',
  endType = 'etClosedPolygon',
  miterLimit = 2.0,
  roundPrecision = 0.25
} )

• 偏移: 从布尔操作中剪去
• 选项:带有默认值的可选参数
  • 联合类型页:1
  • 尾端类型页:1
  • 密特利米特语Name: mitter 限制
  • 圆精度:弧容忍度

沿常态抵消形状.

缩放

Shape.scaleUp( factor: Number )

以因数来缩放.

Note: destructive

缩放

Shape.scaleDown( factor: Number )

以因数来缩放.

Note: destructive

第一点

{ X: Number, Y: Number } || { x: Number, y: Number } = Shape.firstPoint([ capitalConversion: false ])

• 大写转换:将大写X和Y转换为小写x和y.

返回第一个点的位置.

最后一点

{ X: Number, Y: Number } || { x: Number, y: Number } = Shape.lastPoint([ capitalConversion: false ])

• 大写转换:将大写X和Y转换为小写x和y.

返回最后一个点的位置.

面积共计

Number = Shape.totalArea()

返回形状的总面积.

区域

Number = Shape.area( index: Int )

• 索引:子形状的索引

返回子形状的区域(如果逆时针明智,则为负).

领域

[...Number] = Shape.areas()

返回所有子形状的区域.

共计

Number = Shape.totalPerimeter()

返回形状的总周边.

周边

Number = Shape.perimeter( index: Int )

• 索引:子形状的索引

返回子形状的周边.

周长

[...Number] = Shape.perimeters()

返回所有子形状的周边阵列.

反转

Shape.reverse()

倒转所有子形状的顺序.

三角形区域

Shape.tresholdArea( minArea: Number )

• 最小面积

从形状中去除所有较小的子形状.

联合

Shape.join( shape )

以给定的形状加入形状.

Note: destructive

克隆

Shape = Shape.clone()

返回形状副本.

形状边界

{
  left: Int,
  right: Int,
  top: Int,
  bottom: Int,
  width: Int,
  height: Int,
  size: Int
} = Shape.shapeBounds()

返回形状的边框.

路径边界

{
  left: Int,
  right: Int,
  top: Int,
  bottom: Int,
  width: Int,
  height: Int,
  size: Int
} = Shape.pathBounds( index: Int )

返回子形状的边框.

干净

Shape = Shape.clean( cleanDelta: Number )

方向

Bool = Shape.orientation( index: Int )

返回子形状的方向。 如果顺时针,假的,如果逆时钟明智.

在形状中点

Bool = Shape.pointInShape( { X: Number, Y: Number }, [ capitalConversion = false, integerConversion = false ] )

• 点: 用于命中检测的位置
• 大写转换:将小写x和y转换为大写X和Y
• 整数转换:将点转换为入点

如果点为形状,则返回.

路径中的点

Bool = Shape.pointInPath( index: Int, { X: Number, Y: Number }, [ capitalConversion = false, integerConversion = false ] )

• 点: 用于命中检测的位置
• 索引:子形状的索引
• 大写转换:将小写x和y转换为大写X和Y
• 整数转换:将点转换为入点

如果点处于子形状,则返回.

修正方向

Shape.fixOrientation()

当给定有孔的路径时,外观必须顺时针,孔必须逆时针. 试着修正方向.

Note: destructive

简化

Shape = Shape.simplify(fillType: String)

使用填充类型来简化形状。 只为闭塞外形而活.

撕裂形状

[...Shape] = Shape.seperateShapes()

当使用联盟操作时,可以创建多个形状。 斯珀特形状将这些形状分解为分解实例. 所有形状都保持了洞口.

回合

Shape = Shape.round()

返回新形状实例, 将所有点四舍五入到整数 .

删除复制件

Shape = Shape.removeDuplicates()

返回新形状实例, 删除所有重复点 .

下图

[...[...{ x: Number, y: Number }]] = Shape.mapToLower()

返回小写 x 和 y 的路径数组.