[Homework] JS OOP - Object Oriented Programming
Здравейте, колеги!
Ето моите варянти на задачите. Приемам всякакви критики и забележки.
1. Shapes:
2. Canvas Geometry API:
Поздрави,
Димитър!
Не съм много сигурен, но мисля, че не си напраил правилно налседяването. ти реално сякаш правиш вътрешни за Shape класове от останалите фигури. Аз сега го мъча, но мисля че трябва да е нещо такова (не съм си изяснил съвсем нещата, затова само като предложение го давам):
Mod Edit: Нарушена т. 12 от Правилата на форума: Във всеки пост е позволено цитирането на не повече от 15 реда код. Ако искате да споделите по-дълъг код, използвайте сайтове като Pastebin и Github Gist).
Всъшност не съм сигурен дали трябва да има изобщо цвят в Point при положение че това са просто координати, но по условие трябва да наследи Shape и всички наследници трябва да имат цват.
Много интересна задача, но става мазало с кода. Имам следния въпрос и ако някой знае ще се радвам да ми отговори.
Има ли начин и тук всеки "клас" да се слага в отделен файл. Тогава нещата ще са много по-прегледни.
След няколкочасова забава ето и моето домашно.
P.S. Употребявай разумно. Преписването е вредно за вашето обучение.
По условие всяка фигурка трябва да си има свой метод draw(), който да я изчертава. Просто апито ти трябва да знае кои са всичките фигурки в момента и да знае къде да ги начертае. И когато трябва да ги чертае е достатъчно само да мине през всяка фигурка и да и каже "Ето ти този канвас, начертай се на него".
Иначе евала, че си се справил само за няколко часа. Аз тази домашна я писах три дни по 4-5 часа. Имах големи проблеми с неразбирането на this, особено когато стигнах до евентите.
Относно разделянето на скрипта в отделни файлове, по обекти - може да се постигне с "подръчни материали" или с разни благинки като AMD, RequireJS и други.
Иначе може да направиш следното:
Cъздаваш един глобален namespace:
window.ShapesApp = window.ShapesApp || {};
Toест, ако не е дефиниран създай нов празен namespace. И това го слагаш в началото на всеки файл.
В .html файла трябва да добавиш скриптовете в подходящия ред за да не изкара undefined.
И последната важна стъпка е да инициализираш класовете си от този namespace, като негово пропърти:
ShapesApp.Shape = function() {.......};
Тоест те знаят един за друг защото са част от namespace-a.
Тито, прав си за Draw() метода, но аз реших да го направя така, сторими се добра идея фигурите да не "разбират " от canvas. Признавам, че не съм направил и нужната валидация.
Здравей колега Kibork на първа видях че си пропуснал да направиш Circle.
Ето и моето решение на първа задача: Shapes.js , CanvasField.html .
Ще се радвам ако някой го погледне и сподели мнение 
Добре си, го направил. Единствено бих подобрил фунцията canvas по следния начин:
| canvas: function (canvasId) { |
| var canvas = { |
| element: document.getElementById(canvasId).getContext("2d") |
| }; |
| return canvas; |
| } |
Подавайки Id като параметър на фунцията, ще може да се ползва за различни canvas-и.
Не мога да разбера защо ти е този element. Не е ли по-просто да се напише
| var canvas = document.getElementById(canvasId).getContext("2d") |
ZvetanIG благодаря ти за коментара, ще го погледна. 
Ето и моята версия на първа задачка: http://pastebin.com/EWK9fQ72
Забележека: Не мога да разбера само защо валидацията ми на триъгълника не работи( Всички тригълници са ми невалидни) :(
Без да ти пускам кода ще заложа защо.
Първо пускаш валидацията, която минава през SIDES обекта, който се опитва да се възползва от this._x2/y2 и т.н., а чак по-надолу инициализираш this._x2
Де факто нямаш инициализиран още обект Триъгълник, а се опитваш да се възползваш от пропъртитата му.
Да прав си, знаех си :)
П.С А как да достъпя properti-та на тригълника преди да го иниацилизирам?
Няма как. Имаш ги в конструктора, съответно може да ги делегираш на валидиращата функция, а тя от своя страна да ги подаде на изчислителя SIDES. Само, че ще ти трябва някаква функция в SIDES, която да ги приема, иначе няма как да ги подадеш на обекта. Можеш да пробваш като пропъртита на SIDES да ги асайннеш. Но не ми се вижда добра идея да ползваш обект за валидация. Просто използвай функция, която ги изчислява и после валидира.
Здравейте добри решения сте направили само мисля, че е добра идея да се направи валидация за входните данни за рисуването на обектите. Например дали трите точки при рисуването на триъгълник наистина образуват триъгълник и дали кординатите са в рамките на canvas-a.
Здравей, viraldim!
Много си прав, за валидацията, просто реших да спестя малко време и да го инвестирам във всичко останало което имаме, за домашна (Linux, Unity, подготовка за изпита по JS OOP, другото више, което уча паралелно със СофтУни, ...).
Реших, че това, което съм представил, ще е максимално от полза за тези които не са се занимавали преди с JavaScript. Докато с валидацията, предполагам, че всеки би се справил и сам.
Поздрави,
Димитър!
Хайде и аз да сложа моето решение. Не за друго, ами заради тази функция draw, понеже повечето досега публикуваните решения ми се струват много сложни.
Не знам как ми е домашното като качество, но пък си е 100% мое. Е, нямам валидация, но здраве да е :)
Ето я и моята първа - Shapes. Мисля, че е с една идея по-различен поглед на нещата 
. Може да погледнете и втора, макар че още не е довършена ( ако въобще я довърша.. ) - CanvasAPI.
Лек и успешен ден от мен,
LittleNinja : )
Ето и мойте задачи:
Добре че Наков удължи срока за предаване на домашното, та успях да си допиша втората задача. Отне ми почти три дни. И за двете задачи съм използвал едно също апи за създаване на фигурите.
Логиката за втората задача ми е следната:
Допулнителните полета ги генерирам динамично с JS-та, като съм сложил EventListener на селектора за вида на геометричната фигура и генерирам съответният html. Пак с EventListener на Add бутона прочитам стойностите на всички полета от html-а и съсздава фигура с geometry-api.js 'класа'. Запазвам фигурите в масив и след това с цикъл през масива рисувам всички фигури върху канваса и ги показвам като списък в селектора (който е за изтриване и промяна на z-индекса). Махането на фигура става като я изтривам от масива, зачиствам цялото съдържание на канваса и списъка, и вече промененият масив пак го пускам да се изрисува в канваса и в списъка. Z - индекса го променям като местя фигурите напред - назад из масива , и после отново ги пускам за рисуване и отпечатване с новата последователност. Това постоянно зачистване и последващо ново запълване на канваса и списъка май не е много ефективно и като станат много фигурите може да е бавно, но ми изглежда просто и лесно за имплементиране - пък и за друго не се сещам. Сложил съм всички функции в модули, да не хвърчат свободно из глобалният скоуп 
.
Надявам се, макар и късно решенията ми да са полезни .
Уф, като гледам: няма да имам време да довърша задачата до довечера, така, че качвам каквото съм написала до тук. 1-ва и 2-ра са в едно приложение. Това е, което писах тази седмица: GitHub Source Все нещо ще има, от което да почерпите идея.
Не съм гледала ничии решения и това е начина, по който си представям нещата. Работи рисуването чрез някакво ООП (damn, без ООП е 1000 nъти по-лесно, за какво ни е това извращение...), но не съм имплементирала функционалността за разместванe на слоевете, няма валидации.
Но пък ме радва как изглежда: Live Demo
Иначе до преди месец писах нещо подобно без ООП - може да му се полюбувате: Live Demo, GitHub Source.
Колега ползвай github или pastebin така кода изглежда доста нечетим ...
presian, както казва колегата Ventsislav, добре ще е да не пишеш кода така директно, а да позваш github или pastebin.
Колкото до наследяването, благодаря ти за забележката, аз самият не съм много сигурен до колко добре съм се справил.
Поздрави,
Димитър!
Всъщност фигурите са много добре направени, и наследяването си е точно както трябва да бъде. Това със сериализирането не ми беше хрумнало. Май е добра идея. Интересно ми е как ще го използваш във втората задача.