Snap.path.bezierBBox(…)
实用方法返回一个给定的三次贝塞尔曲线的边界框
参数
p1x
数值。曲线第1个点的x位置。p1y
数值。曲线第1个点的y位置。c1x
数值。曲线第1个锚的x位置。c1y
数值。曲线第1个锚的y位置。c2x
数值。曲线第2个锚的x位置。c2y
数值。曲线第2个锚的y位置。p2x
数值。曲线第2个点的x位置。p2y
数值。曲线第2个点的y位置。
或者
bez
数组。包含6个点的贝塞尔曲线数组。
返回值
对象。边界框。
{
'x': 数值。盒子左上点的x坐标。
'y': 数值。盒子左上点的y坐标。
'x2': 数值。盒子右下点的x坐标。
'y2': 数值。盒子右下点的y坐标。
'width': 数值。盒子的宽度。
'height': 数值。盒子的高度。
}
使用
var bound1 = Snap.path.bezierBBox(20,80, 40,40, 60,40, 80,80);
var bound2 = Snap.path.bezierBBox([20,80, 40,40, 60,40, 80,80]);
console.dir(bound1);
console.dir(bound2);
Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)
实用方法返回给定曲线上特定位置的点坐标。
参数
p1x
数值。曲线第1个点的x位置。p1y
数值。曲线第1个点的y位置。c1x
数值。曲线第1个锚的x位置。c1y
数值。曲线第1个锚的y位置。c2x
数值。曲线第2个锚的x位置。c2y
数值。曲线第2个锚的y位置。p2x
数值。曲线第2个点的x位置。p2y
数值。曲线第2个点的y位置。pt2y
数值。曲线上的位置(0~1)。
返回值
对象。如下格式的点信息:
{
'x': 数值。 点的x坐标。
'y': 数值。 点的y坐标。
'm': {
'x': 数值。 左侧锚点的x坐标。
'y': 数值。 左侧锚点的y坐标。
},
'n': {
'x': 数值。 右侧锚点的x坐标。
'y': 数值。 右侧锚点的y坐标。
},
'start': {
'x': 数值。 曲线开始的x坐标。
'y': 数值。 曲线开始的y坐标。
},
'end': {
'x': 数值。 曲线结束的x坐标。
'y': 数值。 曲线结束的y坐标。
},
'alpha': 数值。 改点在曲线上的切线角度。
}
使用
var dot = Snap.path.findDotsAtSegment(20,80, 40,40, 60,40, 80,80, 0.5);
console.dir(dot);
Snap.path.getBBox(path)
返回给定路径边界盒子的实用方法。
参数
* path
字符串。路径字符串。
返回值
对象。边界盒子。
{
'x': 数值。 盒子左上点的x坐标。
'y': 数值。 盒子左上点的y坐标。
'x2': 数值。 盒子右下点的x坐标。
'y2': 数值。 盒子右下点的y坐标。
'width': 数值。 盒子的宽度。
'height': 数值。 盒子的高度。
}
使用
var bound = Snap.path.getBBox("M10,10L90,90");
console.dir(bound);
Snap.path.getPointAtLength(path, length)
返回给定路径上给定长度的点坐标。可参考Element.getPointAtLength
参数
path
字符串。SVG路径字符串。length
数值。长度。单位为像素,起始于路径的开头,但不包括non-rendering
的跳跃。
返回值
对象。表示点。
{
'x': 数值。 x坐标。
'y': 数值。 y坐标。
'alpha': 数值。 该点的切线角度。
}
使用
var p = Snap.path.getPointAtLength("M10 10L90 90", 20);
console.dir(p);
Snap.path.getSubpath(path, from, to)
返回给定路径上指定起始结束长度上的子路径。另可参见Element.getSubpath.
参数
path
字符串。SVG路径字符串。from
数值。表长度,以像素为单位,从路径起点到该段的开始to
数值。表长度,以像素为单位,从路径起点到该段的终点
返回值
字符串。定义该段路径的字符串。
使用
console.log(Snap.path.getSubpath("M10 10L90 90", 20, 80));
// 结果是:
// M24.139,24.139C35.874,35.874,52.807,52.807,66.565,66.565
Snap.path.getTotalLength(path)
以像素为单位,返回路径的长度(仅适用于path元素)。
参数
path
字符串。SVG路径字符串。
返回值
数值。长度值。
使用
console.log(Snap.path.getTotalLength("M10 10L90 90"));
// 结果是:
// 113.1370849609375
Snap.path.intersection(path1, path2)
实用方法。查找两条路径的相交。
参数
path1
字符串。路径字符串。path2
字符串。路径字符串。
返回值
数组。相交点。
[{
'x': 数值。 点的x坐标。
'y': 数值。 点的y坐标。
't1': 数值。 path1路径的片断t值(也就是位置0~1)。
't2': 数值。 path2路径的片断t值。
'segment1': 数值。 path1路径片断的顺序号。
'segment2': 数值。 path2路径片断的顺序号。
'bez1': 数组。 path1路径片断的贝塞尔曲线的8坐标表示。
'bez2': 数组。 path2路径片断的贝塞尔曲线的8坐标表示。
}]
使用
var path1 = "M10,10L90,90";
var path2 = "M10,50,L90,50";
var inters = Snap.path.intersection(path1, path2);
console.log(inters[0]);
Snap.path.isBBoxIntersect(bbox1, bbox2)
两个盒子是否相交。如果相交则返回true.
参数
bbox1
字符串。第1个盒子。bbox2
字符串。第2个盒子。
返回值
布尔值。相交则返回true.
使用
var svg = Snap("#svg");
var c1 = svg.paper.circle(50,50,40).attr({
fill: "red"
}), c2 = svg.paper.circle(100,50,40).attr({
fill: "green"
});
var b1 = c1.getBBox(), b2 = c2.getBBox();
var isInter = Snap.path.isBBoxIntersect(b1, b2);
console.log(isInter); // true
Snap.path.isPointInside(path, x, y)
实用方法。给定的点是否在闭合路径的内部。
注意:
fill
模式不影响这个方法的结果。
参数
path
字符串。路径字符串。x
数值。点的x.y
数值。点的y.
返回值
布尔值。如果点在路径中,则返回true
.
使用
var path = "m32,118c0,0 21,-100 78,-94c57,6 -78,94 -78,94z";
var is50x50 = Snap.path.isPointInside(path, 50, 50),
is80x80 = Snap.path.isPointInside(path, 80, 80);
console.log([is50x50, is80x80].join()); // false, true
Snap.path.isPointInsideBBox(bbox, x, y)
实用方法。给定的点是否在盒子的内部。
参数
bbox
字符串。边界盒子。x
数值。点的x坐标。y
数值。点的y坐标。
返回值
布尔值。如果点在盒子中,则返回true.
Snap.path.map(path, matrix)
把路径字符串按照矩阵转换。
参数
path
字符串。路径字符串。matrix
对象。矩阵。
返回值
~~字符串。转换后的路径字符串。~~
上面是官方表述。但,经过自己的测试,发现返回的是数组。
使用
var path = 'M10,10L90,90', matrix = new Snap.Matrix(1,0,0,1,10,10);
var pathTransform = Snap.path.map(path, matrix);
if (window.console) {
console.log(pathTransform); // 结果是:[Array[3], Array[7], toString: function]
console.log(pathTransform.toString()); // 结果是:M20,20C20,20,100,100,100,100
}
Snap.path.toAbsolute(path)
转换路径坐标为绝对值。
参数
path
字符串。路径字符串。
返回值
~~字符串。路径字符串。~~
以上为官方说明。可能是更新缓慢原因。实际自己测试,返回值是路径数组。
使用
var path = "M10,10L90,90";
var absolute = Snap.path.toAbsolute(path);
console.log(absolute); // [Array[3], Array[3], toString: function]
console.log(absolute.toString()); // "M10,10L90,90"
Snap.path.toCubic(pathString)
实用方法。转换一个路径为一个全部路径段采用三次贝塞尔曲线表示的新路径
参数
pathString
字符串或数组。路径字符串或段数组。
返回值
数组。路径段数组。
使用
var pathString = "m32,118c0,0 21,-100 78,-94c57,6 -78,94 -78,94z";
var cubic = Snap.path.toCubic(pathString);
console.log(cubic.toString());
// 结果是:
// M32,118C32,118,53,18,110,24C167,30,32,118,32,118C32,118,32,118,32,118
Snap.path.toRelative(path)
转换路径坐标为相对值。(一些路径类型字母的大小写表示转换)
参数
path
字符串。路径字符串。
返回值
~~字符串。路径字符串。~~
以上为官方说明。可能是更新缓慢原因。实际自己测试,返回值是路径数组。
使用
var path = "M10,10L90,90";
var relative = Snap.path.toRelative(path);
console.log(relative); // Array[2]
console.log(relative.toString()); "M10,10l80,80"