БлогNot. Javascript: сравниваем 2 объекта и рисуем на канве HTML динамически

Javascript: сравниваем 2 объекта и рисуем на канве HTML динамически

Изначально задачей было корректно сравнить объекты на Javascript, что, вообще говоря, нетривиально. Так, obj1 и obj2 при "обычном" сравнении будут различными:

 let obj1 = { a: 1, b: 2 };
 let obj2 = { a: 1, b: 2 };
 alert (obj1 == obj2); //false

и только "самому себе" объект равен:

 alert (obj1 == obj1); //true

Не поможет и сериализация объектов, и другие способы клонирования:

 let arr1 = JSON.parse(JSON.stringify(obj1));
 let arr2 = JSON.parse(JSON.stringify(obj2));
 alert (arr1 == arr2); //false

 let obj1Clone = { ...obj1 };
 alert (obj1 == obj1Clone); //false

 let obj2Clone = Object.assign({}, obj2);
 alert (obj2 == obj2Clone); //false

Более-менее корректно сравнивает объекты функция equals из кода, учитывая, что порядок полей может быть различным, возможно вложение объектов и т.п.:

 let obj3 = {  b: 2, a: 1 };
 alert (equals (obj1,obj3)); //true

Ну а чтобы пример не был слишком примитивным, сделал целую рисовалку на canvas, по тем же принципам, что вот эта, с таким же "правильным позиционированием" указателя мыши на канве и динамическим рисованием при зажатой кнопке мыши "как в Paint".

Показана только работа с линией и окружностью, другие объекты добавить несложно, а так как нарисованные примитивы сохраняются в массиве objs, можно прикрутить отмену действия, изменение порядка отрисовки и т.п.

Ниже прикреплён скрипт в работе (файл .html с кодом), в исходнике страницы можно увидеть текст программы, кодировка Юникода UTF-8.

 Рисовалка на canvas, открыть в новом окне/вкладке


теги: javascript программирование графика

13.11.2020, 10:46; рейтинг: 73