Javascript KineticJS：获取图层minX、minY、宽度和高度

我有一个用Flash和ActionScript编写的应用程序。我想用canvas和KineticJS库替换flash。我遇到了一个小问题。ActionScript中有方法“getRect”（）和“getBounds”（）返回对象的最小值、最小值、宽度和高度。在我的例子中，这是图层。通过这两个函数，我得到了图层上最左边和最上面的坐标。然后我只需设置舞台的新位置，所有项目都位于最左上方

所以，我想在javascript中创建类似的东西。要获取图层上最左侧、最顶部的可见点。我必须检查上面所有的图层和形状，才能得到minX和minY

我制作了示例代码，可在此处获得：

如果形状为“多边形”，则所有坐标x、y均为0，宽度和高度均为0。我原以为x=100，y=100，宽=100，高=100

若形状是“文本”，那个么我得到形状的x，y和正确的宽度和高度——这是可以的，除非形状是旋转的。对于“Text”对象，我想得到：x=-8和y=126。而不是x=150，y=150

这是应该返回minX和minY的脚本。它不会返回minX，minY，但会将坐标打印到控制台中（使用FireBug或类似的浏览器插件）

var _le=stage.children.length；//获取子级数（阶段）
变量i，j，_le2；
对于（i=0；i<_le；++i）{
_le2=stage.children[i].children.length；//获取每层上的子级数
对于（j=0；j<_le2；++j）{
//检查图层上的所有形状
console.log（stage.children[i].children[j].getAbsolutePosition（））；
console.log（stage.children[i].children[j].getX（）+，“+stage.children[i].children[j].getY（））；
console.log（stage.children[i].children[j].getWidth（）+，“+stage.children[i].children[j].getHeight（））；
}
}

让我总结一下我的问题，我想得到minX和minY，然后设置舞台的新位置-当前位置：

舞台/层的新位置：

---

也许这样的东西已经存在了——没有计算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;

但您可以轻松地进行这些计算，并让多边形报告这些值

这是一个包含在红色边界框中的动能多边形

边界框是使用添加到多边形的最小/最大、宽度/高度属性定义的

首先，当给定myPolygon.getPoints时，此代码返回最小值、最大值、宽度和高度

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});
}

您可以向运动多边形添加属性以获得宽度和高度。

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）可以通过获取所有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;
}

下面是多边形边界的代码和小提琴：

原型
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：400px；
高度：400px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
var layer=新的动能层（）；
阶段。添加（层）；
函数getPolyBounds（点）{
var minX=100000；
var minY=100000；
var maxX=-100000；
var maxY=-100000；
对于（var i=0；iKinetic.Polygon不会自动计算最小/最大值或宽度/高度。

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;

但您可以轻松地进行这些计算，并让多边形报告这些值

这是一个包含在红色边界框中的动能多边形

边界框是使用添加到多边形的最小/最大、宽度/高度属性定义的


首先，当给定myPolygon.getPoints时，此代码返回最小值、最大值、宽度和高度

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});
}

您可以向运动多边形添加属性以获得宽度和高度。

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）可以通过获取所有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点