Сообщений в теме: 69

[T-800 Danya]

Всем Привет! 

 

Сегодня мне ВНЕЗАПНО  повысили мой реальный почасовой рейт как Junior С++ Developer почти на 30%  причем к тому же еще и с частичным перерасчетом  выплат за прошлый месяц. 

 

Соответственно  ВНЕЗАПНО получив  абсолютно нежданных ДЕНЕГ -  Естественно,  решил поделится ими с Сообществом

 

По сей причине и данный Конкурс

 

Итак условие задачки:

 

Написать код SVG файла c изображенными координатными прямыми X и У и двумя графическими объектами - кружком желтого цвета и квадратом красного, D кружка равен стороне А квадрата  =  100px. Координаты центра кружка (x,y) = (-5,5) , Координаты центра квадрата (6,-6), единичный отрезок осей координат равен 50px (при разрешении экрана 1400px на 900px)   

SVG должен быть адаптивным с реализованной возможностью вручную (используя выпадающий список) пропорционально изменять размеры выводимой картинки состоящей из осей координат и кружка с квадратом для различных разрешений экрана.  

Призовой фонд: 10 000 тенге

 

Сроки проведения Конкурса - одна неделя:  С 3 января  года по 10 января  включительно. 

 

Подведение итогов: 11 января.

Сообщение отредактировал T-800 Danya: 03.01.2020, 22:40:31

[T-800 Danya]

Приложение: Справочная документацию по SVG на русском языке  см. https://developer.mo...ru/docs/Web/SVG для Многоуважаемых Участников Конкурса

 

Дополнение  к условию  Конкурсного Задания:  Если с реализацией  в SVG выпадающего списка у Участников Конкурса возникнут сложности, то разрешается использовать ЛЮБЫЕ другие элементы управления интегрированные в SVG - как то: кнопки, ссылки и  т.д...

Сообщение отредактировал T-800 Danya: 04.01.2020, 12:54:36

[T-800 Danya]

ИМХО решил слегка помочь участникам Конкурса решить Задачку
 
Набросал код заданного в условиях Задачи SVG  для разрешения 1400x900
 


см. http://t800.kvkozyre...Ycs1400x900.svg

Исходный код:
 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 1400 900"
   height="900"
   width="1400">
<!--

Примечание от t800: Координаты для  осей X и Y (0,0)  рисунка c шагом 50px в экранной сетке X=700 (14*50px) Y=450 (9*50px)    

-->
    <line x1="0" y1="450" x2="1400" y2="450" stroke-width="1" stroke="rgb(0,0,0)"/>  
    <line x1="700" y1="0" x2="700" y2="900" stroke-width="1" stroke="rgb(0,0,0)"/>  
    <circle
       r="50"
       cy="200" 
       cx="450"
       style="fill:yellow;" />
    <rect
       y="700"
       x="950"
       height="100"
       width="100"
       style="fill:red;" />
</svg>

 

Скрытый текст

ЗЫ Т.е. фактически единственно, что Многоуважаемым Участникам Конкурса осталось сделать - это  реализовать адаптацию viewBox под различные разрешения  и добавить любые (по своему желанию ) элементы управления...

Скрытый текст

ЗЗЫ Реально это примерно около десяти строчек кода   

Сообщение отредактировал T-800 Danya: 05.01.2020, 19:53:00

[T-800 Danya]

Внимание! Важное Объявление!  

 

Принимая во внимание сравнительно НЕ высокую активность Многоуважаемых Участников  конкурса.

 

Было принято Решение продлить Конкурс  еще на Одну ( и... только  на Одну) Неделю.

 

Таким образом:

 

Сроки проведения Конкурса - ДВЕ недели:  С 3 января 2020 года по 17 января  Включительно. 

 

Подведение ОКОНЧАТЕЛЬНЫХ итогов: 18 января 2020 года

Сообщение отредактировал T-800 Danya: 11.01.2020, 15:40:08

[trnj]

Почему ты (вы) упорно не хотите использовать css даже вкупе с svg. На голом css эта задача решается в одно удовольствие.

[T-800 Danya]

Почему ты (вы) упорно не хотите использовать css даже вкупе с svg. На голом css эта задача решается в одно удовольствие.

 

 

