Kinetic.Polygon 不会自动计算最小/最大或宽度/高度。
但是您可以轻松地进行这些计算并让您的多边形报告这些值。
这是一个由红色边界框包含的 kinetic.polygon。
边界框是使用添加到多边形的最小/最大、宽度/高度属性定义的。
首先，当给定 myPolygon.getPoints 时，此代码返回 min、max、width、height。
function getPolyBounds(points){
var minX=100000;
var minY=100000;
var maxX=-100000;
var maxY=-100000;
for(var i=0;i<points.length;i++){
var pt=points[i];
if(pt.x<minX){minX=pt.x;}
if(pt.y<minY){minY=pt.y;}
if(pt.x>maxX){maxX=pt.x;}
if(pt.y>maxY){maxY=pt.y;}
}
return({minX:minX,minY:minY,maxX:maxX,maxY:maxY});
}
您可以向动力学多边形添加方法以返回 minX 和 minY。
poly.bounds=getPolyBounds(poly.getPoints());
poly.minX=function(){return(this.getX()+this.bounds.minX-this.getStrokeWidth());};
poly.minY=function(){return(this.getY()+this.bounds.minY-this.getStrokeWidth());};
您可以向动力学多边形添加属性以获取宽度和高度。
poly.bounds=getPolyBounds(poly.getPoints());
poly.width=poly.bounds.maxX-poly.bounds.minX+poly.getStrokeWidth()*2;
poly.height=poly.bounds.maxY-poly.bounds.minY+poly.getStrokeWidth()*2;
[加法：寻找其他形状的界限]
线：（实际上是一条折线）：与多边形相同的解决方案（获取所有点的最小值/最大值）
所有矩形形状（矩形、图像、文本、精灵）：minX/minY 始终是 getX/getY。
圆：minX=getX-getRadius，minY=getY-getRadius
曲线（样条曲线、斑点）可以通过获取所有 blob.getPoints() 的最小值/最大值来近似。
[加法：寻找旋转形状的界限]
要获得旋转形状的新边界，请计算原始点的旋转位置并使用通常的边界方法（上图）。
此代码将获取已围绕其枢轴点旋转指定弧度角的任何点的 newXY：
// calculate the distance from the pivot point to the original point
var dx = originalPoint.x - pivotpoint.x;
var dy = originalPoint.y - pivotpoint.y;
var radius = Math.sqrt(dx*dx+dy*dy);
// calculate the unrotated radian angle
var originalAngle=Math.atan2(dy,dx);
// the new angle is the sum of the original angle and rotation angle
var radianAngle+=originalAngle;
// calculate where the original point has been rotated to
var newX = originalPoint.x + radius * Math.cos(radianAngle);
var newY = originalPoint.y + radius * Math.sin(radianAngle);
[补充：找到更精确的曲线边界]
通过沿曲线绘制许多点并找到它们的最小值/最大值，可以得到更精确的曲线边界框。
此代码将获得构成曲线的 XY 点。在这些公式中，T 是沿曲线的区间，其中 T=0.00 是曲线的起点，T=1.00 是曲线的终点。
// quadratic bezier: T is 0-1
function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x;
var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y;
return( {x:x,y:y} );
}
// cubic bezier T is 0-1
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
return({x:x,y:y});
}
// cubic helper formula at T distance
function CubicN(pct, a,b,c,d) {
var t2 = pct * pct;
var t3 = t2 * pct;
return a + (-a * 3 + pct * (3 * a - a * pct)) * pct
+ (3 * b + pct * (-6 * b + b * 3 * pct)) * pct
+ (c * 3 - c * 3 * pct) * t2
+ d * t3;
}
这是多边形边界的代码和小提琴：http: //jsfiddle.net/m1erickson/SYp5j/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
function getPolyBounds(points){
var minX=100000;
var minY=100000;
var maxX=-100000;
var maxY=-100000;
for(var i=0;i<points.length;i++){
var pt=points[i];
if(pt.x<minX){minX=pt.x;}
if(pt.y<minY){minY=pt.y;}
if(pt.x>maxX){maxX=pt.x;}
if(pt.y>maxY){maxY=pt.y;}
}
return({minX:minX,minY:minY,maxX:maxX,maxY:maxY});
}
function newPoly(polypoints){
var poly = new Kinetic.Polygon({
points:polypoints,
x: 25,
y: 25,
fill: 'skyblue',
stroke: 'lightgray',
strokeWidth: 3
});
poly.bounds=getPolyBounds(poly.getPoints());
poly.minX=function(){return(this.getX()+this.bounds.minX-this.getStrokeWidth());};
poly.minY=function(){return(this.getY()+this.bounds.minY-this.getStrokeWidth());};
poly.width=poly.bounds.maxX-poly.bounds.minX+poly.getStrokeWidth()*2;
poly.height=poly.bounds.maxY-poly.bounds.minY+poly.getStrokeWidth()*2;
layer.add(poly);
layer.draw();
return(poly);
}
// test
var polypoints=[];
polypoints.push({x:20,y:50});
polypoints.push({x:120,y:75});
polypoints.push({x:220,y:50});
polypoints.push({x:120,y:200});
polypoints.push({x:20,y:50});
//
var myPoly=newPoly(polypoints);
//
var boundary=new Kinetic.Rect({
x:myPoly.minX(),
y:myPoly.minY(),
width:myPoly.width,
height:myPoly.height,
stroke:"red",
strokeWidth:0.50
});
layer.add(boundary);
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<button id="rotateBtn">rotate</button>
<div id="container"></div>
</body>
</html>
