如何確定blob的旋轉和縮放後運動的x和y

Question

我正在使用Kinecticjs v5.0.1「kinect.line」（blob），有沒有一種方法來確定新的x，y點後的組組已縮放和旋轉？

我需要將文本與旋轉的斑點對齊 - 但是，如果我使文本成爲組的一部分，它也會旋轉。

我想要做的是確定旋轉blob的新x，y點並將文本移動到該位置，而不旋轉。

Answer 1

縮放和旋轉斑點的邊界框沒有Kinetic.Blob屬性。

找到縮放旋轉Kinetic.Blob的邊界框很複雜。

下面是步驟...

第一：獲得三次貝塞爾曲線組成的blob的控制點

• 團塊實際上是一個閉合的一系列立方貝塞爾曲線。

• blob的起點是blob.getPoints（）中的前2個元素。

• 每條貝塞爾曲線的控制點位於blob.getTensionPoints（）;

• 這些曲線是未轉換的BLOB（不結垢，無旋轉）

二：

• 步行沿着每一條曲線採用：獲取未轉換的BLOB的邊框立方貝塞爾曲線的公式。

• 確定該組曲線的最小-X/Y和最大-X/Y。

• 這些最小/最大X，Y是blob邊界框，如果blob沒有縮放和旋轉。

第三：縮放和旋轉的X/Y點

• 動力學使用的變換矩陣來跟蹤任何形狀如何縮放和旋轉。

• 變換矩陣是一個確定點被旋轉和縮放後的X/Y的數學方法。

• 使用var matrix = blob.getAbsoluteTransform（）獲取blob的變換矩陣。

• 使用blob.getTransform（）獲取邊界框角點的縮放/旋轉XY。getMatrix（）其中X，Y是您在第二步中計算出的未轉換的XY。

下面是一些有用的代碼，你拼湊來實現你的結果

此代碼將得到Kinetic.Blob的控制點，並繪製在畫布上

var points=blob.getPoints(); 
var tensionPoints=blob.getTensionPoints(); 
var ctx=layer.getContext()._context; 
var x=blob.getX(); 
var y=blob.getY(); 

ctx.save(); 
ctx.beginPath(); 
ctx.moveTo(points[0]+x,points[1]+y); 
for(var i=0;i<tensionPoints.length-2;i+=6){ 
    ctx.bezierCurveTo(
     tensionPoints[i+0]+x,tensionPoints[i+1]+y, 
     tensionPoints[i+2]+x,tensionPoints[i+3]+y, 
     tensionPoints[i+4]+x,tensionPoints[i+5]+y 
    ); 
} 
ctx.lineWidth=5; 
ctx.strokeStyle="red"; 
ctx.stroke(); 
ctx.restore(); 

此實用程序將走一個三次貝塞爾曲線並沿該曲線返回XY點

在該實用程序：

• T = 0.00將返回該曲線的開始點的XY，
• T = 1.00將返回曲線的終點的XY，
• 遞增Ť由0.01通常會沿曲線得到XY的足夠的樣本

獲取XY沿三次Bezier曲線：

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(T, a,b,c,d) { 
    var t2 = T * T; 
    var t3 = t2 * T; 
    return a + (-a * 3 + T * (3 * a - a * T)) * T 
    + (3 * b + T * (-6 * b + b * 3 * T)) * T 
    + (c * 3 - c * 3 * T) * t2 
    + d * t3; 
} 

該實用程序將原始XY轉換爲縮放/旋轉XY使用變換矩陣

// usage: var XY=tmPoint(trx.getMatrix(),oldX,oldY); 

var trx=blob.getTransform(); 
var XY=tmPoint(trx.getMatrix(),oldX,oldY); 

function tmPoint(m, x, y){ 
    return({ 
    x:x*m[0] + y*m[2] + m[4], 
    y:x*m[1] + y*m[3] + m[5] 
    }); 
}