Ну Решите на голом CSS, только интегрируйте CSS в SVG потому что по условиям Конкурса результатом  конкурсной работы  должен быть SVG файл,  

 

ЗЫ И желательно такой, чтобы корректно бы открывался не только в Браузерах но в декстопных Вьюерах... Хотя бы  в том же Inkscape

Сообщение отредактировал T-800 Danya: 11.01.2020, 20:01:14

[trnj]

css grid - 2 колонки, 2 столбца, border-right border-left чтобы начертить эти прямые,  кружок  border-radius: 100px поставь, и размеры фигур можно сделать типа height: 25vh; width: 25rem;   Также и с их расположением (не очень понятно из задания "зашиты" ли эти координаты)

[T-800 Danya]

css grid - 2 колонки, 2 столбца, border-right border-left чтобы начертить эти прямые,  кружок  border-radius: 100px поставь, и размеры фигур можно сделать типа height: 25vh; width: 25rem;   Также и с их расположением (не очень понятно из задания "зашиты" ли эти координаты)

 
Ну это ИМХО какой кустарный велосипед...   А что ты будешь делать  если у тебя будет 100 000 фигур?..   И тебе на лету надо будет  генерить твой  SVG беря  из БД только тип фигуры и ее координаты (x,y)?
 
По координатам. Координаты фигур заданы  парой чисел (x,y). Фигуры  расположены  в  соответствии с заданным  значениям их координат (x,y) в указанном  маштабе координатной сетке.  
 
Маштаб координатной сетки для разрешения 1400 x 900  в Задании указан.  При других разрешениях Экрана он естественно будет пропорционально другим...

Сообщение отредактировал T-800 Danya: 11.01.2020, 20:49:19

[trnj]

И в чём проблема? "Генерь" как ты выражаешь фигуры, и ставь абсолютные координаты фигуре блоку.   

 

 

Кстати, бы интересно проверить производительность такой штуки:

Сделать грид 2 на 2.  И в каждый блок из 4-х добавить ещё один грид, к примеру, левый верхний, там сделай грид огромный, 1000 на 1000 или сколько, чтобы колонка была по 1 пикселю. И потом через nth-child определяй нужную координату, и там сделай типа ::after и position: absolute  left:-10px; (и все остальные стороны также), border-radius 100px  и z-index: 777     То есть, html элемент будет засунут в ячейку размером 1px на 1px, и растянут в объеме. Прикольно, можно на голом css это сделать

[T-800 Danya]

И в чём проблема? "Генерь" как ты выражаешь фигуры, и ставь абсолютные координаты фигуре блоку.   

 

 

Кстати, бы интересно проверить производительность такой штуки:

Сделать грид 2 на 2.  И в каждый блок из 4-х добавить ещё один грид, к примеру, левый верхний, там сделай грид огромный, 1000 на 1000 или сколько, чтобы колонка была по 1 пикселю. И потом через nth-child определяй нужную координату, и там сделай типа ::after и position: absolute  left:-10px; (и все остальные стороны также), border-radius 100px  и z-index: 777     То есть, html элемент будет засунут в ячейку размером 1px на 1px, и растянут в объеме. Прикольно, можно на голом css это сделать

 

 

Гриды это НЕ серьезно...  С CSS в SVG вьеры работаю кто во что горазд... Поэтому ИМХО нет смысла изобретать CSS велосипеды...

 

Есть система координат  в SVG.  Все что нужно сделать - это открыть Справочник, посмотреть как она задается. Написать формулу преобразования для различных разрешений экрана, затем опять открыть  Справочник посмотреть как в SVG делается маштабирование документа.  Затем добавить в SVG  элементы  управления выполняющие данные преобразования и ВСЕ.  Реально надо дописать в код представленный Выше меньше 10 строк.

Сообщение отредактировал T-800 Danya: 11.01.2020, 22:07:03

[trnj]

Наоборот на css предпочтительнее. Ну только на очень древних ушатанных "вьюверах" не сработает.

 

Скрытый текст

 

 Написать формулу преобразования для различных разрешений экрана 

 

Ппц... Вот это ты кодер, конечно. 

