Гексагональная сетка с поворотом на 45 градусов

@Neon-z · Регистрация: 06.09.2010

Студворк — интернет-сервис помощи студентам

Мне нужно реализовать такую гексагональную сетку, как в приложении, только угол надо самому регулировать. В задачу входит: нарисовать эту сетку, знать координаты самой гексы и кординаты в пикселах ее центра.
Как нарисовать обычную сетку - вполне можно найти, но как сделать ее кручение по оси Х - не нашел.

Доп инфо: реализовывать буду с помощью канвы html5 и javaScript. Если есть другие Варианты - предлагайте, выслушаю (флеш не предлагать, не подходит).

@Mysterious Light · 02.07.2013, 05:39

Я правильно понимаю, что нужно создать эффект трёхмерности?
Допустим, Вы можете нарисовать обычную сетку. Такое рисование сведётся к циклу, в теле которого будет несколько раз вызываться отрисовка отрезка line(x1,y1,x2,y2) — по одной на каждую сторону.
Потом Вы мысленно наклоняете изображение. Это соответствует тому, что точка (x,y) переходит в точку (x,y/sqrt(2),z/sqrt(2)). Но хотим вывести на экран проекцию на плоскость (xy), поэтому каждую точку (x,y/sqrt(2),z/sqrt(2)) нужно спроецировать на (xy).
Если проекция прямая или косоугольная, то изображение принципиально не изменится: сплюснется по вертикали и сдвинется по горизонтали.

Вы, видимо, хотите рассмотреть следующее: каждую точку (x,y,z) соединить с фиксированной точкой (x0,y0,z0), которая лежит по другую сторону плоскости (xy), отрезком и обозначить пересечение его с плоскостью. Я не помню, как называется такой тип проекции.
Положим x0=y0=0 и z0 ~ L — размер сетки (она же конечная) или участка, который мы хотим показать.
Тогда (x,y,z) проецируется в (x*z0/(z+z0), y*z0/(z+z0)).
Итак, точке (x,y) после наклона и поворота соответствует точка (x*z0/(y/sqrt(2)+z0), y*z0/(y+z0 sqrt(2)).

Для примера приведу псевдокод (я его не тестировал)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getHexagon(cx,cy,r) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(Math.pi/3), y : cy + r*Math.sin(Math.pi/3) };
    return a;
}
function to3D(point,phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
function project(point, z0) {
    if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), point.y*z0/(point.z+z0) };
}
// возвращает точки гексагона с центром в (cx,cy) и радиусом r, поверн. на угол phi
function getHexagonRotated(cx,cy,r,z0,phi) {
    var points = getHexagon(cx,cy,r);
    for(var i=0; i<6; ++i)
        points[i] = project(to3D(points[i]));
    return points;
}

Добавлено через 6 минут
P.S. это называется центральной проекцией.

@Igor3D · 02.07.2013, 13:51

Сообщение от Neon-z

Если есть другие Варианты - предлагайте, выслушаю (флеш не предлагать, не подходит).

То есть это нам надо чего-то суетиться, предлагать, а Вы "готовы нас послушать"?

Ладно, будем считать Вы неудачно выразились, по делу:

Это просто перспективная проекция, поэтому ничего изобретать не надо, все очень банально

- создаете двумерный массив точек в плоскости XY (рисование сетки сводится к соединению точек линиями)
x. y меняются от -x_min до +x_max, z = 0

- поворачиваете все точки вокруг оси X на заданный угол alpha (напр 45 градусов)
y_new = y * cos(alpha) - z * sin(alpha)
z_new = z * cos(alpha) + y * sin(alpha)

- затем применяете перспективное преобразование
x_new = x * focal_len / (z + distance)
y_new = y * focal_len / (z + distance)

Где x_new, у_new - координаты в пикселях, а focal_len и distance - параметры перспективной камеры которые нужно определить. Проще всего задать коэффициент k, напр 4. Тогда

distance = x_max * k
focal_len = screen_width / 2 * (k - fabs(sin(alpha)))

Задавая различные "к" Вы меняете эффект перспективы (угол зрения камеры).
Ну и переводите в пиксели экрана

x_screen = x + screen_width / 2;
y_screen = screen_height / 2 - y;

@Neon-z · 02.07.2013, 14:09 **[ТС]**

Сообщение от Igor3D

То есть это нам надо чего-то суетиться, предлагать, а Вы "готовы нас послушать"? Ладно, будем считать Вы неудачно выразились,

