Судоку на QML

@ArmanPrestige · Регистрация: 15.01.2013

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

Появилась идея написать судоку на QML. QML я практически не знаю, да и игры даже простые ни разу не писал, поэтому у меня есть ряд вопросов. Каким образом всё это дело организовать, какие контролы использовать?

И еще. Я так понимаю фронт-энд я делаю на QML + JS, а бэк-энд на JS, т.е. без использования C++?

@Dmitriy_M · 28.07.2016, 16:40

Можно все нарисовать на Canvas

@ArmanPrestige · 09.08.2016, 16:57 **[ТС]**

Dmitriy_M, а как в таком случае отслеживать клик на конкретнуя ячейку? По координатам?

@~~Beavis2~~ · 09.08.2016, 17:05

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

а как в таком случае отслеживать клик на конкретнуя ячейку? По координатам?

Никак. Точнее можно конечно сгеморроится и вычислять координаты перемапивая их, но это вронг вей.
Создаёшь простой QML Item, в нём Repeater, который будет генерить и вставлять твои элементики - делегаты по определённому закону, ну что б в шахматном порядке. Делов то

@Dmitriy_M · 09.08.2016, 17:07

Там есть MouseArea, у которого есть MouseEvent.
Можно еще сделать через model/view.

Добавлено через 2 минуты

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

вычислять координаты перемапивая их,

Поделить координату на длину стороны ячейки это так сложно?

@~~Beavis2~~ · 09.08.2016, 17:10

Можно глянуть ещё в TableView QML Type ( http://doc.qt.io/qt-5/qml-qtqu... eview.html )

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

Поделить координату на длину стороны ячейки это так сложно?

Не сложно, только со своим канвасом ты потеряешь всё преимущество QML, то есть тебе надо будет вручную каждый элемент рисовать, вычислять координаты мышки, забудь про шейдеры и пр (+ канвас ваще очень глючный)

@Dmitriy_M · 09.08.2016, 17:15

Какие шейдеры в судоку? Т.к. я делал японские кроссворды, то канвас не такое уж плохое решение.

@ArmanPrestige · 09.08.2016, 17:23 **[ТС]**

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

Создаёшь простой QML Item, в нём Repeater, который будет генерить и вставлять твои элементики - делегаты по определённому закону, ну что б в шахматном порядке. Делов то

Это вы говорите без использования model/view?

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

Можно еще сделать через model/view.

Не совсем представляю, как это сделать. Например я буду использовать TableView - мне на каждый блок (3х3) надо отдельный TableView? Или на всё поле (9х9) один единственный вью?

@~~Beavis2~~ · 09.08.2016, 17:47

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

Это вы говорите без использования model/view?

Да не, в QML всё надо по хорошему делать через модели. Тут TabView не лучший вариант, т.е. он масштабируемый, зумируемый, скроловый и пр, да и ваще это не совсем для этого. Тебе нужен простой Item и рипитер...
В общем это же всё элементарно, я даже не поленился и решил всё сделать за тебя (с тебя флакон виски, хотя не, не надо, я ж пить два дня назад бросил, так что всё за так

)

Javascript

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    id: window
    visible: true
    width: 800
    height: 600
    title: qsTr("СУДОКУ (или как там она называется)")
 
    property int itemBoxSize: 50
 
    Item
    {
        id: container
        anchors.fill: parent
 
        Component.onCompleted:
        {
            for(var y = 0; y < window.height; y+= window.itemBoxSize)
            {
                for(var x = 0; x < window.width; x+= window.itemBoxSize)
                {
                    itemModel.append( { "itemX":x, "itemY":y } )
                }
            }
        }
 
        Repeater
        {
            id: itemMaker
            model: itemModel
            delegate: itemDelegate
        }
 
        Component
        {
            id: itemDelegate
 
            Rectangle
            {
                id: item
 
                x: itemX
                y: itemY
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "black"
                border.width: 2
 
                color: Qt.rgba(Math.random(), Math.random(), Math.random())
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    text: "XXX"
                }
 
                MouseArea
                {
                    id: mouse
                    anchors.fill: parent
                    onClicked:
                    {
                        txt.text = ":-)"
                        item.color = Qt.rgba(Math.random(), Math.random(), Math.random());
                    }
                }
            }
        }
    }
 
    ListModel
    {
        id: itemModel
    }
}