Покажи хоть портфолио сайтов то

[T-800 Danya]

Наоборот на css предпочтительнее. Ну только на очень древних ушатанных "вьюверах" не сработает.
 

Скрытый текст

 

Написать формулу преобразования для различных разрешений экрана

 
Ппц... Вот это ты кодер, конечно. 
Покажи хоть портфолио сайтов то

 

Скрытый текст

ИМХО у кого чего болит...

ЗЫ Ну какие могут быть сайты... Если на Крестах Проект...

 

Скрытый текст

Где-то там может  и есть у него какая-то Web морда, но это НЕ я ей Занимаюсь... И лично я ее  даже в глаза не Видал...

 

До оно мне в принципе и не надо Ибо...

Скрытый текст

Лично я пилю под Десктопные Вьюеры...

 

Так что CSS - ИМХО скорей всего  НЕ годится...

 

ЗЗЫ Но если твое Решение на CSS  будет Универсальным... Легко маштабируемым...  Шустрым...  И все такое

 

То кто его знает ... Может и СSS велосипед для чего-нибудь Подойдет...

 

 

 

ЗЗЗЫ А насчет формулы преобразования  Координат ... У тебя есть координаты (X.Y) 100500  точек расположения Объектов и тебе нужно построить по этим точкам Картинку из Объектов в системе координат SVG  (см. Справочник) которая отличаетcя от твоей системы (X,Y) так что формулу преобразования  (X,Y) в (Xs,Ys) тебе все равно так или иначе  придется писать...

Сообщение отредактировал T-800 Danya: 12.01.2020, 00:04:03

[T-800 Danya]

Наоборот на css предпочтительнее...

 

Да и еще по поводу формул преобразования Координаты без которых ты - вроде как - хочешь обойти:

 

Равносторонний треугольник построенный через точки А, B и C, являющихся Центрами произвольных 3-х фигур должен оставаться равносторонним на любом Устройстве с любым разрешением экрана при выводе SVG в режиме просмотра Full Sreen.

Сообщение отредактировал T-800 Danya: 12.01.2020, 09:39:08

[trnj]

Да и еще по поводу формул преобразования Координаты без которых ты - вроде как - хочешь обойти:

 

Равносторонний треугольник построенный через точки А, B и C, являющихся Центрами произвольных 3-х фигур должен оставаться равносторонним на любом Устройстве с любым разрешением экрана при выводе SVG в режиме просмотра Full Sreen.

 

 

В css эту формулу вбивай  в calc()   там что угодно можно высчитать, "в любом месте, в любом положении" (с)

 

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

 

Если уж svg так нужен, можно во Flash Professional накидать (если не ошибаюсь, он сейчас в Animate переименован), и конвертнут тебе в svg и куда угодно, с кей фреймами и прочим. 

[T-800 Danya]

В css эту формулу вбивай  в calc()   там что угодно можно высчитать, "в любом месте, в любом положении" (с)
 
Непонятно нафига тебе svg нужен, если для браузера, то там с svg работать одно удовольствие, но с другой стороны, нафига svg вообще нужен, его сейчас используют только для логотипов или дудлов. html5 canvas там просто сказочный функционал. 
 
Если уж svg так нужен, можно во Flash Professional накидать (если не ошибаюсь, он сейчас в Animate переименован), и конвертнут тебе в svg и куда угодно, с кей фреймами и прочим.

О бог ты   ...

 

Какой Flash ... Какой Animate...  Открой справочник и   напиши код Вручную... Там дел максимум  на час...  Распиши  Формулы для преобразования Координат для точек из БД  в точки на Экране ... Когда будешь формулы расписывать...  Про равносторонний треугольник не забудь... 

 

Затем добавь любые элементы управления, делающие преобразование... Хочешь средствами SVG - что надежней и ИМХО проще...  Хочешь наваяй свой Велописед на интегрированном в SVG СSS

 

Затем выкладывай сюда в тему рабочий Код и ссылку на собранный тобой SVG  и Получай Приз!   

 

Один словом как-то вот так вот

 

 

 

 

 

 

 

[trnj]

Какой Flash ... Какой Animate...  Открой справочник и   напиши код Вручную... Там дел максимум  на час...  

 

 

 

Главный вопрос - нак*я?  Это же не фриланс форум? Бюджет у тебя миллипзд.

 

Как козырь олегович преподносит задание, вот вам в общих словах - сделайте. Такие заказчики всегда идут лесом. Для заказов нужно ТЗ читать, без ТЗ даже твоя миллипз задача непонятна до конца. "Распиши  Формулы для преобразования Координат для точек из БД".  

 

На счёт css просто интересно, как это можно на css сделать.  

[T-800 Danya]

 

Какой Flash ... Какой Animate...  Открой справочник и   напиши код Вручную... Там дел максимум  на час...  

 

 

 

Главный вопрос - нак*я?  Это же не фриланс форум? Бюджет у тебя миллипзд.

 

Как козырь олегович преподносит задание, вот вам в общих словах - сделайте. Такие заказчики всегда идут лесом. Для заказов нужно ТЗ читать, без ТЗ даже твоя миллипз задача непонятна до конца. "Распиши  Формулы для преобразования Координат для точек из БД".  

 

На счёт css просто интересно, как это можно на css сделать.  

 

 

 

Какие Заказчики?       ...   Сказал бы уж ЧЕСТНО че извеняте   не Кодер мол я...  ...  а простой НО  Великий и Могучий Одмин

Сообщение отредактировал T-800 Danya: 12.01.2020, 11:59:59

[trnj]

 Какие Заказчики?   Сказал бы уж ЧЕСТНО че извеняте  мол не Кодер я... а Простой НО  Великий и Могучий Одмин

 

 

Добрый волшебник, эээх   Чего пожелаешь, всё сделаю, всё смогу!

 

Козырь, олегыч, тебе просто скучно и заняться нечем, решил пофорсить какую-то хрень.

 

Окей, закинь полное тз, от а до я. Откуда данные идут, что должно в итоге, для кого, для чего это. 

[T-800 Danya]

 

 Какие Заказчики?   Сказал бы уж ЧЕСТНО че извеняте  мол не Кодер я... а Простой НО  Великий и Могучий Одмин

 

 

Добрый волшебник, эээх   Чего пожелаешь, всё сделаю, всё смогу!

 

Козырь, олегыч, тебе просто скучно и заняться нечем, решил пофорсить какую-то хрень.

 

Окей, закинь полное тз, от а до я. Откуда данные идут, что должно в итоге, для кого, для чего это. 

 

 

Конкурсное Задание в Старт Посте...  ИМХО вроде должно быть  понятно даже 5 класснику...

 

На входе  данные  определяющие  расположение  центров двух объектов  с координатами  (x,y) = (-5,5)  и (6,-6)  в маштабе единичного отрезка 50px (при разрешении экрана 1400px на 900px) 

 

Далее делаешь все по Заданию...  Если оно тебе НЕ понятно...   Ну что ж тут поделать... Значит  видимо это просто не твоя Задачка... 

Сообщение отредактировал T-800 Danya: 12.01.2020, 12:34:35

[trnj]

 

см. http://t800.kvkozyre...Ycs1400x900.svg

 

 

Чисто навскидку:

<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 1400 900"
height="900"
width="1400">

 

Отсюда удали размеры

Типа такого попробуй:

 

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100% 100%" style="position: fixed;top:0;left:0;height:100%;width:100%;">

 

 

То есть, теперь svg станет по размеру любого окна.

 

А аксисы замени на динамические, типа такого

    <line x1="0%" y1="50%" x2="100%" y2="50%" stroke-width="1" stroke="rgb(0,0,0)"></line>

    <line x1="50%" y1="0%" x2="50%" y2="100%" stroke-width="1" stroke="rgb(0,0,0)"></line>

 

И потом на javascript к примеру высчитывай координаты и размеры кружков в зависимости от размера окна (или чего там).

Можно это считать на css типа такого transform: translateX(calc(100% - 5vw));  

На javascript проще на много, но можно и на css заморочитс.

 

 

Но опять же, это надо читать ТЗ чтобы понять, как конкретно реализовывать, на чём...

Сообщение отредактировал trnj: 12.01.2020, 13:41:22