В этой статье мы добавляем несколько удобных функций, чтобы пользователь знал:

  • Какую форму они рисуют
  • Какой шаг рисования формы, в которой они находятся

Отображение режима

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

<b>Mode:</b> <span id="mode"></span><br />

Теперь добавьте этот метод к объекту Canvas:

displayMode() {
    const modeDiv = document.querySelector('#mode');
    modeDiv.innerHTML = this.mode;
}

Теперь вызовите его в конструкторе и в конце setMode . Например, setMode должно выглядеть так, когда мы закончим:

setMode() {
    this.mode = mode;
    this.displayMode();
}

С этим изменением режим сначала появится при запуске приложения (по умолчанию «Линия») и будет обновляться при нажатии одной из кнопок формы.

Отображение инструкций

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

Во-первых, HTML. Под кодом показа режима добавьте это:

<b>Message:</b> <span id="message"></span>

В конструкторе Canvas нам нужно определить, какие инструкции давать пользователю. Нам понадобится инструкция для первого щелчка фигуры и инструкция для второго. Кроме того, поскольку режимы круга и прямоугольника работают одинаково, мы можем обобщить инструкции по типу формы.

this.shapeMessages = [
    { type: 'line', start: 'Select the starting point', end: 'Select the ending point' },
    { type: 'rectangle', start: 'Select the first corner', end: 'Select the second corner' },
    { type: 'circle', start: 'Select the middle of the circle', end: 'Select the edge of the circle' }
];

Затем нам нужен метод, чтобы определить, в каком типе формы находится режим:

getModeType(mode) {
    let type = '';
    switch (mode) {
        case 'Line':
            type = 'line';
            break;
        case 'Hollow Rectangle':
        case 'Filled Rectangle':
            type = 'rectangle';
            break;
        case 'Hollow Circle':
        case 'Filled Circle':
            type = 'circle';
            break;
    }
    return type;
}

Затем метод для фактического отображения сообщения:

displayMessage() {
    const type = this.getModeType(this.mode);
    const find = this.shapeMessages.find(m => m.type === type);
    const msgDiv = document.querySelector('#message');
    msgDiv.innerHTML = find[this.pointMode];
}

Напомним, что this.pointMode был настроен на запись того, находимся ли мы в начальной или конечной точке фигуры. Таким образом, метод displayMessage находит, какой элемент массива shapeMessages мы хотим использовать, и возвращает начальное или конечное сообщение в зависимости от ситуации.

Как и displayMode, этот метод следует вызывать в конце конструктора и в конце setMode. Его также следует вызывать в конце handleDraw, потому что после каждого клика мы хотим обновить инструкцию.

Собираем все вместе

Как показано ниже, режим и сообщение теперь должны появиться под холстом:

Нажимая кнопки для выбора формы и нажимая на холст, следите за областями Режим и Сообщение. Они изменятся, чтобы отразить то, что вы делаете.

Вот как должны выглядеть HTML и Javascript на данный момент:

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

Серия приложений для совместного рисования