Нет, это я к тому, что я "молодой" разработчик, и поэтому могу не знать каких-то простых вещей, которые можно использовать и будет все намного проще.

Спасибо за ответы, буду думать

@Neon-z · 05.07.2013, 11:08 **[ТС]**

Igor3D, по Вашему алгоритму я смог нарисовать гексу под углом, но как сделать, чтобы нарисовать так всю сетку?

@Mysterious Light · 05.07.2013, 21:10

Есть один артефакт, который нужно пофиксить (думаю, Вы его увидите), он связан с переходом точек через горизонт в область, которая глазом не должна видеться. Фиксится аккуратным анализом ситуации в закомментированной строке с «throw "Invisible"».

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
 
<script type="text/javascript">
/* скрипт вынес в отдельный листинг */
</script>
 
</head>
 
<body onload="DrawHexagons();">
<input type=button value=draw onclick="rotateHexagons();">
<canvas id="canvas" width="1000" height="500"></canvas>
</body>
 
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var offsetx = 200;
var offsety = 200;
 
function line(ctx, p1, p2) {
    ctx.beginPath();
    ctx.moveTo(offsetx + p1.x, offsety + p1.y);
    ctx.lineTo(offsetx + p2.x, offsety + p2.y);
    ctx.closePath();
    ctx.stroke();
}
 
function getHexagon(cx,cy,r) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(i*Math.PI/3), y : cy + r*Math.sin(i*Math.PI/3) };
    return a;
}
 
function to3D(point,phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
 
function project(point, z0) {
    // if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), y: point.y*z0/(point.z+z0) };
}
 
// возвращает точки гексагона с центром в (cx,cy) и радиусом r, поверн. на угол phi
function getHexagonRotated(cx,cy,r,z0,phi) {
    var points = getHexagon(cx,cy,r);
    for(var i=0; i<6; ++i)
        points[i] = project(to3D(points[i], phi), z0);
    return points;
}
 
function DrawHexagon(cx,cy,r,z0,phi) {
    if(cx*cy*r*z0*phi*0 !== 0) throw "Bad arguments: "+cx+" "+cy+" "+r+" "+z0+" "+phi;
    var ctx = document.getElementById("canvas").getContext('2d');
    var points = getHexagonRotated(cx,cy,r,z0,phi);
    line(ctx, points[points.length-1], points[0]);
    for(var i=1; i<points.length; ++i) {
        line(ctx, points[i-1], points[i]);
    }
}
 
var ANGLE = 0;
 
function DrawHexagons() {
    var l = 50; // размер гексагона
    var k = Math.sqrt(3);
    for(var b = -4; b < 10; ++b) // эти два цикла можно менять
        for(var a = -2-Math.floor(b/2); a < 4-Math.floor(b/2); ++a) // отрисовка сетки
            DrawHexagon(3*l*a + k*l*b*Math.cos(Math.PI/6), k*l*b*Math.sin(Math.PI/6),
                l, 200, ANGLE);
}
 
var speed = -0.01;
function rotateHexagons() {
    // очищаем канву
    document.getElementById("canvas").width *= 1;
    ANGLE += speed;
    DrawHexagons();
    setTimeout(rotateHexagons, 100);
}

@Neon-z · 05.07.2013, 22:11 **[ТС]**

Все прекрасно, гексу под углом я смогу вывести, но у меня другая проблема: я не знаю как вывести СЕТКУ под углом. В голове есть пару алгоритмов, но они такие громоздкие (типа проходить по всем гексам, спаривать точки и т.д.), что я не приступаю к реализации.

Добавлено через 56 минут
Извиняюсь, проглупил очень сильно, вопрос закрыт) Большое спасибо)

@Mysterious Light · 22.07.2013, 20:31

Постановка задачи:

Гексогональная сетка, повёрнутая относительно оси X. Реализовать выделение ячейки, на которую наведена мышь.

Идея решения: Явно переходить между двумя плоскостями, плоскостью наблюдателя/экрана и плоскостью сетки. На плоскости сетки решить задачу как на прямой.

Переход между двумя плоскостями