Добавлено через 2 минуты
Добавил мышку, можешь шёлкать по квадратикам.

Комментарий модератора

Код QML нужно оформлять с помощью тега JS.

@ArmanPrestige · 09.08.2016, 18:37 **[ТС]**

Beavis2, спасибо, буду разбираться.

@Dmitriy_M · 09.08.2016, 23:08

Здесь модель особо не нужна:

Javascript

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    id: window
    visible: true
    width: 800
    height: 600
    title: qsTr("СУДОКУ (или как там она называется)")
 
    property int itemBoxSize: 50
 
    Item
    {
        id: container
        anchors.fill: parent
 
        Component.onCompleted:
        {
 
            var row= window.height/window.itemBoxSize;
            var column =  window.width/window.itemBoxSize;
            grid.columns = column;
            itemMaker.model = column*row;
        }
 
        Grid {
            id: grid
            Repeater{
                id: itemMaker
                delegate: itemDelegate
            }
        }
 
        Component
        {
            id: itemDelegate
 
            Rectangle
            {
                id: item
 
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "black"
                border.width: 2
 
                color: Qt.rgba(Math.random(), Math.random(), Math.random())
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    text: "XXX"
                }
 
                MouseArea
                {
                    id: mouse
                    anchors.fill: parent
                    onClicked:
                    {
                        txt.text = ":-)"
                        item.color = Qt.rgba(Math.random(), Math.random(), Math.random());
                    }
                }
            }
        }
    }
}

Говоря про модель имел ввиду модель для представлении матрицы, в которой хранятся значения.

@~~Beavis2~~ · 10.08.2016, 09:56

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

Здесь модель особо не нужна:

Ну да, можно сделать и так и сяк... Лично я привык делать всё с моделями сразу, так вроде правильней.
Кстати, я про Grid вообще не знал ))) Почитал доки, там же есть и GridView

@ArmanPrestige · 10.08.2016, 11:01 **[ТС]**

Beavis2, теперь еще больше вопросов у меня. Вот что на данный момент получилось у меня.

Javascript

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    id: window
    visible: true
    width: 450
    height: 450
    title: qsTr("Чудоку")
 
    property int itemBoxSize: 50
    property int rowsCount: 9
    property int columnsCount: 9
    property int currentRow: -1
    property int currentColumn: -1
 
    Item
    {
 
        Keys.onDigit0Pressed: {
            itemModel.get(currentRow * currentColumn).txt.text = "111"
            console.log("digit 0 pressed")
        }
 
        id: container
        anchors.fill: parent
 
        Component.onCompleted:
        {
            for (var c = 0; c < columnsCount; c+=1)
            {
                for (var r = 0; r < rowsCount; r+=1)
                    itemModel.append({"itemX" : c * itemBoxSize, "itemY" : r * itemBoxSize, "rowNumber":r, "columnNumber":c});
            }
        }
 
        Repeater
        {
            id: itemMaker
            model: itemModel
            delegate: itemDelegate
        }
 
        Component
        {
            id: itemDelegate
 
            Rectangle
            {
                id: item
 
                x: itemX
                y: itemY
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "black"
                border.width: 1
 
                property int row: rowNumber
                property int column: columnNumber
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    text: "[" + row + ":" + column + "]"
                }
 
                MouseArea
                {
                    id: mouse
                    anchors.fill: parent
                    onClicked:
                    {
                        window.currentColumn = column
                        window.currentRow = row
                    }
                }
            }
        }
    }
 
 
    ListModel
    {
        id: itemModel
    }
 
}

