如何将六角网格变成压扁的六角网格？

Question

我有这些用于六角网格的功能。它们非常适合常规的六角网格。这些功能对于压扁的六角网格有什么作用。我所说的挤压六角网格是指每个六角的宽度大于高度的网格。

coordinates_to_pixel = function(x, y) {
    var pixel_x = s_hex_size * 3/2 * x
    var pixel_y = s_hex_size * Math.sqrt(3) * (y + x/2)
    return { x: pixel_x, y: pixel_y }
}

pixel_to_coordinates = function(x, y) {
    var q = 2/3 * x / s_hex_size
    var r = (1/3 * Math.sqrt(3) * y - 1/3 * x) / s_hex_size
    var cube = convert_axial_to_cube_coordinates(q,r)
    var round = round_cube_coordinates(cube.x, cube.y, cube.z)
    var axial = convert_cube_to_axial_coordinates(round.x, round.y, round.z)
    return { x:axial.x, y:axial.y }
}

hex_points = function(x, y) {
    var pixel = coordinates_to_pixel(x,y)

    var points = ''
    for (var i = 0; i < 6; i++) {
        var angle = 2 * Math.PI / 6 * i

        var point_x = (hex_size * Math.cos(angle)) + pixel.x + canvas_width/2
        var point_y = (hex_size * Math.sin(angle)) + pixel.y + canvas_height/2

        if (i != 0) { points = points + ' '; }
        points = points + point_x.toString() + ',' + point_y.toString()
    }
    return points
})

这是我所说的压扁六角网格的图像。 hex grid image

这里是转换和舍入函数。

convert_axial_to_cube_coordinates = function(q,r) {
    return {
        x: q,
        y: -1 * q - r,
        z: r
    }
}


convert_cube_to_axial_coordinates = function(x,y,z) {
    return {x: x, y: z}
}


round_cube_coordinates = function(x,y,z) {
    var rx = Math.round(x)
    var ry = Math.round(y)
    var rz = Math.round(z)

    var x_diff = Math.abs(rx - x)
    var y_diff = Math.abs(ry - y)
    var z_diff = Math.abs(rz - z)

    if (x_diff > y_diff && x_diff > z_diff) {
        rx = -1 * ry - rz
    } else if (y_diff > z_diff) {
        ry = -1 * rx - rz
    } else {
        rz = -1 * rx - ry
    }

    return {x: rx, y: ry, z: rz}
}

Answer 1

想通了。 coordinate_to_pixel 是 Math.sqrt(3) * 挤压因子。 Pixel_to_coordinates 是 Math.sqrt(3) / squish_factor。一是乘，二是除。