Из прошлых постов (#2 и #3) имеем формулы прямого перехода

$https://www.cyberforum.ru/cgi-bin/latex.cgi?x' = \frac{x z_0}{z + z_0}, \\y' = \frac{y z_0}{z + z_0}.$

Угол между плоскостями считаем фиксированным: .

$https://www.cyberforum.ru/cgi-bin/latex.cgi?x' = \frac{x z_0}{y\operatorname{tg}\varphi + z_0}, \\y' = \frac{y z_0}{y\operatorname{tg}\varphi + z_0}.$

Разрешим это уравнение относительно (x,y)

$https://www.cyberforum.ru/cgi-bin/latex.cgi?x = \frac{x' z_0}{z_0 - y'\operatorname{tg}\varphi}, \\y = \frac{y' z_0}{z_0 - y'\operatorname{tg}\varphi}$

Это формула обратного перехода.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* file rotX.js */
 
// 2D -> 3D
function to3D(point, phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
 
// 3D -> 2D
function project(point, z0) {
    // if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), y: point.y*z0/(point.z+z0) };
}
 
// 2D -> 3D
function _project(point, z0, phi) {
    var k = - z0 / (point.y*Math.tan(phi) - z0);
    return {
        x: point.x * k,
        y: point.y * k,
        z: point.y * k * Math.tan(phi)
    };
}
 
// 3D -> 2D
function from3D(point) {
    return {
        x: point.x,
        y: Math.sqrt(point.y*point.y + point.z*point.z) * (point.y>0 ? 1 : -1)
    };
}
 
// returns two (isomorphic) transformations 2D <-> 2D
function getTransformations(z0, phi) {
    return [
        function(point){ return project(to3D(point,phi),z0); },
        function(point){ return from3D(_project(point,z0,phi)); }
    ];
}

Поиск гексы по точке

Для удобной работы введём ещё одну координатную сетку (u,v), которая проходит через середины трёх гекс.
Свяжем её координаты с исходными:

JavaScript
1
2
3
4
function getHX(u,v) { return 3*l*v+3.0*l*u/2; }
function getHY(u,v) { return Math.sqrt(3)*l*u/2; }
function getHU(x,y) { return 2*y/l/Math.sqrt(3); }
function getHV(x,y) { return (x-y*Math.sqrt(3)) / (3*l); }

См. рисонок во вложении.
В первом приближении можно сказать, что косокоординатный номер гексы (round(getHU(x,y)),round(getHV(x,y))).
Во втором приближении можно рассмотреть шесть ближайших соседей первого приближения и найти, к какой гексе (к центру) ближе всего рассматриваемая точка.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function getHex(p) {
    var u  = Math.round(getHU(p.x, p.y)),
        v  = Math.round(getHV(p.x, p.y)),
        x0 = getHX(u,v)
        y0 = getHY(u,v);
    // центры соседних гекс образуют гексу, повёрнутую на pi/6 относительно гекс сетки.
    var ngbs = getHexagonRot(x0,y0,l*Math.sqrt(3),Math.PI/6); ngbs[ngbs.length] = { x: x0, y: y0};
    ngbs.sort( function(a,b) {
        return (a.x-p.x)*(a.x-p.x) + (a.y-p.y)*(a.y-p.y) - (b.x-p.x)*(b.x-p.x) - (b.y-p.y)*(b.y-p.y);
        } );
    return ngbs[0];
}

Каркас программы

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(function() {
    var phi = -0.1;
    var z0 = 100;
    var l = 50;
    var transforms = getTransformations(z0, phi);
    var A = transforms[0], B = transforms[1];
    
    var getContext = function(){
        return document.getElementById("canvas").getContext('2d');
    };
    var ctx = null;
    
    function getMousePoint(event) { /* ... */ }
    
    function drawHex(cx, cy, r) {
        var points = getHexagon(cx, cy, r).map(A);
        if(!ctx) ctx = getContext();
        line(ctx, points[points.length-1], points[0]);
        //console.log(points[0].x);
        for(var i=1; i<points.length; ++i)
            line(ctx, points[i-1], points[i]);
    }
    
    // a — полуширина сетки
    // b — полувысота сетки
    function draw(a, b) {
        var k = Math.sqrt(3);
        var um = Math.round(2*b/k/l), vm = Math.round(a/3/l);
        if(!ctx) ctx = getContext();
        for(var u = -um; u < um; ++u)
            for(var v = -vm-Math.floor(u/2); v < vm-Math.floor(u/2); ++v)
                drawHex(getHX(u,v), getHY(u,v), l);
    }
    
    function getHX(u,v) { return 3*l*v+3.0*l*u/2; }
    function getHY(u,v) { return Math.sqrt(3)*l*u/2; }
    function getHU(x,y) { return 2*y/l/Math.sqrt(3); }
    function getHV(x,y) { return (x-y*Math.sqrt(3)) / (3*l); }
    
    function getHex(p) { /* ... */ }
    
    function MouseMoveAction(e) {
        document.getElementById("canvas").width *= 1;
        draw(600, 300);
        var p = getHex(B(getMousePoint(e)));
        ctx.strokeStyle = "red";
        drawHex(p.x, p.y, l);
        ctx.strokeStyle = "black";
    }
    
    // выведем наружу интересующие события
    window.MouseMove = MouseMoveAction;
    window.Draw = draw;
    
})();

Рабочая программа

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
 
<script type="text/javascript" src="rotX.js"></script>
<script type="text/javascript" src="hexagons.js"></script>
<script type="text/javascript" src="main.js"></script>
 
</head>
 
<body onload="">
<canvas id="canvas" width="1000" height="500" onmousemove="MouseMove(event);"></canvas>
</body>
 
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* file main.js */
 
var offsetx = 500;
var offsety = 200;
 
function line(ctx, p1, p2) {
    ctx.beginPath();
    ctx.moveTo(offsetx + p1.x, offsety + p1.y);
    ctx.lineTo(offsetx + p2.x, offsety + p2.y);
    ctx.closePath();
    ctx.stroke();
}
 
(function() {
    var phi = -0.1;
    var z0 = 100;
    var l = 50;
    var transforms = getTransformations(z0, phi);
    var A = transforms[0], B = transforms[1];
    
    //alert(A(B({x:2, y:1})).y);
    
    var getContext = function(){ return document.getElementById("canvas").getContext('2d'); };
    var ctx = null;
    
    function getMousePoint(event) {
        if(event.pageX !== undefined && event.pageY !== undefined)
            return {x: event.pageX - offsetx, y: event.pageY - offsety};
        if(event.clientX !== undefined && event.clientY !== undefined)
            return {x: event.clientX, y: event.clientY};
        if(event.x !== undefined && event.y !== undefined)
            return event;
        throw "Unsupported event (getMousePoint)";
    }
    
    function drawHex(cx, cy, r) {
        var points = getHexagon(cx, cy, r).map(A);
        if(!ctx) ctx = getContext();
        line(ctx, points[points.length-1], points[0]);
        //console.log(points[0].x);
        for(var i=1; i<points.length; ++i)
            line(ctx, points[i-1], points[i]);
    }
    
    function draw(a, b) {
        var k = Math.sqrt(3);
        var um = Math.round(2*b/k/l), vm = Math.round(a/3/l);
        if(!ctx) ctx = getContext();
        for(var u = -um; u < um; ++u)
            for(var v = -vm-Math.floor(u/2); v < vm-Math.floor(u/2); ++v)
                drawHex(getHX(u,v), getHY(u,v), l);
    }
    
    function getHX(u,v) { return 3*l*v+3.0*l*u/2; }
    function getHY(u,v) { return Math.sqrt(3)*l*u/2; }
    function getHU(x,y) { return 2*y/l/Math.sqrt(3); }
    function getHV(x,y) { return (x-y*Math.sqrt(3)) / (3*l); }
    
    function getHex(p) {
        var u  = Math.round(getHU(p.x, p.y)),
            v  = Math.round(getHV(p.x, p.y)),
            x0 = getHX(u,v)
            y0 = getHY(u,v);
        var ngbs = getHexagonRot(x0,y0,l*Math.sqrt(3),Math.PI/6); ngbs[ngbs.length] = { x: x0, y: y0};
        ngbs.sort( function(a,b) {
            return (a.x-p.x)*(a.x-p.x) + (a.y-p.y)*(a.y-p.y) - (b.x-p.x)*(b.x-p.x) - (b.y-p.y)*(b.y-p.y);
            } );
        return ngbs[0];
    }
    
    function MouseMoveAction(e) {
        document.getElementById("canvas").width *= 1;
        draw(600, 300);
        var p = getHex(B(getMousePoint(e)));
        ctx.strokeStyle = "red";
        drawHex(p.x, p.y, l);
        ctx.strokeStyle = "black";
    }
    
    window.MouseMove = MouseMoveAction;
    window.Draw = draw;
    
})();

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* file hexagons.js */
 
function getHexagon(cx,cy,r) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(i*Math.PI/3), y : cy + r*Math.sin(i*Math.PI/3) };
    return a;
}
 
function getHexagonRot(cx,cy,r,phi) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(i*Math.PI/3+phi), y : cy + r*Math.sin(i*Math.PI/3+phi) };
    return a;
}
 
// не используется в этой программе
function DrawHexagons(l, angle) {
    var k = Math.sqrt(3);
    for(var b = -4; b < 10; ++b)
        for(var a = -2-Math.floor(b/2); a < 4-Math.floor(b/2); ++a)
            DrawHexagon(3*l*a + k*l*b*Math.cos(Math.PI/6), k*l*b*Math.sin(Math.PI/6), l, 200, angle);
}
 
// возвращает точки гексагона с центром в (cx,cy) и радиусом r, поверн. на угол phi
function getHexagonRotated(cx,cy,r,z0,phi) {
    var points = getHexagon(cx,cy,r);
    for(var i=0; i<6; ++i)
        points[i] = project(to3D(points[i], phi), z0);
    return points;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* file rotX.js */
 
// 2D -> 3D
function to3D(point, phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
 
// 3D -> 2D
function project(point, z0) {
    // if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), y: point.y*z0/(point.z+z0) };
}
 
// 2D -> 3D
function _project(point, z0, phi) {
    var k = - z0 / (point.y*Math.tan(phi) - z0);
    return {
        x: point.x * k,
        y: point.y * k,
        z: point.y * k * Math.tan(phi)
    };
}
 
// 3D -> 2D
function from3D(point) {
    return {
        x: point.x,
        y: Math.sqrt(point.y*point.y + point.z*point.z) * (point.y>0 ? 1 : -1)
    };
}
 
// returns two (isomorphic) transformations 2D <-> 2D
function getTransformations(z0, phi) {
    return [
        function(point){ return project(to3D(point,phi),z0); },
        function(point){ return from3D(_project(point,z0,phi)); }
    ];
}

P.S. у меня, правда, немного подтормаживает.

@Neon-z · 22.07.2013, 23:58 **[ТС]**

Ого) Спасибо большое)

@Igor3D · 23.07.2013, 19:48

Сообщение от Mysterious Light

Постановка задачи:

Гексогональная сетка, повёрнутая относительно оси X. Реализовать выделение ячейки, на которую наведена мышь.

Ну а почему только по X? А если по Z, Y, X (или др комбинация углов Эйлера). В любом случае мы умеем конвертировать точки в экранные координаты. Остается только проверить лежит ли точка мыши внутри нарисованного гексагона.

C++
1
2
3
4
5
6
7
8
9
10
bool Inside( const Point & pt,  const Point hex[6] )
{
  float prevSign = 0;
  for (int i = 0; i < 6; ++i) {
    float nextSign = cross(pt, hex[i], hex[(i + 1) % 6]);
    if (nextSign * prevSign < 0) return false;    // площади разного знака, точка снаружи
    prevSign = nextSign;
  }
  return true;  // точка внутри
}

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419

	Гексагональная сетка с поворотом на 45 градусов 01.07.2013, 23:11. Показов 4576. Ответов 9 Метки нет (Все метки) Мне нужно реализовать такую гексагональную сетку, как в приложении, только угол надо самому регулировать. В задачу входит: нарисовать эту сетку, знать координаты самой гексы и кординаты в пикселах ее центра. Как нарисовать обычную сетку - вполне можно найти, но как сделать ее кручение по оси Х - не нашел. Доп инфо: реализовывать буду с помощью канвы html5 и javaScript. Если есть другие Варианты - предлагайте, выслушаю (флеш не предлагать, не подходит). Миниатюры 0

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419
	05.07.2013, 11:08 [ТС]
	Igor3D, по Вашему алгоритму я смог нарисовать гексу под углом, но как сделать, чтобы нарисовать так всю сетку? 0

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419
	05.07.2013, 22:11 [ТС]
	Все прекрасно, гексу под углом я смогу вывести, но у меня другая проблема: я не знаю как вывести СЕТКУ под углом. В голове есть пару алгоритмов, но они такие громоздкие (типа проходить по всем гексам, спаривать точки и т.д.), что я не приступаю к реализации. Добавлено через 56 минут Извиняюсь, проглупил очень сильно, вопрос закрыт) Большое спасибо) 0

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419
	22.07.2013, 23:58 [ТС]
	Ого) Спасибо большое) 0