Но я не пойму как мне сделать ввод цифр (я пытался сделать ввод 0 в onDigit0Pressed, но пока безуспешно). И вообще, я знаю допустим колонку и столбец - как мне получить соответствующий элемент? Я пробовал в onDigit0Pressed вот таким образом

Javascript

1	itemModel.get(currentRow * currentColumn)

Правильно ли это?

Также, как сделать у линий, которые я выделил на скриншоте красным, толщину больше? Так же - где реализовать логику генерации поля, проверки этого поля на правильность? Я так понимаю, всё на js можно реализовать?

@~~Beavis2~~ · 10.08.2016, 12:41

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

Но я не пойму как мне сделать ввод цифр (я пытался сделать ввод 0 в onDigit0Pressed, но пока безуспешно).

Нужно выставить фокус у Item-а, то есть что бы ОС и Qt знала, в какое окно перенаправлять нажатие кнопки:

Javascript

Item
    {
        focus: true
        Keys.onDigit0Pressed: {

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

И вообще, я знаю допустим колонку и столбец - как мне получить соответствующий элемент? Я пробовал в onDigit0Pressed вот таким образом

Не... Всё не верно. Вообще, по правилам модель / вид конечно нужно работать с элементами через модель и работать со свойствами элементов модели, которые ты определили добавляя первый элемент в модель. То есть когда ты пишешь вот это:

Javascript

1	itemModel.append({"itemX" : c * itemBoxSize, "itemY" : r * itemBoxSize, "rowNumber":r, "columnNumber":c});

это значит, что все элементы в модели будут иметь свойства itemX, itemY, rowNumber и columnNumber. То есть если ты в будущем попробуешь добавить append-ом элемент с другими свойствами, он уже не добавится, т.к. как бы структура свойств элементов определяется по первому добавленному элементу. Ну так вот, если ты хочешь работать с моделью, тогда ты можешь работать только с этими свойствами, которые ты передал при создание элемента (itemX, itemY, rowNumber и columnNumber), с внутренними свойствами объектов ты работать не можешь. Что бы работать хотя бы с ними, можно сделать так:

Javascript

focus: true
Keys.onDigit0Pressed: {
    itemModel.setProperty(1, "rowNumber", 5);
    console.log("digit 0 pressed")            
 }

Это поменяет rowNumber у 1-го элемента модели на значение 5. В данном коде игры это ни на что не повлияет.

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

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

Javascript

Item
    {
        focus: true
        Keys.onDigit0Pressed:
        {
            var item = itemMaker.itemAt(0);
            if(item)
            {
                item.text = "777";
            }
        }

Но для того, что бы это работало, тебе надо у твоего компонента, то есть делегата, то есть Item-а модели, то есть элемента ячейки твоей таблицы сделать доступное для внешнего чтения проперти (свойство), т.к. добираться до sub элементов из вне не получится, то есть сделать так: item.txt.text = "777"; не получится, т.к. не из вне не известно, что такое txt, тк он дочерний элемент. В общем из вне ты видишь только внешний элемент. В общем для того, что бы сделать какое - то свойство дочернего элемента доступным из вне, тебе надо его вынести в рутовый, то есть базовый элемент. Для примера коды выше, тебе надо сделать так:

Javascript

Rectangle
            {
                id: item
 
                x: itemX
                y: itemY
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "black"
                border.width: 1
 
                property int row: rowNumber
                property int column: columnNumber
 
                property alias text: txt.text //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
                onRowChanged: console.log(row)
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    text: "[" + row + ":" + column + "]"
                }

эта строчка (property alias text: txt.text )даст доступ извне к свойству text дочернего элемента txt. Слово alias означает, что эта как бы ссылка на свойство, то есть дублёр этого свойства, зеркало как бы, по этому ты тип свойства не указываешь. То есть изменится свойство в дочернем элементе, алиас поменяется, изменишь алиас, поменяется дочернее свойство...

Теперь по поводу столбцов и колонок. В QML в штатном варианте нет специальной модели для таблицы (TableModel), есть только обычная ListView, а это ни что иное как обычный список, где у каждого элемента есть порядковый номер (индекс). Ты можешь загеморроится и сделать TableModel сам в С++, потом зарегистрировать её в QML и работать с ней так, как тебе захочется, но с учётом твоих начальных знаний в Qt, я не буду рассказывать как это делать, это сложно и долго.
В твоём случае тебе просто нужно вычислить индекс элемента, исходя из кол-ва элементов в строке или же, что намного проще, пробежаться циклом по всем элементам и проверить их свойства и если они такие, какие тебе нужны - ты его нашёл. Я сделаю вторым способом, т.к. мне вычислять лень ))). В общем выдаю тебе код, где меняется текст и цвет 4-го элемента, 5-й строки твоего Чудоку.

