为锚点计算 SKSpriteNode 的质心
calculate centroid of SKSpriteNode for anchor point
我有一个 SKSpriteNode,它是一个等边三角形的图像,我想将它的锚点设置在三角形的质心,这样我就可以让它平滑旋转并保持在中心。我已经用下面的代码计算了质心,但这些位置是相对于场景的,所以我不确定如何将它转换为锚点(0 到 1 之间)的精确小数。
let XA = triangle.position.x - (triangle.size.width / 2) // left point
let XB = triangle.position.x // top point
let XC = triangle.position.x + (triangle.size.width / 2) // right point
let YA = triangle.position.y - (triangle.size.height / 2) // left point
let YB = triangle.position.y + (triangle.size.height / 2) // top point
let YC = triangle.position.y - (triangle.size.height / 2) // right point
let triCenterX = (XA + XB + XC) / 3.0
let triCenterY = (YA + YB + YC) / 3.0
let centroid = CGPointMake(triCenterX, triCenterY) // 207.0, 412.65
// triangle.anchorPoint = CGPoint(x: , y: )
我不确定我是否在正确的轨道上或从这里去哪里,也许我需要以不同的方式来做这件事?非常感谢任何帮助,谢谢。
如果我没理解错的话,这就是你现在看到的:
黄点代表三角形边界框的质心。透明的白色矩形表示三角形的边界框。黑点是等边三角形的实际质心。那么,现在,三角形的纹理正在围绕黄点旋转?对吗?
但是你想要这样的东西:
您想将纹理向上移动一点,使三角形看起来像是围绕其质心旋转的吗?
如果是这样,我通过在三角形的坐标 space 中计算三角形的 A、B 和 C 点来完成此操作,如下所示:
let xa = -triangle.size.width / 2.0
let xb = triangle.size.width / 2.0
let xc = CGFloat(0.0)
let ya = -triangle.size.height / 2.0
let yb = -triangle.size.height / 2.0
let yc = triangle.size.height / 2.0
那么根据等边三角形的质心计算公式,我计算出三角形的质心:
let centroidX = (xa + xb + xc ) / 3.0
let centroidY = (ya + yb + yc) / 3.0
let centroid = CGPoint(x: centroidX, y: centroidY)
并根据质心位置计算出新的锚点:
let anchorX = centroidX / triangle.size.width
let anchorY = centroidY / triangle.size.height
let anchor = CGPoint(x: anchorX + triangle.anchorPoint.x, y: anchorY + triangle.anchorPoint.y)
这是我用过的图片:
我有一个 SKSpriteNode,它是一个等边三角形的图像,我想将它的锚点设置在三角形的质心,这样我就可以让它平滑旋转并保持在中心。我已经用下面的代码计算了质心,但这些位置是相对于场景的,所以我不确定如何将它转换为锚点(0 到 1 之间)的精确小数。
let XA = triangle.position.x - (triangle.size.width / 2) // left point
let XB = triangle.position.x // top point
let XC = triangle.position.x + (triangle.size.width / 2) // right point
let YA = triangle.position.y - (triangle.size.height / 2) // left point
let YB = triangle.position.y + (triangle.size.height / 2) // top point
let YC = triangle.position.y - (triangle.size.height / 2) // right point
let triCenterX = (XA + XB + XC) / 3.0
let triCenterY = (YA + YB + YC) / 3.0
let centroid = CGPointMake(triCenterX, triCenterY) // 207.0, 412.65
// triangle.anchorPoint = CGPoint(x: , y: )
我不确定我是否在正确的轨道上或从这里去哪里,也许我需要以不同的方式来做这件事?非常感谢任何帮助,谢谢。
如果我没理解错的话,这就是你现在看到的:
黄点代表三角形边界框的质心。透明的白色矩形表示三角形的边界框。黑点是等边三角形的实际质心。那么,现在,三角形的纹理正在围绕黄点旋转?对吗?
但是你想要这样的东西:
您想将纹理向上移动一点,使三角形看起来像是围绕其质心旋转的吗?
如果是这样,我通过在三角形的坐标 space 中计算三角形的 A、B 和 C 点来完成此操作,如下所示:
let xa = -triangle.size.width / 2.0
let xb = triangle.size.width / 2.0
let xc = CGFloat(0.0)
let ya = -triangle.size.height / 2.0
let yb = -triangle.size.height / 2.0
let yc = triangle.size.height / 2.0
那么根据等边三角形的质心计算公式,我计算出三角形的质心:
let centroidX = (xa + xb + xc ) / 3.0
let centroidY = (ya + yb + yc) / 3.0
let centroid = CGPoint(x: centroidX, y: centroidY)
并根据质心位置计算出新的锚点:
let anchorX = centroidX / triangle.size.width
let anchorY = centroidY / triangle.size.height
let anchor = CGPoint(x: anchorX + triangle.anchorPoint.x, y: anchorY + triangle.anchorPoint.y)
这是我用过的图片: