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.
equalObjAndDynamicDraw.html, рисовалка на canvas, открыть в текущем окне/вкладке (6 Кб)
13.11.2020, 10:46 [1013 просмотров]