Javascript

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    id: window
    visible: true
    width: 450
    height: 450
    title: qsTr("Чудоку")
 
    property int itemBoxSize: 50
    property int rowsCount: 9
    property int columnsCount: 9
    property int currentRow: -1
    property int currentColumn: -1
 
    Item
    {
        focus: true
        Keys.onDigit0Pressed:
        {
            var desiredRow = 5; //Для тестя я хочу поменять текст именно в этом элементе
            var desiredCol = 4; //Откуда берутся эти координаты в твоей игре - хз, я не играл в Чудоку )))
 
            for(var i = 0; i < itemMaker.count; i++)
            {
                var item = itemMaker.itemAt(i);
                if(item)
                {
                    if(item.row === desiredRow && item.column === desiredCol)
                    {
                        item.text = "777";
                        item.color = Qt.rgba(Math.random(), Math.random(), Math.random());
                        break;
                    }
                }
            }
        }
 
        id: container
        anchors.fill: parent
 
        Component.onCompleted:
        {
            for (var c = 0; c < columnsCount; c+=1)
            {
                for (var r = 0; r < rowsCount; r+=1)
                    itemModel.append({"itemX" : c * itemBoxSize, "itemY" : r * itemBoxSize, "rowNumber":r, "columnNumber":c});
            }
        }
 
        Repeater
        {
            id: itemMaker
            model: itemModel
            delegate: itemDelegate
        }
 
        Component
        {
            id: itemDelegate
 
            Rectangle
            {
                id: item
 
                x: itemX
                y: itemY
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "black"
                border.width: 1
 
                property int row: rowNumber
                property int column: columnNumber
 
                property alias text: txt.text
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    text: "[" + row + ":" + column + "]"
                }
 
                MouseArea
                {
                    id: mouse
                    anchors.fill: parent
                    onClicked:
                    {
                        window.currentColumn = column
                        window.currentRow = row
                    }
                }
            }
        }
    }
 
 
    ListModel
    {
        id: itemModel
    }
 
}

@ArmanPrestige · 10.08.2016, 14:45 **[ТС]**

Beavis2, спасибо большое за ответ. А как можно сделать то, что я на скрине скинул? Я имею ввиду разную толщину линий. Дело в том, что каждое поле 3х3 мне надо выделить иначе всё сливается. Искал как задать разную толщину бордера для каждой стороны - не нашел.

@~~Beavis2~~ · 10.08.2016, 15:20

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

А как можно сделать то, что я на скрине скинул? Я имею ввиду разную толщину линий.

А.. что то я забыл про это написать. В общем это можно сделать так же, как ты рисовал эта квадраты, через рипитер и модель, только квадраты больше бери, ставь у них толщину бордюра побольше и основной цвет - прозрачный. Но по скольку, тут в теме кто - то говорил про канвас и ты ещё не научился им пользоваться, буду тебя учить канвасу )))
Держи:

