在切圆（或椭圆）上获得分数并平衡扑克筹码

Question

我尝试显示一些免费扑克游戏（HTML/Javascript 客户端，python 服务器）游戏的筹码。 桌子中央周围有座位。 对于每个座位，我知道余弦、正弦、半径（距桌子中心的距离）和值/计数芯片数组。

我尝试在图像中的座位点切线上显示每个芯片对齐和平衡

：（我无法创建图像，所以： https://i.sstatic.net/a4Obw.png ）

现在，我编写了这段代码：

function balanced_stack( chips, cos, sin, radius ) 
{
    var html = ''

    // I receive a chips array like [ [ 100, 8 ], [ 200, 10 ], [ 500, 7 ] ]
    // so 8 chips of 100$, 10 chips of 200$ .. etc
    for(var i in chips) 
    {
        var value = chips[i][0]; // the token value
        var count = chips[i][1]; // the token count

        var m = 0; // margin for a single stack
        var left = i * 20 * sin + cos * radius;
        var top = -i * 20 * cos + sin * radius;

        for( var j=1; j<= count; j++ ) 
        {       
            html += '<img style="z-index:'+( parseInt(top) + 9999)+'; left:'+left+'px; top: '+top+'px; margin-top:'+( -2*m )+'px;" \
                            src="/images/chips/'+value+'.png" />'
            m ++;
        }

        return html
    }
}

但它不平衡且不美观。

添加：余弦和正弦可以大于 1 且小于 -1，因为桌子可能是椭圆形的

Answer 1

如果椭圆由 {a*cos(x),b*sin(x)} 定义，则正切为 {-a*sin(x),b*cos(x)}。使用将椭圆轴与桌子周围角度的正弦/余弦相结合的定义不允许您轻松提取。此外，将这个量称为 sin/cos 似乎是个坏主意，因为它们的数学定义被限制在 -1 到 +1 的范围内......

Answer 2

我想我解决了 SEngstrom 方程的切线问题。
所有切屑均沿右切线对齐。你可以在这里看到：

function( chips, cos, sin, radius ) 
{
    var html = ''

    // Considering the equation for the tangent {a*cos(x),b*cos(x)}+d*{-a*sin(x),b*cos(x)}
    var a = 1.6; // x coefficient for the ellipse
    var b = 1; // y coefficient for the ellipse


    // I receive a chips array like [ [ 100, 8 ], [ 200, 10 ], [ 500, 7 ] ], so 8 chips of 100$, 10 chips of 200$ .. etc
    for(var i in chips) 
    {
        var value = chips[i][0]; // the token value
        var count = chips[i][1]; // the token count

        var m = 0; // margin for a single stack

        var left = i * 20 * sin * a + cos * radius * a; 
        var top = -i * 20 * cos * b + sin * radius * b;

        for( var j=1; j<= count; j++ ) 
        {       
            html += '<img style="z-index:'+( parseInt(top) + 9999)+'; left:'+left+'px; top: '+top+'px; margin-top:'+( -2*m )+'px;" \
                            class="chip chip_'+value+'" src="/images/chips/'+CHIPS.COLORS[ value ]+'.png" />'
            m ++;
        }       
    }
    return html
}

但正如你所看到的，每个单个堆栈之间有一个空白区域，因为一个芯片宽度为 20px，使用常规 cos/sin 就可以了，但是在这里，每个堆栈之间的距离通过椭圆系数放大 (i * 20 * sin * a)

Answer 3

这样想：代码中 (left,top) 的第二项找到堆栈的中心。为此，您需要沿切线添加堆栈。由于堆栈是由像素宽度定义的，因此添加到中心点的项的形式可以采用 i*pxwidth*{nx,ny} 的方便形式，其中 nx 和 ny 是 (x,y) 分量归一化切向量，“i”是对各个堆栈进行计数的整数，pxwidth 是所需的像素宽度。如果 sin 和 cos 是真正的正弦/余弦，则 (-sin,cos) 已经是归一化向量，因为 sin^2+cos^2=1。

我在你的代码中不明白的是 ((20*a)-20) 等于 20*(a-1)。 a＞1的某种校正因子。 b 不对称，但 b=1 时它为零...

Answer 4

我有点盲目地尝试了解决方案，我写道：（这似乎有效）

var left = (i * ((20*a) - 20) * sin * a) + (cos * radius * a); 
var top = -(i * ((20*a) - 20) * cos * b) + (sin * radius * b);

你能解释一下为什么它有效吗？我数学很弱。

椭圆桌周围有 20 个假玩家 (a=1.6, b=1)：