Javascript

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    id: window
    visible: true
    width: 450
    height: 450
    title: qsTr("Чудоку")
 
    property int itemBoxSize: 50
    property int rowsCount: 9
    property int columnsCount: 9
    property int currentRow: -1
    property int currentColumn: -1
 
    Item
    {
        focus: true
        Keys.onDigit0Pressed:
        {
            var desiredRow = 5; //Для тестя я хочу поменять текст именно в этом элементе
            var desiredCol = 4; //Откуда берутся эти координаты в твоей игре - хз, я не играл в Чудоку )))
 
            for(var i = 0; i < itemMaker.count; i++)
            {
                var item = itemMaker.itemAt(i);
                if(item)
                {
                    if(item.row === desiredRow && item.column === desiredCol)
                    {
                        item.text = "777";
                        item.color = Qt.rgba(Math.random(), Math.random(), Math.random());
                        break;
                    }
                }
            }
        }
 
        id: container
        anchors.fill: parent
 
        Component.onCompleted:
        {
            for (var c = 0; c < columnsCount; c+=1)
            {
                for (var r = 0; r < rowsCount; r+=1)
                    itemModel.append({"itemX" : c * itemBoxSize, "itemY" : r * itemBoxSize, "rowNumber":r, "columnNumber":c});
            }
        }
 
        Repeater
        {
            id: itemMaker
            model: itemModel
            delegate: itemDelegate
        }
 
        Component
        {
            id: itemDelegate
 
            Rectangle
            {
                id: item
 
                x: itemX
                y: itemY
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "black"
                border.width: 1
 
                property int row: rowNumber
                property int column: columnNumber
 
                property alias text: txt.text
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    text: "[" + row + ":" + column + "]"
                }
 
                MouseArea
                {
                    id: mouse
                    anchors.fill: parent
                    onClicked:
                    {
                        window.currentColumn = column
                        window.currentRow = row
                    }
                }
            }
        }
 
        Canvas
        {
            id: canvas
            anchors.fill: parent
            antialiasing: true
 
            property color strokeStyle:  "black"
            property int lineWidth: 6
            property int boxSize: window.itemBoxSize * 3
 
            onPaint:
            {
                var ctx = canvas.getContext('2d');
                ctx.strokeStyle = canvas.strokeStyle;
                ctx.lineWidth = canvas.lineWidth;
 
                for(var x = boxSize-1; x < width-1; x+= boxSize)
                {
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, height)
                }
                for(var y = boxSize-1; y < height-1; y+= boxSize)
                {
                    ctx.moveTo(0, y);
                    ctx.lineTo(width, y)
                }
 
                ctx.stroke();
            }
        }
    }
 
 
    ListModel
    {
        id: itemModel
    }
 
}

@ArmanPrestige · 10.08.2016, 19:54 **[ТС]**

Beavis2, а не скажете, как быть с размерами элементов на разных экранах? Сейчас по сути в коде жестко зашит размер элемента, но как его сделать другим в зависимости от размера экрана?

@~~Beavis2~~ · 10.08.2016, 20:04

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

а не скажете, как быть с размерами элементов на разных экранах? Сейчас по сути в коде жестко зашит размер элемента, но как его сделать другим в зависимости от размера экрана?

Пересчитывать. Давай свой последний код, я тебе в нём поправлю, что б тебе старый не кидать. Сразу спрашивай ещё что то, чтоб я на одну мелочь не отвлекался. Может тебе по щелчку мыши что то менять надо или ещё что...

@ArmanPrestige · 10.08.2016, 20:11 **[ТС]**

Beavis2, по размерам что я сделал - так это определение размера элемента на основании размера окна. Но это, наверное, не совсем то, что нужно, да? Еще из других вопросов - логику на чем лучше и правильнее делать? JS или C++? Насколько я вижу, тут и JS'a с головой должно хватить.

Javascript

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
 
ApplicationWindow
{
    id: window
    visible: true
    width: 800
    height: 700
    title: qsTr("Чудоку")
 
    property int itemBoxSize: 50
    property int rowsCount: 9
    property int columnsCount: 9
    property int currentRow: -1
    property int currentColumn: -1
 
    property string currentText: "-1"
 
    Item
    {
 
        focus: true
 
        function digitWasClicked(text) {
            if (text >= 1 && text <= 9)
                itemMaker.itemAt(currentRow * 9 + currentColumn).text = text
            else
                currentColumn = currentRow = -1
        }
 
        id: container
        anchors.fill: parent
 
        Component.onCompleted:
        {
            var size = window.width < window.height ? window.width / 9 : (window.height - 100) / 9
            window.itemBoxSize = size
            for (var r = 0; r < rowsCount; r+=1)
                for (var c = 0; c < columnsCount; c+=1)
                    itemModel.append({"itemX" : c * size, "itemY" : r * size, "rowNumber":r, "columnNumber":c});
        }
 
        Repeater
        {
            id: itemMaker
            model: itemModel
            delegate: itemDelegate
        }
 
        Component
        {
            id: itemDelegate
 
            Rectangle
            {
                id: item
 
                x: itemX
                y: itemY
                width: window.itemBoxSize
                height: window.itemBoxSize
 
                border.color: "grey"
 
                border.width: 1
 
                property int row: rowNumber
                property int column: columnNumber
                property alias text: txt.text
                property color currentColor: "white"
 
 
                color: {
 
                    if (row == window.currentRow && column == window.currentColumn)
                        Qt.rgba(0.8, 0.8, 0.8)
                    else if (row == window.currentRow || column == window.currentColumn)
                        Qt.rgba(0.96, 0.96, 0.96)
                    else
                        currentColor
                }
 
                Text
                {
                    id: txt
                    anchors.centerIn: parent
                    font.pointSize: 16
                    font.bold: window.currentText.length > 0 && window.currentText == text && (window.currentColumn != item.column || window.currentRow != item.row)
                    font.family: "Helvetica"
                }
 
                MouseArea
                {
                    id: mouse
                    anchors.fill: parent
                    onClicked:
                    {
                        window.currentColumn = column
                        window.currentRow = row
                        window.currentText = txt.text
                    }
                }
            }
 
        }
 
        Canvas
        {
            id: canvas
            anchors.fill: parent
            antialiasing: true
 
            property color strokeStyle:  "black"
            property int lineWidth: 5
            property int boxSize: (window.itemBoxSize + 1)* 3
 
            onPaint:
            {
                var ctx = canvas.getContext('2d');
                ctx.strokeStyle = canvas.strokeStyle;
                ctx.lineWidth = canvas.lineWidth;
 
                for(var x = boxSize-1; x < boxSize * 3; x+= boxSize)
                {
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, boxSize * 3)
                }
                for(var y = boxSize-1; y < boxSize * 3; y+= boxSize)
                {
                    ctx.moveTo(0, y);
                    ctx.lineTo(boxSize * 3, y)
                }
 
                ctx.stroke();
            }
        }
 
    }
 
 
    ListModel
    {
        id: itemModel
    }
 
}

@ArmanPrestige · 10.08.2016, 20:14 **[ТС]**

Да, явно не то) На компе еще нормально, а вот на телефоне вот что получается.

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
		1
	Судоку на QML 28.07.2016, 14:30. Показов 2671. Ответов 21 Метки нет (Все метки) Появилась идея написать судоку на QML. QML я практически не знаю, да и игры даже простые ни разу не писал, поэтому у меня есть ряд вопросов. Каким образом всё это дело организовать, какие контролы использовать? И еще. Я так понимаю фронт-энд я делаю на QML + JS, а бэк-энд на JS, т.е. без использования C++? 0

@Dmitriy_M 1443 / 1326 / 131 Регистрация: 20.03.2009 Сообщений: 4,689 Записей в блоге: 11
	28.07.2016, 16:40	2
	Можно все нарисовать на Canvas 0

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
	09.08.2016, 16:57 [ТС]	3
	Dmitriy_M, а как в таком случае отслеживать клик на конкретнуя ячейку? По координатам? 0

@~~Beavis2~~ Заблокирован
	09.08.2016, 17:05	4
	Сообщение от ArmanPrestige а как в таком случае отслеживать клик на конкретнуя ячейку? По координатам? Никак. Точнее можно конечно сгеморроится и вычислять координаты перемапивая их, но это вронг вей. Создаёшь простой QML Item, в нём Repeater, который будет генерить и вставлять твои элементики - делегаты по определённому закону, ну что б в шахматном порядке. Делов то 1

@Dmitriy_M 1443 / 1326 / 131 Регистрация: 20.03.2009 Сообщений: 4,689 Записей в блоге: 11
	09.08.2016, 17:07	5
	Там есть MouseArea, у которого есть MouseEvent. Можно еще сделать через model/view. Добавлено через 2 минуты Сообщение от Beavis2 вычислять координаты перемапивая их, Поделить координату на длину стороны ячейки это так сложно? 1

@~~Beavis2~~ Заблокирован
	09.08.2016, 17:10	6
	Можно глянуть ещё в TableView QML Type ( http://doc.qt.io/qt-5/qml-qtqu... eview.html ) Сообщение от Dmitriy_M Поделить координату на длину стороны ячейки это так сложно? Не сложно, только со своим канвасом ты потеряешь всё преимущество QML, то есть тебе надо будет вручную каждый элемент рисовать, вычислять координаты мышки, забудь про шейдеры и пр (+ канвас ваще очень глючный) 0

@Dmitriy_M 1443 / 1326 / 131 Регистрация: 20.03.2009 Сообщений: 4,689 Записей в блоге: 11
	09.08.2016, 17:15	7
	Какие шейдеры в судоку? Т.к. я делал японские кроссворды, то канвас не такое уж плохое решение. 0

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
	09.08.2016, 17:23 [ТС]	8
	Сообщение от Beavis2 Создаёшь простой QML Item, в нём Repeater, который будет генерить и вставлять твои элементики - делегаты по определённому закону, ну что б в шахматном порядке. Делов то Это вы говорите без использования model/view? Сообщение от Dmitriy_M Можно еще сделать через model/view. Не совсем представляю, как это сделать. Например я буду использовать TableView - мне на каждый блок (3х3) надо отдельный TableView? Или на всё поле (9х9) один единственный вью? 0

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
	09.08.2016, 18:37 [ТС]	10
	Beavis2, спасибо, буду разбираться. 0

@~~Beavis2~~ Заблокирован
	10.08.2016, 09:56	12
	Сообщение от Dmitriy_M Здесь модель особо не нужна: Ну да, можно сделать и так и сяк... Лично я привык делать всё с моделями сразу, так вроде правильней. Кстати, я про Grid вообще не знал ))) Почитал доки, там же есть и GridView 0

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
	10.08.2016, 14:45 [ТС]	15
	Beavis2, спасибо большое за ответ. А как можно сделать то, что я на скрине скинул? Я имею ввиду разную толщину линий. Дело в том, что каждое поле 3х3 мне надо выделить иначе всё сливается. Искал как задать разную толщину бордера для каждой стороны - не нашел. 0

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
	10.08.2016, 19:54 [ТС]	17
	Beavis2, а не скажете, как быть с размерами элементов на разных экранах? Сейчас по сути в коде жестко зашит размер элемента, но как его сделать другим в зависимости от размера экрана? 0

@~~Beavis2~~ Заблокирован
	10.08.2016, 20:04	18
	Сообщение от ArmanPrestige а не скажете, как быть с размерами элементов на разных экранах? Сейчас по сути в коде жестко зашит размер элемента, но как его сделать другим в зависимости от размера экрана? Пересчитывать. Давай свой последний код, я тебе в нём поправлю, что б тебе старый не кидать. Сразу спрашивай ещё что то, чтоб я на одну мелочь не отвлекался. Может тебе по щелчку мыши что то менять надо или ещё что... 1

@ArmanPrestige Pied Piper 236 / 227 / 57 Регистрация: 15.01.2013 Сообщений: 855
	10.08.2016, 20:14 [ТС]	20
	Да, явно не то) На компе еще нормально, а вот на телефоне вот что получается. Миниатюры 0

Судоку на QML

Решение